Cypress：希望将方法定义为POM [英] Cypress: want to define methods as POM

问题描述

我最近才开始接触Cypress，并且有使用硒的经验。我从Selenium那里了解到，您通过Page对象模型将元素和方法外包给不同的类，然后在测试中访问它们。因此，如果发生更改，您只需更改元素和方法一次，而不必在每次测试中更改。

Cypress也可以吗？

示例： 我想将图像的src存储在一个方法中，并将其作为返回返回。 代码如下：

get_main_image_slider_active_picture_src() {
    cy.get('.heroBanner.swiper-slide.swiper-slide-active img')
    .should('have.attr','src')
    .then((imgSrc) => {
        const src = imgSrc;
    })
    return src;
}

不幸的是，我有一种感觉，这在硒中不起作用。

如何处理此问题？

推荐答案

关于此主题有几个问题值得仔细查看。

本质上问题是PO方法通过同步返回值来工作，但是Cypress命令是异步的，您不能await它们，您只能链接它们。

此序列是一个链，

cy.get('.heroBanner.swiper-slide.swiper-slide-active img')
  .should('have.attr','src')
  .then(...

每个命令都会生成一个"；Subject&Quot；，该主题沿链向下传递

cy.get('.heroBanner.swiper-slide.swiper-slide-active img')
    // subject === one or more <img> elements meeting the selector criteria
  .should('have.attr','src')
    // subject === the src attribute of the <img>

查找主题可以同步完成，但cy.get()还会在元素从API中提取或处于动画状态时重试。

简单伪码是

while (not found and not timeout) {
  found = query the DOM for the selector
}

WHILE循环运行一段不确定的时间，因此它是异步的。此外，如果元素在超时之前没有显示，则每个步骤都可能失败。

所以使用Cypress命令的PO方法只能返回链接器，并且只能像异步Cypress命令(或自定义命令)一样使用。

页面对象

class HeroPage {

  get_main_image_slider_active_picture_src() {
    // here returning the final subject of this chain, wrapped as a chainer
    return cy.get('.heroBanner.swiper-slide.swiper-slide-active img')
      .should('have.attr','src')
  }
}

测试

it('tests the picture page for kittens', () => {
  const heroPage = new HeroPage()
  heroPage.get_main_image_slider_active_picture_src()
    .should(src => src.includes('kittens'))              // chained subject
})

我对此的看法是

• get_main_image_slider_active_picture_src过于具体。在下一个测试中，您想要断言关于<img>本身的某些内容，所以现在创建另一个方法，或者重构所有内容，以便返回img元素并在测试中执行所有断言。但是接下来您要测试img容器，那么适当的抽象级别是什么呢？

• Cypress命令本身表现力很强，是否真的需要PO抽象？

• Web页面测试不像基于组件的框架，您可以在许多页面中重用一个组件。通常，一个或两个规格覆盖一个网页，所以PO方法在很多页面上的可重用性不是很好，例如，你的英雄形象游泳者只会出现在一个页面上。例外情况可能是像登录这样的内务事务。您可能会尝试将方法参数化并使其更具泛型-但所做的努力似乎与获得的可重用性不成比例。

• 如果希望更改选择器中使用的元素类，请使用PO仅返回选择器字符串(同步返回)，例如

  it('tests the picture page for kittens', () => {
    const heroPage = new HeroPage()
    cy.get(heroPage.activeImage)
      .should('have.attr','src')
      .should(src => src.includes('kittens'))              
  })
  

您可以使用字符串模板构建选择器

this.heroBanner = '.heroBanner'
this.swiper = `${this.herobanner}.swiper-slide`
this.activeSlide = `${this.swiper}.swiper-slide-active`
this.activeImage = `${this.activeSlide} img`

这篇关于Cypress：希望将方法定义为POM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！