使用 Cypress 实现页面对象模型 (POM)：分步指南

介绍

随着 Web 应用程序变得越来越复杂，维护测试自动化代码变得越来越具有挑战性。页面对象模型 (POM) 是一种设计模式，可以通过提高测试自动化脚本中的可重用性和可维护性来帮助管理这种复杂性。在这篇文章中，我们将探索如何使用 Cypress（一种现代的 Web 应用程序端到端测试工具）来实现 POM 框架。

什么是页面对象模型 (POM)？

页面对象模型是一种设计模式，它将网页元素以及类或对象中的交互封装起来。 Web 应用程序的每个页面或组件都由相应的页面对象表示。这种关注点分离使您的测试更清晰、更具可读性并且更易于维护。

使用 POM 的好处

1.可重用性： 通用页面元素和交互定义一次并在多个测试中重用。
2.可维护性： UI 的更改只需要在一处进行更新，减少了维护测试所需的工作量。
3.可读性： 测试变得更具可读性和更容易理解，因为它们专注于测试逻辑而不是底层页面细节。

使用 POM 设置 Cypress

第1步：安装Cypress
首先，确保安装了 Node.js。然后，通过 npm 安装 Cypress：

npm 安装 cypress --save-dev

步骤 2：项目结构
组织您的项目以容纳页面对象。典型的结构可能如下所示：

柏树/
  |__ 固定装置/
  |__ e2e/
      |__ 测试/
          |__ 登录.spec.js
  |__ 插件/
  |__ 支持/
      |__ 命令.js
      |__index.js
      |__ 页面对象/
          |__ LoginPage.js
          |__ HomePage.js

第3步：定义页面对象
为应用程序的每个页面或组件创建一个页面对象。这是 LoginPage 对象的示例：

//cypress/support/pageObjects/LoginPage.js
类登录页面 {
    访问（） {
      cy.visit('/登录');
    }

    填写电子邮件（电子邮件）{
      cy.get('输入[姓名=电子邮件]').type(电子邮件);
    }

    填写密码（密码）{
      cy.get('输入[名称=密码]').type(密码);
    }

    提交（） {
      cy.get('按钮[type=提交]').click();
    }
  }

  导出默认登录页面；

第 4 步：在测试中使用页面对象
现在，在测试中使用页面对象与应用程序交互：

//cypress/e2e/tests/login.spec.js
从“../../support/pageObjects/LoginPage”导入登录页面；

描述（'登录测试'，（）=> {
  const 登录页面 = 新登录页面();

  it('应使用有效凭据登录', () => {
    登录页面.visit();
    loginPage.fillEmail('test@example.com');
    loginPage.fillPassword('密码123');
    登录页面.提交();

    cy.url().should('include', '/dashboard');
  });
});

将 POM 与 Cypress 结合使用的最佳实践

1.封装页面逻辑： 将所有特定于页面的逻辑保留在页面对象内。测试应该只使用页面对象中的方法。
2.避免对选择器进行硬编码： 使用选择器的数据属性使测试对 UI 中的更改更具弹性。
3.模块化常见操作： 在页面对象中为常见操作（例如登录、注销）创建方法，以促进重用并减少重复。
4.使用 Fixtures 进行测试数据： 将测试数据存储在 Fixtures 中，以保持测试代码的整洁和可维护性。

高级技巧

1.命令覆盖： 使用 Cypress.Commands.add 扩展 Cypress 命令以包含简化测试编写的自定义逻辑。
2.并行测试： 利用 Cypress Dashboard 进行并行测试执行，加快测试套件的速度。
3.错误处理： 在页面对象中实现强大的错误处理，使测试更加可靠和信息丰富。

结论

使用 Cypress 实现页面对象模型可以极大地增强测试自动化脚本的可维护性和可读性。通过将特定于页面的逻辑封装在页面对象中，您可以创建更加模块化和可重用的测试代码库。按照本文中概述的步骤和最佳实践开始在您的 Cypress 项目中使用 POM，并释放您的测试自动化工作的全部潜力。