vue-38（使用 Cypress 进行端到端测试）
使用 Cypress 进行端到端测试
端到端（E2E）测试是确保 Vue.js 应用程序质量和可靠性的关键部分。与专注于独立组件的单元测试不同，E2E 测试模拟用户与应用程序的实时交互，验证系统所有部分是否协同工作正确。本课程将指导你使用 Cypress（一个流行且强大的测试框架）设置和编写 E2E 测试。我们将涵盖安装、基本测试结构、与 Vue 组件交互以及断言预期行为。到本课程结束时，你将具备编写全面 E2E 测试的能力，从而对应用程序的功能提供信心。
端到端测试简介
端到端测试，有时也称为集成测试，验证应用程序从开始到结束的整个流程。它确保应用程序的不同部分（包括前端、后端和数据库）无缝协同工作。
- 现实世界示例 1：电子商务结账： 想象一个电子商务网站。一个端到端测试会模拟用户将商品添加到购物车，进行结账，输入他们的运输和支付信息，并最终下单。该测试会验证订单是否正确处理并存储在数据库中。
- 现实世界示例 2：社交媒体发帖： 考虑一个社交媒体应用。一个端到端测试可以模拟用户登录、创建包含文本和图片的新帖子，并验证该帖子是否正确显示在他们的个人资料和关注者的动态消息中。
- 假设场景： 想象一个银行应用程序。一个端到端测试会模拟用户登录、在不同账户间转账，并验证交易是否正确记录且反映在账户余额中。
设置 Cypress
Cypress 是一个为 Web 构建的现代端到端测试框架。它提供用户友好的界面、强大的调试工具和出色的文档。
安装
首先，您需要在 Vue 项目中将 Cypress 作为开发依赖项进行安装。打开您的终端并运行以下命令：
npm install cypress --save-dev
# OR
yarn add cypress --dev
这个命令会安装 Cypress 并将其添加到你的 devDependencies 中，在 package.json 文件里。
打开 Cypress
安装完成后，你可以通过运行以下命令来打开 Cypress 测试运行器：
npx cypress open
# OR
yarn cypress open
这个命令会启动 Cypress 测试运行器，它提供了一个图形界面用于运行和调试你的测试。第一次打开 Cypress 时，它会在你的项目根目录下创建一个 cypress 文件夹，其结构如下：
cypress/
├── fixtures/ # Static data for tests
├── integration/ # Your test files
├── plugins/ # Configuration for Cypress plugins
├── support/ # Reusable commands and utilities
└── cypress.json # Cypress configuration file
Cypress 配置
cypress.json 文件允许你配置 Cypress 设置。以下是一个配置示例：
{"baseUrl": "http://localhost:8080","integrationFolder": "cypress/integration","screenshotsFolder": "cypress/screenshots","videosFolder": "cypress/videos","supportFile": "cypress/support/index.js","pluginsFile": "cypress/plugins/index.js"
}
baseUrl: 您应用程序的基本 URL。Cypress 将以此作为所有测试的起点。设置此选项允许您在测试中使用相对 URL，使测试更易于阅读和维护。integrationFolder: 您测试文件所在的目录。screenshotsFolder: Cypress 保存失败测试截图的目录。videosFolder: Cypress 保存测试运行视频的目录。supportFile: 支持文件的路径，其中包含可重用的命令和工具。pluginsFile: 插件文件的路径，允许你扩展 Cypress 功能。
你可以修改这些设置以适应你的项目需求。例如，在 CI/CD 环境中运行测试时，你可能需要将 baseUrl 更改为你的生产 URL。
编写第一个 Cypress 测试
让我们创建一个简单的测试来验证您的 Vue 应用是否运行正常。
创建测试文件
在 cypress/integration 文件夹中创建一个名为 example.spec.js 的新文件。将以下代码添加到文件中：
describe('My First Test', () => {it('Visits the app root url', () => {cy.visit('/')cy.contains('h1', 'Welcome')})
})
describe：这个函数用于将相关的测试分组。它接受一个字符串参数，用于描述测试组。it: 这个函数定义了一个单独的测试用例。它接受一个描述测试用例的字符串参数和一个包含测试逻辑的函数。cy.visit('/'): 这个命令告诉 Cypress 访问你的应用程序的根 URL，该 URL 在cypress.json中的baseUrl中定义。cy.contains('h1', 'Welcome'): 这个命令断言页面包含一个<h1>元素，其文本为 “Welcome”。
运行测试
保存 example.spec.js 文件，然后返回 Cypress 测试运行器。你应该能看到你的测试文件被列出。点击文件名来运行测试。Cypress 会打开一个新浏览器窗口并执行测试。如果一切设置正确，测试应该通过。
理解 Cypress 命令
Cypress 提供了一套丰富的命令，用于与应用程序交互和进行断言。以下是一些最常用的命令：
cy.get(selector)：这个命令使用 CSS 选择器选择页面上的元素。cy.contains(selector, text): 该命令选择包含指定文本的元素。cy.click(): 该命令点击一个元素。cy.type(text): 该命令将文本输入到输入框中。cy.clear(): 该命令清除输入框的值。cy.submit(): 这个命令提交一个表单。cy.should(assertion): 这个命令对页面或元素的状态进行断言。
使用 Cypress 测试 Vue 组件
现在，让我们专注于使用 Cypress 测试特定的 Vue 组件。我们将以一个简单的计数器组件为例。
示例计数器组件
假设你有一个 Counter.vue 组件，其中包含以下代码：
<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
export default {data() {return {count: 0}},methods: {increment() {this.count++}}
}
</script>
为计数器组件编写测试
在 Counter.spec.js 文件中创建一个新测试文件，该文件位于 cypress/integration 文件夹。将以下代码添加到文件中：
describe('Counter Component', () => {beforeEach(() => {cy.visit('/') // Assuming your Counter component is rendered on the root page});it('should increment the count when the button is clicked', () => {cy.get('button').click();cy.get('p').should('contain', 'Count: 1');});it('should display the initial count as 0', () => {cy.get('p').should('contain', 'Count: 0');});
});
beforeEach: 该函数在describe块中的每个测试用例之前执行。在此情况下，它访问应用程序的根 URL，以确保Counter组件被渲染。cy.get('button').click(): 该命令选择按钮元素并点击，触发Counter组件中的increment方法。cy.get('p').should('contain', 'Count: 1'): 该命令选择段落元素，并断言其包含文本"Count: 1"，以验证计数已增加。cy.get('p').should('contain', 'Count: 0'): 该命令选择段落元素，并断言其包含文本"计数：0"，以验证初始计数是否正确显示。
高级交互与断言
Cypress 允许你执行更复杂的交互和断言。例如，你可以将命令串联起来，在单个测试用例中执行多个操作。
it('should increment the count multiple times', () => {cy.get('button').click().click().click();cy.get('p').should('contain', 'Count: 3');
});
这个测试用例点击按钮三次，并断言计数增加到 3。
你也可以使用不同类型的断言来验证应用程序的状态。这里有一些示例：
should('have.text', text)：断言元素具有指定的文本内容。should('have.value', value): 断言元素具有指定的值。should('be.visible'): 断言元素是可见的。should('be.enabled'): 断言元素是启用状态。应该('是禁用状态'): 断言该元素是禁用状态。should('have.class', className): 断言元素具有指定的类。
Cypress E2E 测试最佳实践
在用 Cypress 编写 E2E 测试时，请遵循以下最佳实践：
- 编写清晰简洁的测试： 确保您的测试易于理解和维护。为您的测试用例使用描述性名称，并避免不必要的复杂性。
- 隔离你的测试： 每个测试应该是独立的，不应该依赖于其他测试的状态。使用
beforeEach钩子，在每个测试用例之前重置应用程序的状态。 - 使用数据固定装置： 使用数据固定装置为你的测试提供一致和可预测的数据。这使得你的测试更可靠，也更容易调试。
- 避免使用
cy.wait()：cy.wait()应尽量避免使用，因为它会引入任意延迟。相反，应通过断言应用程序的预期状态来使用 Cypress 的内置重试机制。例如，等待元素可见或包含特定文本。 - 使用自定义命令： 创建自定义命令来封装可重用的测试逻辑。这使您的测试更 DRY（不要重复自己）且更易于维护。
- 在真实环境中测试： 在与生产环境密切相似的环境中运行您的测试。这有助于您捕获在开发环境中可能不明显的问题。
- 与 CI/CD 集成： 将您的 E2E 测试与 CI/CD 管道集成，以便在您更改代码时自动运行测试。这有助于您及早发现回归问题，并确保您的应用程序始终处于可工作状态。
Cypress 中的自定义命令
自定义命令允许你扩展 Cypress 的功能并创建可重用的测试逻辑。你可以在 cypress/support/commands.js 文件中定义自定义命令。
自定义命令示例
让我们创建一个用于登录应用程序的自定义命令。假设你有一个登录表单，其 HTML 结构如下：
<form><input type="email" id="email" placeholder="Email"><input type="password" id="password" placeholder="Password"><button type="submit">Login</button>
</form>
您可以在 login 中创建一个自定义命令，如下所示：
Cypress.Commands.add('login', (email, password) => {cy.get('#email').type(email);cy.get('#password').type(password);cy.get('button[type="submit"]').click();
});
现在，您可以在您的测试用例中使用 login 命令：
describe('Login', () => {it('should log in successfully', () => {cy.visit('/login');cy.login('test@example.com', 'password123');cy.contains('Welcome, test@example.com');});
});
这使得您的测试更易于阅读和维护。
Cypress 插件
Cypress 插件允许你扩展 Cypress 的功能并与其他工具集成。你可以在 cypress/plugins/index.js 文件中配置插件。
示例插件：代码覆盖率
一个流行的插件是 cypress-code-coverage，它允许你在 E2E 测试期间收集代码覆盖率信息。
首先，安装插件：
npm install --save-dev @cypress/code-coverage nyc istanbul-lib-coverage istanbul-reports
然后，在 cypress/plugins/index.js 中配置插件：
module.exports = (on, config) => {require('@cypress/code-coverage/plugin')(on, config)return config
}
并在你的 cypress/support/index.js 文件中添加以下内容：
import '@cypress/code-coverage/support'
最后，更新你的 vue.config.js 文件以对代码进行覆盖率分析：
module.exports = {configureWebpack: {devtool: 'eval-source-map',},
}
现在，当你运行 E2E 测试时，Cypress 将收集代码覆盖率信息并生成报告。
调试 Cypress 测试
Cypress 提供了出色的调试工具，可以轻松识别和修复测试中的问题。
- 时间旅行： Cypress 在测试的每一步都会对你的应用程序状态进行快照。你可以使用时间旅行功能回到过去，检查测试过程中任何时间点的应用程序状态。
- 开发者工具： Cypress 与你的浏览器开发者工具集成。你可以使用开发者工具检查 DOM，查看网络请求，并调试 JavaScript 代码。
- 命令日志： Cypress 测试运行器会显示测试过程中执行的所有命令的日志。你可以点击一个命令查看更多关于它的信息，包括被选中的元素和所做的断言。
- 截图和视频： Cypress 会自动对失败的测试进行截图，并记录测试运行的视频。这有助于识别视觉问题或理解导致失败的步骤序列。
通过使用这些调试工具，您可以快速识别并解决 E2E 测试中的问题。
总之，使用 Cypress 进行端到端测试对于确保 Vue.js 应用程序的可靠性至关重要。本课程涵盖了设置 Cypress、编写基本测试、与 Vue 组件交互以及最佳实践。通过遵循这些指南，您可以创建健壮的 E2E 测试，从而对应用程序的功能充满信心。