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

各位观众老爷们，大家好！我是你们的老朋友，bug终结者，今天咱们来聊聊Vue应用如何跟Cypress和Playwright这两位测试界的大佬“喜结连理”，实现自动化测试的幸福生活。

咱们今天的目标是：让你的Vue应用在自动化测试的保护下，告别线上崩溃的噩梦，走向稳定可靠的康庄大道！

1. 自动化测试的重要性：别等到火烧眉毛才想起消防员

首先，我们得明白为啥要搞自动化测试。手动测试当然可以，但你想想：

重复性工作： 每次改动都要点点点，烦不烦？
容易出错： 人总有累的时候，漏测怎么办？
效率低下： 手动测试速度慢，影响上线进度。

自动化测试就像给你的代码穿上了一层铠甲，能够：

快速反馈： 一旦代码有问题，立刻报警。
覆盖全面： 模拟用户操作，覆盖各种场景。
节省时间： 把测试时间省下来，去摸鱼！

所以，自动化测试不是可选项，而是必选项！

2. Cypress：前端测试界的“小清新”

Cypress是一个专门为前端打造的端到端测试工具，它的特点是：

简单易用： API简洁明了，上手快。
时间旅行： 可以回溯测试过程，方便debug。
实时重载： 修改测试代码，立刻生效。
强大的Debug工具： 提供丰富的调试信息。

2.1 Cypress与Vue集成：手牵手，一起走

安装Cypress：

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

打开Cypress：
```
npx cypress open
#或者
yarn cypress open
```
这会打开Cypress的图形界面，里面有一些示例测试，我们可以先跑一下，感受一下Cypress的魅力。
编写第一个测试用例：

在cypress/integration目录下新建一个example.spec.js文件，写入以下代码：
```
describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // Should be on a new URL which includes '/commands/actions'
    cy.url().should('include', '/commands/actions')

    // Get an input, type into it and verify that the value has been updated
    cy.get('.action-email')
      .type('[email protected]')
      .should('have.value', '[email protected]')
  })
})
```
这段代码做了什么？
- describe：定义一个测试套件，可以理解为一组相关的测试用例。
- it：定义一个测试用例，描述一个具体的测试场景。
- cy.visit：访问一个URL，相当于在浏览器里输入地址。
- cy.contains：查找包含特定文本的元素，并点击它。
- cy.url：获取当前URL，并进行断言。
- cy.get：根据CSS选择器查找元素。
- cy.type：在输入框中输入内容。
- cy.should：断言，判断某个条件是否成立。
测试你的Vue应用：

假设你的Vue应用运行在http://localhost:8080，我们可以修改上面的测试用例，访问你的应用：
```
describe('My Vue App Test', () => {
  it('Visits the Vue App and checks the title', () => {
    cy.visit('http://localhost:8080')

    cy.title().should('eq', 'My Vue App') // 假设你的Vue应用的title是"My Vue App"
  })
})
```
跑一下这个测试，看看Cypress能不能成功访问你的Vue应用，并检查title是否正确。

2.2 Cypress常用命令：十八般武艺，样样精通

Cypress提供了丰富的命令，可以模拟各种用户操作，下面列举一些常用的：

命令	作用	示例
`cy.visit()`	访问一个URL	`cy.visit('http://localhost:8080')`
`cy.get()`	根据CSS选择器查找元素	`cy.get('.my-button')`
`cy.contains()`	查找包含特定文本的元素	`cy.contains('Submit')`
`cy.click()`	点击元素	`cy.get('.my-button').click()`
`cy.type()`	在输入框中输入内容	`cy.get('#email').type('[email protected]')`
`cy.clear()`	清空输入框	`cy.get('#email').clear()`
`cy.select()`	选择下拉框选项	`cy.get('#country').select('China')`
`cy.check()`	选中复选框	`cy.get('#agree').check()`
`cy.uncheck()`	取消选中复选框	`cy.get('#agree').uncheck()`
`cy.trigger()`	触发事件	`cy.get('.my-button').trigger('mouseover')`
`cy.request()`	发送HTTP请求	`cy.request('http://localhost:8080/api/users')`
`cy.wait()`	等待一段时间/等待一个请求完成	`cy.wait(1000)` / `cy.wait('@getUsers')`
`cy.should()`	断言，判断某个条件是否成立	`cy.get('.my-button').should('be.visible')` / `cy.url().should('include', '/users')`

这些命令可以组合使用，模拟各种复杂的场景。例如，我们可以测试一个登录流程：

