各位靓仔靓女,大家好!我是今天的主讲人,今天咱们要聊聊 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 环节
现在进入提问环节,大家有什么问题可以提出来,我会尽力解答。