使用 Cypress 测试 Angular 应用的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是不可避免的重要环节。Cypress 是一个流行的前端自动化测试工具，可以轻松地对应用进行端到端测试。本文将介绍如何使用 Cypress 测试 Angular 应用的最佳实践。

安装 Cypress

首先，需要在本地安装 Cypress。可以通过以下命令安装：

npm install cypress --save-dev

编写测试用例

Cypress 提供了一个强大的测试框架，可以编写功能丰富的测试用例。以下是一个简单的测试用例示例，它测试了应用的登录功能：

-- -------------------- ---- -------
----------------- -- -- -
  ---------- --- -- -------------- -- -- -
    -------------------
    ------------------------------------------------
    ----------------------------------------------
    -----------------------------------
    -------------------------- --------------
  ---
---

在这个测试用例中，我们首先访问了登录页面，然后在输入框中输入了电子邮件地址和密码，并且点击了登录按钮。最后，我们断言了 URL 是否包含了 dashboard 关键字，以确保登录成功。

使用 Cypress 与 Angular 集成

为了在 Cypress 中使用 Angular，需要安装 @cypress/angular plugin。可以通过以下命令安装：

npm install @cypress/angular --save-dev

之后，在 cypress/plugins/index.js 文件中添加以下内容：

const ng = require('@cypress/angular/plugins');

module.exports = (on, config) => {
  ng(on, config);
  return config;
};

这样，Cypress 就可以与 Angular 应用无缝集成。

构建可靠的测试用例

好的测试用例应该是可靠和稳健的。以下是一些最佳实践，可以帮助您编写可靠的测试用例：

1. 使用 data-cy 属性作为选择器

Angular 应用的 HTML 结构可能会经常更改，因此使用 CSS 类或标记名称可能不是很可靠。更好的选择是使用 data-cy 属性作为选择器。

<input type="text" data-cy="email" />
<button data-cy="submit">Submit</button>

在测试用例中，可以使用 cy.get('[data-cy=email]') 选择元素。

2. 避免硬编码 URL

硬编码 URL 是不可靠的，在更改 URL 结构时会导致测试用例失效。更好的方式是使用 Cypress.config('@baseUrl') 获取基本 URL，然后拼接路由路径。

cy.visit(`${Cypress.config('@baseUrl')}/login`);

这样，即使更改了基本 URL，测试用例也不会受到影响。

3. 使用 fixtures 存储测试数据

对于大部分测试用例而言，需要提供先行的数据才能进行测试。为了更好地管理和组织测试数据，可以使用 fixtures 存储测试数据。

cy.fixture('users').then((users) => {
  const user = users[0];
  cy.get('[data-cy=email]').type(user.email);
  cy.get('[data-cy=password]').type(user.password);
});

4. 不要使用 sleep 函数

使用 sleep 函数会导致测试用例变得不可预测。更好的方式是使用 Cypress 的事件监听来等待指定事件发生。

cy.get('[data-cy=submit]').click();
cy.window().its('sessionStorage.loggedIn').should('be.true');

在这个例子中，我们使用了 cy.window().its('sessionStorage.loggedIn') 等待 sessionStorage 的 loggedIn 属性变为 true。

结论

Cypress 是一个强大的前端自动化测试工具，可以让我们轻松地对 Angular 应用进行端到端测试。遵循最佳实践，可以帮助我们编写更加可靠和稳健的测试用例，并提高测试覆盖率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66ed9fc1bc9e1890c5e24081