深入分析 Cypress/Playwright 等端到端测试工具如何与 Vue 应用进行集成，并进行自动化测试。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，晚上好！今天咱们来聊聊前端测试界的两大扛把子——Cypress 和 Playwright，以及它们是如何跟咱们心爱的 Vue 应用搞基，哦不，是集成，然后进行自动化测试的。

开场白：前端测试，痛并快乐着

话说前端开发，那真是日新月异，框架层出不穷。咱们 Vue.js 以其简洁、灵活的特性，俘获了不少开发者的芳心。但是啊，代码写得爽，测试火葬场。手动测试那简直是噩梦，效率低不说，还容易漏掉边边角角。所以，自动化测试才是王道！

Cypress 和 Playwright，这两位都是端到端测试界的明星，它们能模拟用户行为，验证咱们 Vue 应用的各种功能。今天，咱们就深入探讨一下，如何把它们请到咱们的项目里来，让它们替咱们干活。

第一部分：Cypress 与 Vue 的爱恨情仇

Cypress，这哥们儿最大的特点就是“丝滑”。它直接在浏览器里运行测试，能实时看到测试结果，调试起来非常方便。

1.1 安装 Cypress

首先，咱们得把 Cypress 安装到 Vue 项目里。打开你的终端，输入：

npm install cypress --save-dev
# 或者
yarn add cypress --dev

安装完成后，你会发现 package.json 文件里多了个 cypress 依赖。

1.2 配置 Cypress

接下来，打开终端，运行：

npx cypress open

这会打开 Cypress 的图形界面，并且会在你的项目根目录下生成一个 cypress 文件夹。这个文件夹就是 Cypress 的大本营，里面包含了各种配置文件、测试用例等等。

1.3 编写第一个 Cypress 测试用例

在 cypress/integration 目录下，创建一个名为 example.spec.js 的文件，然后往里面塞点代码：

describe('Vue App', () => {
  it('Visits the app root url', () => {
    cy.visit('/') // 访问根路径
    cy.contains('h1', 'Welcome to Your Vue.js App') // 检查页面是否包含标题
  })

  it('Checks if button exists', () => {
    cy.visit('/')
    cy.get('button').should('exist') // 检查按钮是否存在
  })

  it('Clicks the button and checks the message', () => {
    cy.visit('/')
    cy.get('button').click() // 点击按钮
    cy.contains('p', 'You clicked the button!') // 检查点击后是否显示了特定信息
  })
})

这段代码做了三件事：

cy.visit('/'): 访问应用的根路径。
cy.contains('h1', 'Welcome to Your Vue.js App'): 查找包含 "Welcome to Your Vue.js App" 文本的 h1 元素，并断言它存在。
cy.get('button').click(): 查找 button 元素并点击它。
cy.contains('p', 'You clicked the button!'): 查找包含 "You clicked the button!" 文本的 p 元素，并断言它存在。

1.4 运行 Cypress 测试

回到 Cypress 的图形界面，点击 example.spec.js 文件，Cypress 就会自动运行测试用例。你可以在浏览器里实时看到测试过程，以及测试结果。

1.5 Cypress 的高级用法

Cypress 提供了丰富的 API，可以模拟各种用户行为，例如：

cy.get(): 获取元素。
cy.type(): 输入文本。
cy.click(): 点击元素。
cy.submit(): 提交表单。
cy.select(): 选择下拉框选项。
cy.check(): 选中复选框。
cy.uncheck(): 取消选中复选框。
cy.scrollTo(): 滚动页面。
cy.trigger(): 触发事件。
cy.request(): 发送 HTTP 请求。
cy.intercept(): 拦截 HTTP 请求。

表格：Cypress 常用命令

命令	描述
`cy.visit()`	访问指定 URL。
`cy.get()`	获取一个或多个 DOM 元素。
`cy.contains()`	获取包含指定文本的 DOM 元素。
`cy.click()`	点击 DOM 元素。
`cy.type()`	在 DOM 元素中输入文本。
`cy.submit()`	提交表单。
`cy.request()`	发送 HTTP 请求。可以用来测试 API。
`cy.intercept()`	拦截 HTTP 请求。常用于模拟 API 响应，在测试时避免依赖真实后端服务。
`cy.should()`	断言。用于验证 DOM 元素的状态或属性，例如 `cy.get('button').should('be.visible')` 检查按钮是否可见。也可以用来验证文本内容 `cy.get('p').should('contain', 'Hello')`。

第二部分：Playwright 与 Vue 的激情碰撞

Playwright，这小伙儿最大的特点就是“快”。它支持多种浏览器，并且可以并行运行测试，速度杠杠的。

2.1 安装 Playwright

跟 Cypress 类似，咱们也得先把 Playwright 安装到 Vue 项目里。打开你的终端，输入：

npm install -D @playwright/test
# 或者
yarn add -D @playwright/test

安装完成后，你会发现 package.json 文件里多了个 @playwright/test 依赖。

2.2 配置 Playwright

Playwright 需要安装浏览器驱动。运行以下命令：

npx playwright install

这会自动下载 Chromium, Firefox 和 WebKit 的浏览器驱动。当然也可以选择只安装特定的浏览器：

npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

2.3 编写第一个 Playwright 测试用例

在你的项目根目录下创建一个 tests 文件夹，然后在 tests 文件夹里创建一个名为 example.spec.ts 的文件，然后往里面塞点代码：

import { test, expect } from '@playwright/test';

test('Visits the app root url', async ({ page }) => {
  await page.goto('/'); // 访问根路径
  await expect(page.locator('h1')).toContainText('Welcome to Your Vue.js App'); // 检查页面是否包含标题
});

test('Checks if button exists', async ({ page }) => {
    await page.goto('/');
    const button = await page.locator('button');
    await expect(button).toBeVisible(); // 检查按钮是否存在
});

test('Clicks the button and checks the message', async ({ page }) => {
  await page.goto('/');
  await page.locator('button').click(); // 点击按钮
  await expect(page.locator('p')).toContainText('You clicked the button!'); // 检查点击后是否显示了特定信息
});

这段代码跟 Cypress 的代码很像，也是做了三件事：

await page.goto('/'): 访问应用的根路径。
await expect(page.locator('h1')).toContainText('Welcome to Your Vue.js App'): 查找 h1 元素，并断言它包含 "Welcome to Your Vue.js App" 文本。
await page.locator('button').click(): 查找 button 元素并点击它。
await expect(page.locator('p')).toContainText('You clicked the button!'): 查找 p 元素，并断言它包含 "You clicked the button!" 文本。

2.4 运行 Playwright 测试

打开终端，运行：

npx playwright test

Playwright 就会自动运行测试用例。你可以在终端里看到测试结果。

2.5 Playwright 的高级用法

Playwright 也提供了丰富的 API，可以模拟各种用户行为，例如：

page.goto(): 访问 URL。
page.locator(): 定位元素。
page.click(): 点击元素。
page.type(): 输入文本。
page.fill(): 填充输入框。
page.selectOption(): 选择下拉框选项。
page.check(): 选中复选框。
page.uncheck(): 取消选中复选框。
page.hover(): 悬停在元素上。
page.press(): 模拟键盘按键。
page.waitForSelector(): 等待元素出现。
page.route(): 拦截网络请求。
page.evaluate(): 在浏览器上下文中执行 JavaScript 代码。

表格：Playwright 常用 API

API	描述
`page.goto()`	导航到指定的 URL。
`page.locator()`	获取页面上的元素，可以使用 CSS 选择器、XPath 等多种方式。
`page.click()`	点击页面上的元素。
`page.type()`	在页面上的输入框中输入文本。
`page.fill()`	填充输入框，通常比 `page.type()` 更快。
`page.selectOption()`	选择下拉框选项。
`page.check()`	选中复选框或单选框。
`page.uncheck()`	取消选中复选框。
`page.hover()`	悬停在元素上。
`page.press()`	模拟键盘按键，例如 `page.press('Enter')`。
`page.waitForSelector()`	等待页面上出现指定的元素。
`page.route()`	拦截和修改网络请求。可以用来模拟 API 响应，或者阻止某些请求。
`page.evaluate()`	在浏览器上下文中执行 JavaScript 代码。可以用来获取页面的状态，或者执行一些复杂的操作。

第三部分：Cypress vs Playwright，谁更胜一筹？

Cypress 和 Playwright 都是优秀的端到端测试工具，各有优缺点。

特性	Cypress	Playwright
架构	在浏览器中运行，直接操作 DOM。	独立进程运行，通过协议与浏览器通信。
浏览器支持	仅支持 Chromium 系列浏览器 (Chrome, Edge, Electron) , Firefox 和 Safari 通过实验性支持。	支持 Chromium, Firefox, WebKit (Safari) 等主流浏览器。
速度	较慢，因为需要实时操作 DOM。	更快，可以并行运行测试。
调试	非常方便，可以在浏览器里实时看到测试过程。	调试相对复杂，需要使用 Playwright Inspector 或者浏览器开发者工具。
API	简单易用，学习曲线平缓。	API 更加强大，功能更丰富。
适用场景	适合小型项目，或者需要频繁调试的场景。	适合大型项目，或者需要跨浏览器测试的场景。
社区支持	活跃，文档完善。	活跃，文档完善。
自动等待	内置自动等待机制，无需手动添加等待时间。	需要手动添加等待时间，或者使用 `waitForSelector` 等 API。
网络请求拦截	支持，但功能相对简单。	支持，功能强大，可以模拟各种网络场景。

总结：选择适合你的工具

Cypress 和 Playwright 都是优秀的端到端测试工具，选择哪个取决于你的项目需求和个人偏好。

如果你需要快速上手，并且喜欢在浏览器里实时调试，那么 Cypress 是个不错的选择。
如果你需要跨浏览器测试，并且对速度有较高要求，那么 Playwright 更加适合你。

无论选择哪个，自动化测试都是前端开发的必备技能。希望今天的分享能帮助大家更好地掌握 Cypress 和 Playwright，让咱们的 Vue 应用更加健壮！

最后，记住一句真理：代码一时爽，测试一直爽！

发表回复 取消回复

发表回复取消回复