使用 cypress 进行 e2e 测试教您如何使用 cypress（最流行的自动化工具之一）执行端到端 (e2e) 测试使用 JavaScript 进行测试，尤其是 web 应用程序。我将详细解释所有概念和步骤。
什么是端到端测试？
端到端测试 (e2e) 是自动化测试，用于验证应用程序从开始到结束的完整行为，模拟用户与界面的交互。这些测试很重要，因为它们验证应用程序的所有部分在真实环境中是否按预期正常工作。
赛普拉斯：它是什么以及它如何工作？
cypress 是一个用于 web 应用程序自动化测试的工具。它被设计为易于使用、功能强大且快速。它允许您编写与应用程序的用户界面交互的测试，就像用户一样，单击按钮、填写表单、验证文本等等。
cypress 的一些重要特性：
- 实时测试：它在浏览器本身中运行测试，允许您实时查看正在运行的测试。
- 易于设置：无需复杂的设置即可开始。
- 快速执行：由于cypress在浏览器中运行，因此与其他e2e测试工具相比，测试执行速度更快。
- ci/cd 集成：它可以轻松与 ci/cd 管道集成以实现测试自动化。
模块 34 演练
1.概念化 cypress 工具
cypress是一款web应用的自动化测试工具，主要用于e2e测试。它旨在直接与浏览器中的应用程序代码交互，使测试更加高效。
2.在机器上安装 cypress
要开始使用 cypress，您需要将其安装到您的项目中。这是安装命令：
npm install cypress --save-dev
这会将 cypress 安装为项目中的开发依赖项。
3.启动赛普拉斯
安装cypress后，您可以在终端中使用以下命令打开它：
npx cypress open
这将打开 cypress test runner，您可以在其中看到浏览器中运行的测试。它还会在您的项目中创建一个 cypress 文件夹，其中存储所有测试和配置。
4.使用描述函数对测试进行分组
在 cypress（和 jest）中，我们使用 describe 对属于同一套件或模块的多个测试进行分组。这有助于以更结构化的方式组织测试。
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'); }); });
在上面的例子中：
- describe 用于对登录相关的测试进行分组。
- 它定义了组内的特定测试。其内部接下来是执行验证的代码（测试步骤）。
5.使用 it 函数
it 函数用于定义各个测试用例。每个测试用例必须是独立的并代表应用程序的特定功能或行为。
6.使用 cy.get 函数检索元素
cy.get 函数用于选择要在测试中交互的页面元素。
示例：
cy.get('input[name="username"]').type('usuario'); cy.get('button[type="submit"]').click();
这里，cy.get 搜索 name=”username” 的输入和 type=”submit” 的提交按钮，然后执行 type 和 点击。
7. vscode 和自动完成简介
您可以使用 vscode 编辑测试并利用 cypress 自动完成功能，这可以通过在您键入时建议方法和命令来轻松正确编写测试。
8.使用层次关系
cypress 允许您使用更复杂的 css 选择器根据页面层次结构选择元素。例如，您可以选择具有特定类的 div 内的按钮：
cy.get('.modal').find('button').click(); // encontra o botão dentro de .modal e clica
9.构建过滤测试
过滤测试的一个示例是检查应用过滤器时项目列表是否正确更新。 cypress 允许您轻松执行此类测试，与过滤器交互并检查结果。
cy.get('.filter').select('option 1'); cy.get('.item-list').should('have.length', 5);
10。使用 beforeeach 函数
beforeeach 函数对于在每次测试之前配置应用程序的状态非常有用。当您需要在运行测试之前确保应用程序处于初始状态时，这一点尤其重要。
beforeeach(() => { cy.visit('https://exemplo.com'); });
11。了解 cypress 返回类型
cypress 使用 promise 来管理异步时间，但它会自动处理这些 promise，从而使测试变得更简单。在许多情况下没有必要使用await或.then()，因为cypress在内部处理这个问题。
12。组织代码以减少行数
保持测试的组织性和可重用性至关重要。您可以创建辅助函数并重用代码片段。
示例：
function login(username, password) { cy.get('input[name="username"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button[type="submit"]').click(); } describe('teste de login', () => { it('deve fazer login com sucesso', () => { login('usuario', 'senha123'); cy.url().should('include', '/dashboard'); }); });
13。了解 cypress 的其他功能
- 截屏：cypress 可以在测试过程中自动截屏。这可以帮助您直观地了解测试失败时发生的情况。
cy.screenshot();
-
生成报告：cypress 允许您生成测试执行报告，这使得分析结果变得更加容易。
-
cypress run：要在无头模式（没有图形界面）下运行测试，请使用以下命令：
npx cypress run
- http 请求模拟：您可以使用 cypress 模拟服务器响应，而无需进行实际调用。这对于使用特定数据测试场景非常有用。
cy.intercept('get', '/api/usuarios', { fixture: 'usuarios.json' }).as('getusuarios');
14。模拟 service worker (msw) 安装
mock service worker 是一个允许您在测试中拦截 http 请求的工具。它可以与 cypress 一起使用来模拟请求并控制响应。
npm install msw
然后您可以配置网络处理程序来拦截请求。
结论
在第 34 单元中，您学习了如何使用 cypress 对您的应用程序执行 e2e 测试，确保其在实际使用情况下正常工作。您学习了如何配置 cypress、编写测试、与页面元素交互以及使用 beforeeach、cy.get、屏幕截图、报告等功能。这些测试对于确保您的应用程序正常工作并且不会引入新的错误至关重要。
