深入理解 Cypress/Playwright 等端到端测试工具如何用于 Vue 应用的自动化测试。

各位靓仔靓女,大家好!我是今天的主讲人,今天咱们要聊聊 Vue 应用的自动化测试,以及如何用 Cypress 和 Playwright 这两把“瑞士军刀”来武装我们的测试流程。

开场白:为什么要搞自动化测试?

想象一下,你辛辛苦苦写了一个 Vue 应用,功能丰富,界面炫酷。结果上线没两天,用户开始疯狂吐槽:

  • “按钮点不动!”
  • “页面白屏了!”
  • “数据错乱了!”

你一脸懵逼,赶紧排查,发现是某个不起眼的地方出了问题。 这种场景是不是很熟悉?手动测试虽然能发现一些问题,但效率低,容易遗漏,而且每次迭代都要重新测试一遍,简直让人崩溃。

所以,我们需要自动化测试! 自动化测试可以模拟用户的行为,自动验证应用的功能是否正常,大大提高测试效率,降低 bug 风险。 更重要的是,它可以让你有更多的时间去摸鱼…哦不,是去创造更多价值!

Cypress 和 Playwright:两员猛将

Cypress 和 Playwright 都是非常流行的端到端测试工具,它们有很多相似之处,但也各有特点。 简单来说,它们都是用来模拟用户在浏览器中的操作,比如点击按钮、输入文本、验证页面内容等等。

  • Cypress: 就像一个忠诚的“特工”,潜伏在你的浏览器里,直接控制你的应用。 它使用 JavaScript 编写测试用例,与应用运行在同一个进程中,因此可以访问应用的所有内部状态。 这使得 Cypress 在调试和编写测试用例时非常方便。
  • Playwright: 就像一个强大的“傀儡师”,可以同时控制多个浏览器,模拟各种复杂的场景。 它支持多种编程语言,比如 JavaScript、TypeScript、Python、Java、.NET 等。 Playwright 的跨浏览器支持非常出色,可以轻松地在 Chrome、Firefox、Safari 等浏览器上运行测试。

Cypress 实战:Todo 应用的自动化测试

为了更好地理解 Cypress 的用法,我们来创建一个简单的 Todo 应用,并用 Cypress 编写自动化测试用例。

1. 创建 Vue 应用

首先,我们需要创建一个 Vue 应用。 这里我们使用 Vue CLI 来快速搭建一个项目:

vue create todo-app
cd todo-app

在创建过程中,可以选择默认配置,也可以根据自己的需要进行自定义。

2. 安装 Cypress

接下来,我们需要安装 Cypress:

npm install cypress --save-dev

3. 打开 Cypress 测试运行器

安装完成后,我们可以通过以下命令打开 Cypress 测试运行器:

npx cypress open

Cypress 测试运行器会打开一个窗口,显示项目中的测试文件。

4. 编写测试用例

cypress/integration 目录下创建一个名为 todo.spec.js 的文件,并编写以下测试用例:

describe('Todo 应用', () => {
  beforeEach(() => {
    cy.visit('http://localhost:8080') // 访问应用
  })

  it('可以添加新的 Todo', () => {
    cy.get('.new-todo') // 获取输入框
      .type('学习 Cypress{enter}') // 输入内容并回车

    cy.get('.todo-list li') // 获取 Todo 列表
      .should('have.length', 1) // 验证 Todo 数量
      .contains('学习 Cypress') // 验证 Todo 内容
  })

  it('可以标记 Todo 为已完成', () => {
    cy.get('.todo-list li label') // 获取 Todo 标签
      .contains('学习 Cypress')
      .parent() // 获取父元素
      .find('.toggle') // 找到 checkbox
      .click() // 点击 checkbox

    cy.get('.todo-list li')
      .should('have.class', 'completed') // 验证 Todo 是否已完成
  })

  it('可以删除 Todo', () => {
    cy.get('.todo-list li label')
      .contains('学习 Cypress')
      .parent()
      .find('.destroy') // 找到删除按钮
      .click({ force: true }) // 点击删除按钮 (force: true 强制点击)

    cy.get('.todo-list li').should('not.exist') // 验证 Todo 是否已删除
  })
})

