使用 Cypress 进行 E2E 测试教您如何使用 Cypress 执行端到端 (E2E) 测试是 JavaScript 中最流行的自动化测试工具之一，特别是对于 Web 应用程序。我将详细解释所有概念和步骤。
端到端测试 (E2E) 是自动化测试，用于验证应用程序从开始到结束的完整行为，模拟用户与界面的交互。这些测试很重要，因为它们验证应用程序的所有部分在真实环境中是否按预期正常工作。
Cypress 是一个用于 Web 应用程序自动化测试的工具。它被设计为易于使用、功能强大且快速。它允许您编写与应用程序的用户界面交互的测试，就像用户一样，单击按钮、填写表单、验证文本等等。
Cypress 的一些重要特性：
Cypress是一款Web应用的自动化测试工具，主要用于E2E测试。它旨在直接与浏览器中的应用程序代码交互，使测试更加高效。
要开始使用 Cypress，您需要将其安装到您的项目中。这是安装命令：
npm install cypress --save-dev
这会将 Cypress 安装为项目中的开发依赖项。
安装Cypress后，您可以在终端中使用以下命令打开它：
npm install cypress --save-dev
这将打开 Cypress Test Runner，您可以在其中看到浏览器中运行的测试。它还会在您的项目中创建一个 cypress 文件夹，其中存储所有测试和配置。
在 Cypress（和 Jest）中，我们使用 describe 对属于同一套件或模块的多个测试进行分组。这有助于以更结构化的方式组织测试。
npx cypress open
在上面的例子中：
it 函数用于定义各个测试用例。每个测试用例必须是独立的并代表应用程序的特定功能或行为。
cy.get 函数用于选择要在测试中交互的页面元素。
示例：
describe('Teste de Login', () => {
it('Deve realizar o login com sucesso', () => {
cy.visit('https://exemplo.com/login');
cy.get('input[name="username"]').type('usuario');
cy.get('input[name="password"]').type('senha123');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
});
});
这里，cy.get 搜索 name="username" 的输入和 type="submit" 的提交按钮，然后执行 type 和 点击。
您可以使用 VSCode 编辑测试并利用 Cypress 自动完成功能，这可以通过在您键入时建议方法和命令来轻松正确编写测试。
Cypress 允许您使用更复杂的 CSS 选择器根据页面层次结构选择元素。例如，您可以选择具有特定类的 div 内的按钮：
cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();
过滤测试的一个示例是检查应用过滤器时项目列表是否正确更新。 Cypress 允许您轻松执行此类测试，与过滤器交互并检查结果。
cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica
beforeEach 函数对于在每次测试之前配置应用程序状态非常有用。当您需要在运行测试之前确保应用程序处于初始状态时，这一点尤其重要。
npm install cypress --save-dev
Cypress 使用 Promise 来管理异步时间，但它会自动处理这些 Promise，从而使测试变得更简单。在许多情况下没有必要使用await或.then()，因为Cypress在内部处理这个问题。
保持测试的组织性和可重用性至关重要。您可以创建辅助函数并重用代码片段。
示例：
npx cypress open
describe('Teste de Login', () => {
it('Deve realizar o login com sucesso', () => {
cy.visit('https://exemplo.com/login');
cy.get('input[name="username"]').type('usuario');
cy.get('input[name="password"]').type('senha123');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
});
});
生成报告：Cypress 允许您生成测试执行报告，这使得分析结果变得更加容易。
Cypress Run：要在无头模式（没有图形界面）下运行测试，请使用以下命令：
cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();
cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica
Mock Service Worker 是一个允许您在测试中拦截 HTTP 请求的工具。它可以与 Cypress 一起使用来模拟请求并控制响应。
cy.get('.filter').select('Option 1');
cy.get('.item-list').should('have.length', 5);
然后您可以配置网络处理程序来拦截请求。
在第 34 单元中，您学习了如何使用 Cypress 对您的应用程序执行 E2E 测试，确保其在实际使用情况下正常工作。您学习了如何配置 Cypress、编写测试、与页面元素交互以及使用 beforeEach、cy.get、屏幕截图、报告等功能。这些测试对于确保您的应用程序正常工作并且不会引入新的错误至关重要。
以上是Ecom 赛普拉斯测试的详细内容。更多信息请关注PHP中文网其他相关文章！
