Cypress如何实现Page Object Model(POM)封装页面元素与方法？

Cypress是否支持POM模式 #

完全支持，和Selenium的页面对象模型核心目标一致：将页面元素、交互操作封装到独立类中，当页面结构发生变更时，只需修改一处封装逻辑，不需要逐个调整测试用例。但需要注意：Cypress基于异步命令队列执行，和Selenium的同步执行逻辑不同，不能直接照搬Selenium的同步写法。

原有代码的问题 #

你写的代码无法正常获取src值，是因为所有cy.开头的命令都是异步加入执行队列的，不会立刻执行。你在方法末尾return src时，then回调还没有被触发，此时src是未定义状态，这是把Selenium的同步return习惯直接套用到Cypress上导致的问题。

正确的POM封装实现 #

第一步：编写页面对象类 #

单独新建页面对象文件，统一封装元素和操作：

// homePage.js 页面对象文件
class HomePage {
  // 把元素选择器抽成getter属性，后续页面结构变更只需要改这里
  get activeSliderImage() {
    return cy.get('.heroBanner.swiper-slide.swiper-slide-active img')
  }

  // 封装获取激活态轮播图src的方法，直接返回Cypress命令链即可
  getMainSliderActiveImgSrc() {
    return this.activeSliderImage.should('have.attr', 'src')
  }

  // 其他页面操作也可以统一封装在这里
  clickActiveSliderBanner() {
    this.activeSliderImage.click()
  }
}

// 导出实例，测试用例直接导入使用
export default new HomePage()

第二步：测试用例中调用封装方法 #

// 测试用例文件 homeSlider.spec.js
import homePage from './homePage'

describe('首页轮播图测试', () => {
  it('验证激活态轮播图的src属性符合预期', () => {
    cy.visit('/')
    // 调用封装好的方法，通过then接收异步返回的src值
    homePage.getMainSliderActiveImgSrc().then(actualSrc => {
      // 此处写你的断言逻辑
      expect(actualSrc).to.include('home/banner/')
    })
  })
})

补充说明 #

如果你更习惯Cypress的原生写法，也可以用Cypress自定义命令封装通用操作，但POM模式完全可以正常使用，非常适合有Selenium POM使用经验的团队平滑迁移。

内容的提问来源于stack exchange，提问作者pontilicious