代码解释:

  • describe('Todo 应用', () => { ... }):定义一个测试套件,用于组织相关的测试用例。
  • beforeEach(() => { ... }):在每个测试用例执行之前执行,用于进行一些准备工作,比如访问应用。
  • it('可以添加新的 Todo', () => { ... }):定义一个测试用例,用于验证添加 Todo 的功能。
  • cy.get('.new-todo'):使用 CSS 选择器获取页面上的元素。
  • .type('学习 Cypress{enter}'):在输入框中输入文本并按下回车键。
  • .should('have.length', 1):验证元素的数量是否符合预期。
  • .contains('学习 Cypress'):验证元素是否包含指定的文本。
  • .click():点击元素。
  • { force: true }:强制点击元素,即使元素不可见或被遮挡。

5. 运行测试用例

保存 todo.spec.js 文件后,Cypress 测试运行器会自动运行测试用例。 你可以在测试运行器中看到测试的执行过程和结果。

Playwright 实战:电商网站的自动化测试

接下来,我们来看看如何使用 Playwright 来测试一个电商网站。

1. 安装 Playwright

首先,我们需要安装 Playwright:

npm install -D @playwright/test
npx playwright install

2. 创建测试用例

创建一个名为 e2e.spec.ts 的文件,并编写以下测试用例:

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

test('可以搜索商品', async ({ page }) => {
  await page.goto('https://www.example.com'); // 访问电商网站

  await page.locator('#search-input').fill('手机'); // 输入搜索关键词
  await page.locator('#search-button').click(); // 点击搜索按钮

  await expect(page.locator('.product-list')).toBeVisible(); // 验证商品列表是否可见
  await expect(page.locator('.product-item')).toHaveCountGreaterThan(0); // 验证商品数量是否大于 0
});

test('可以添加到购物车', async ({ page }) => {
  await page.goto('https://www.example.com/product/123'); // 访问商品详情页

  await page.locator('#add-to-cart').click(); // 点击添加到购物车按钮

  await expect(page.locator('#cart-count')).toHaveText('1'); // 验证购物车数量是否为 1
});

代码解释:

  • import { test, expect } from '@playwright/test';:导入 Playwright 的测试 API。
  • test('可以搜索商品', async ({ page }) => { ... }):定义一个测试用例,用于验证搜索商品的功能。
  • await page.goto('https://www.example.com');:访问电商网站。
  • await page.locator('#search-input').fill('手机');:在搜索输入框中输入文本。
  • await page.locator('#search-button').click();:点击搜索按钮。
  • await expect(page.locator('.product-list')).toBeVisible();:验证商品列表是否可见。
  • await expect(page.locator('.product-item')).toHaveCountGreaterThan(0);:验证商品数量是否大于 0。
  • await page.locator('#add-to-cart').click();:点击添加到购物车按钮。
  • await expect(page.locator('#cart-count')).toHaveText('1');:验证购物车数量是否为 1。

3. 运行测试用例

可以使用以下命令运行测试用例:

npx playwright test

Playwright 会自动启动浏览器,执行测试用例,并输出测试结果。

Cypress vs Playwright:选择哪一个?

Cypress 和 Playwright 都是优秀的端到端测试工具,选择哪一个取决于你的具体需求。

特性 Cypress Playwright
语言 JavaScript JavaScript/TypeScript/Python/Java/.NET
浏览器支持 Chrome, Edge, Electron Chrome, Firefox, Safari, Edge
调试 非常方便,可以实时查看应用状态 相对复杂,需要借助调试工具
跨域 处理跨域问题需要一些技巧 默认支持跨域
并行测试 需要付费才能使用并行测试功能 免费支持并行测试
适用场景 小型项目,对调试要求高的项目 大型项目,需要跨浏览器支持的项目

总结:自动化测试,让你的 Vue 应用更靠谱

自动化测试是保证 Vue 应用质量的重要手段。 Cypress 和 Playwright 都是强大的端到端测试工具,可以帮助你快速编写和执行测试用例,提高测试效率,降低 bug 风险。 选择哪一个工具取决于你的具体需求,但无论选择哪一个,都要记住: 自动化测试不是一蹴而就的,需要持续投入和维护。

希望今天的分享对大家有所帮助! 谢谢大家!

Q&A 环节

现在进入提问环节,大家有什么问题可以提出来,我会尽力解答。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注