it('Logs in successfully', () => {
  cy.visit('http://localhost:8080/login')

  cy.get('#username').type('testuser')
  cy.get('#password').type('password123')
  cy.get('button[type="submit"]').click()

  cy.url().should('include', '/dashboard')
  cy.contains('Welcome, testuser').should('be.visible')
})

这段代码模拟了用户输入用户名、密码，点击登录按钮，然后验证是否成功跳转到dashboard页面，并显示欢迎信息。

2.3 Cypress最佳实践：让测试更上一层楼

使用data-cy属性： 为了避免CSS选择器不稳定，可以使用data-cy属性来标记元素，这样即使页面样式改变，测试也能正常运行。
```
<button data-cy="submit-button">Submit</button>
```
```
cy.get('[data-cy="submit-button"]').click()
```
使用cy.intercept() mock API： 在端到端测试中，我们通常不需要真的调用后端API，可以使用cy.intercept()来mock API的响应，提高测试速度和稳定性。
```
cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')

cy.visit('http://localhost:8080/users')

cy.wait('@getUsers') // 等待API请求完成
```
这段代码mock了/api/users接口，返回cypress/fixtures/users.json文件中的数据。

编写可维护的测试代码： 将测试代码分解成小的、可重用的函数，避免重复代码。

function login(username, password) {
  cy.visit('http://localhost:8080/login')
  cy.get('#username').type(username)
  cy.get('#password').type(password)
  cy.get('button[type="submit"]').click()
}

it('Logs in with valid credentials', () => {
  login('testuser', 'password123')
  cy.url().should('include', '/dashboard')
})

it('Logs in with invalid credentials', () => {
  login('testuser', 'wrongpassword')
  cy.contains('Invalid username or password').should('be.visible')
})

使用CI/CD集成： 将Cypress集成到CI/CD流程中，每次代码提交都自动运行测试，确保代码质量。

3. Playwright：全能选手，跨浏览器测试一把好手

Playwright是微软推出的一个端到端测试工具，它的特点是：

跨浏览器支持： 支持Chrome、Firefox、Safari、Edge等主流浏览器。
自动等待： 自动等待元素加载完成，避免手动等待。
强大的调试工具： 提供录制功能，可以自动生成测试代码。
性能优秀： 并行执行测试，速度快。

3.1 Playwright与Vue集成：强强联合，所向披靡

安装Playwright：

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

初始化Playwright：
```
npx playwright install
#或者
yarn playwright install
```
这会安装Playwright需要的浏览器。

编写第一个测试用例：

在tests目录下新建一个example.spec.ts文件，写入以下代码：

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects the URL to contain intro.
  await expect(page).toHaveURL(/.*intro/);
});

这段代码做了什么？

test：定义一个测试用例。
expect：断言，判断某个条件是否成立。
page.goto：访问一个URL。
page.getByRole：根据ARIA role查找元素。
page.toHaveTitle：断言页面的title是否包含特定文本。
page.toHaveURL：断言页面的URL是否包含特定文本。

测试你的Vue应用：

假设你的Vue应用运行在http://localhost:8080，我们可以修改上面的测试用例，访问你的应用：

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

test('Visits the Vue App and checks the title', async ({ page }) => {
  await page.goto('http://localhost:8080');

  await expect(page).toHaveTitle(/My Vue App/); // 假设你的Vue应用的title是"My Vue App"
});

跑一下这个测试，看看Playwright能不能成功访问你的Vue应用，并检查title是否正确。

运行测试：

npx playwright test
#或者
yarn playwright test

3.2 Playwright常用命令：十八般武艺升级版，更上一层楼

Playwright提供了比Cypress更丰富的命令，可以模拟各种用户操作，下面列举一些常用的：

命令	作用	示例
`page.goto()`	访问一个URL	`await page.goto('http://localhost:8080')`
`page.locator()`	根据CSS选择器/XPath查找元素	`await page.locator('.my-button')` / `await page.locator('//button[@type="submit"]')`
`page.getByRole()`	根据ARIA role查找元素	`await page.getByRole('button', { name: 'Submit' })`
`page.getByText()`	查找包含特定文本的元素	`await page.getByText('Submit')`
`page.click()`	点击元素	`await page.locator('.my-button').click()`
`page.type()`	在输入框中输入内容	`await page.locator('#email').type('[email protected]')`
`page.fill()`	填充输入框，比type更智能	`await page.locator('#email').fill('[email protected]')`
`page.selectOption()`	选择下拉框选项	`await page.locator('#country').selectOption('China')`
`page.check()`	选中复选框	`await page.locator('#agree').check()`
`page.uncheck()`	取消选中复选框	`await page.locator('#agree').uncheck()`
`page.hover()`	鼠标悬停在元素上	`await page.locator('.my-button').hover()`
`page.evaluate()`	在浏览器上下文中执行JavaScript代码	`await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))`
`page.waitForSelector()`	等待元素出现	`await page.waitForSelector('.my-button')`
`page.waitForResponse()`	等待HTTP响应	`await page.waitForResponse('**/api/users')`
`expect(page).toHaveTitle()`	断言页面的title是否包含特定文本	`await expect(page).toHaveTitle(/My Vue App/)`
`expect(page).toHaveURL()`	断言页面的URL是否包含特定文本	`await expect(page).toHaveURL(/.*users/)`
`expect(locator).toBeVisible()`	断言元素是否可见	`await expect(page.locator('.my-button')).toBeVisible()`

这些命令同样可以组合使用，模拟各种复杂的场景。例如，我们可以测试一个登录流程：

test('Logs in successfully', async ({ page }) => {
  await page.goto('http://localhost:8080/login');

  await page.locator('#username').fill('testuser');
  await page.locator('#password').fill('password123');
  await page.locator('button[type="submit"]').click();

  await expect(page).toHaveURL(/.*dashboard/);
  await expect(page.getByText('Welcome, testuser')).toBeVisible();
});

这段代码模拟了用户输入用户名、密码，点击登录按钮，然后验证是否成功跳转到dashboard页面，并显示欢迎信息。

3.3 Playwright最佳实践：更上一层楼，更上一层楼

使用page.getByRole()： 尽可能使用page.getByRole()来查找元素，因为它更符合WAI-ARIA标准，对可访问性更好。
```
<button aria-label="Submit">Submit</button>
```
```
await page.getByRole('button', { name: 'Submit' }).click();
```

使用page.route() mock API： 可以使用page.route()来mock API的响应，提高测试速度和稳定性。

await page.route('**/api/users', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify([{ id: 1, name: 'John Doe' }]),
  });
});

await page.goto('http://localhost:8080/users');

这段代码mock了/api/users接口，返回一个包含John Doe用户的JSON数据。

使用Playwright Inspector： Playwright Inspector是一个强大的调试工具，可以录制用户操作，生成测试代码，还可以查看页面DOM结构，方便调试。
```
npx playwright codegen http://localhost:8080
#或者
yarn playwright codegen http://localhost:8080
```
使用CI/CD集成： 将Playwright集成到CI/CD流程中，每次代码提交都自动运行测试，确保代码质量。

4. Cypress vs Playwright：选哪个？成年人的世界不做选择，都要！

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

特性	Cypress	Playwright
易用性	简单易用，上手快	相对复杂，但文档完善
跨浏览器支持	只支持Chrome-based浏览器（通过插件支持Firefox和Edge，但不如原生支持）	原生支持Chrome、Firefox、Safari、Edge等主流浏览器
Debug工具	强大的时间旅行功能	Playwright Inspector，可以录制和调试测试
API Mock	`cy.intercept()`	`page.route()`
自动等待	有，但不如Playwright智能	自动等待元素加载完成
性能	相对较慢	性能优秀，可以并行执行测试
社区	活跃	活跃
适用场景	小型项目，对跨浏览器要求不高，注重开发效率	大型项目，需要跨浏览器测试，注重性能

我的建议：

如果你的项目比较小，对跨浏览器要求不高，并且希望快速上手，可以选择Cypress。
如果你的项目比较大，需要跨浏览器测试，并且注重性能，可以选择Playwright。
如果你的项目比较重要，并且预算充足，可以两者都用，互相补充，确保测试覆盖率。

5. 总结：自动化测试，让你的Vue应用更上一层楼

今天我们一起学习了如何将Cypress和Playwright集成到Vue应用中，进行自动化测试。希望通过今天的学习，你能够掌握自动化测试的基本知识，并将其应用到你的项目中，让你的Vue应用更加稳定可靠。

记住，自动化测试不是一次性的工作，而是一个持续的过程。我们需要不断地完善测试用例，覆盖更多的场景，才能真正发挥自动化测试的作用。

最后，祝大家早日告别bug，走向人生巅峰！感谢大家的观看，我们下期再见！