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

各位观众老爷们，晚上好！今天咱们不开车，来聊聊怎么给Vue应用做个全身SPA，让它舒舒服服地接受端到端（E2E）测试的洗礼。

咱们的主角是Vue，一个前端小可爱，但没有强健的体魄，在复杂的页面交互面前也容易抽筋。而Cypress和Playwright，就是咱们请来的两位按摩师，专门给Vue做E2E。

为什么要给Vue做E2E？

想象一下，你辛辛苦苦写了个登录功能，本地跑得飞起，部署到线上，用户一顿操作猛如虎，结果卡在登录界面动不了了。这感觉，是不是像吃了苍蝇一样？

E2E测试就像真实用户一样操作你的应用，模拟用户点击按钮、填写表单、滚动页面等行为，确保你的应用在各种场景下都能正常工作。它可以发现集成测试和单元测试无法发现的问题，比如：

组件之间的交互错误
前端和后端的数据交互问题
第三方库的兼容性问题
各种浏览器的兼容性问题

Cypress：Vue的贴心小棉袄

Cypress就像一个Vue应用的贴心小棉袄，它天生就和前端关系密切，调试方便，出错信息清晰。

1. 安装Cypress

首先，你需要把Cypress请到你的Vue项目中：

npm install cypress --save-dev
# or
yarn add cypress --dev

2. 启动Cypress

安装完成后，运行Cypress：

npx cypress open
# or
yarn cypress open

Cypress会打开一个图形界面，里面有很多示例测试，你可以先跑一遍，感受一下。

3. 编写你的第一个Cypress测试

在cypress/integration目录下创建一个新的测试文件，例如example.spec.js。

describe('Vue App', () => {
  it('访问首页', () => {
    cy.visit('/')
    cy.contains('Hello Vue!') // 假设你的首页包含Hello Vue!
  })

  it('点击按钮', () => {
    cy.visit('/')
    cy.get('button').click() // 假设你有一个按钮
    cy.contains('Clicked!') // 假设点击按钮后显示Clicked!
  })

  it('输入表单', () => {
    cy.visit('/')
    cy.get('input[type="text"]').type('Cypress Test')
    cy.get('button').click()
    cy.contains('Cypress Test') // 假设点击按钮后显示输入的内容
  })
})

代码解释：

describe：定义一个测试套件，可以包含多个测试用例。
it：定义一个测试用例，描述一个具体的测试场景。
cy.visit('/')：访问根路径，也就是你的Vue应用的首页。
cy.contains('Hello Vue!')：断言页面包含文本“Hello Vue!”。
cy.get('button')：获取页面上的第一个按钮元素。
cy.click()：点击按钮。
cy.type('Cypress Test')：在文本框中输入“Cypress Test”。

4. 运行测试

保存example.spec.js，Cypress会自动检测到新的测试文件，并在图形界面中显示。点击测试文件，就可以运行测试了。

5. 与Vue组件交互

Cypress可以直接与Vue组件进行交互，例如：

it('修改Vue组件的数据', () => {
  cy.window().then((win) => {
    const app = win.app // 假设你的Vue实例挂载在window.app上
    app.message = 'Cypress Updated'
    cy.contains('Cypress Updated')
  })
})

6. 使用Cypress API

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

API	描述
`cy.visit()`	访问指定的URL
`cy.get()`	获取页面上的元素，可以使用CSS选择器
`cy.click()`	点击元素
`cy.type()`	在输入框中输入文本
`cy.contains()`	断言页面包含指定的文本
`cy.request()`	发送HTTP请求
`cy.wait()`	等待一段时间，或者等待某个条件满足
`cy.fixture()`	加载fixture文件，fixture文件通常包含测试数据
`cy.scrollTo()`	滚动页面到指定位置
`cy.trigger()`	触发元素的事件，例如`cy.get('button').trigger('mouseover')`可以触发按钮的`mouseover`事件

Playwright：跨浏览器的大力士

Playwright是一个跨浏览器的E2E测试工具，它可以支持Chrome、Firefox、Safari等多种浏览器。Playwright就像一个大力士，可以同时在多个浏览器上运行测试，确保你的应用在各种浏览器上都能正常工作。

1. 安装Playwright

npm install -D @playwright/test
# or
yarn add -D @playwright/test

安装完成后，需要安装浏览器驱动：

npx playwright install

2. 创建Playwright配置文件

创建一个playwright.config.js文件：

// playwright.config.js
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  use: {
    baseURL: 'http://localhost:8080', // 你的Vue应用的地址
    headless: process.env.CI ? true : false, // 在CI环境中以无头模式运行
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' },
    },
  ],
};

module.exports = config;

3. 编写你的第一个Playwright测试

在tests目录下创建一个新的测试文件，例如example.spec.ts。

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('访问首页', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('text=Hello Vue!')).toBeVisible(); // 假设你的首页包含Hello Vue!
});

test('点击按钮', async ({ page }) => {
  await page.goto('/');
  await page.click('button'); // 假设你有一个按钮
  await expect(page.locator('text=Clicked!')).toBeVisible(); // 假设点击按钮后显示Clicked!
});

test('输入表单', async ({ page }) => {
  await page.goto('/');
  await page.fill('input[type="text"]', 'Playwright Test');
  await page.click('button');
  await expect(page.locator('text=Playwright Test')).toBeVisible(); // 假设点击按钮后显示输入的内容
});

代码解释：

test：定义一个测试用例，描述一个具体的测试场景。
page.goto('/')：访问根路径，也就是你的Vue应用的首页。
page.locator('text=Hello Vue!')：查找包含文本“Hello Vue!”的元素。
expect(page.locator('text=Hello Vue!')).toBeVisible()：断言找到的元素是可见的。
page.click('button')：点击按钮。
page.fill('input[type="text"]', 'Playwright Test')：在文本框中输入“Playwright Test”。

4. 运行测试

npx playwright test
# or
yarn playwright test

Playwright会自动在配置的浏览器上运行测试，并输出测试结果。

5. 与Vue组件交互

Playwright也可以直接与Vue组件进行交互，但是需要一些技巧。你可以通过page.evaluate方法执行JavaScript代码，来访问Vue组件的数据：

test('修改Vue组件的数据', async ({ page }) => {
  await page.goto('/');
  await page.evaluate(() => {
    // @ts-ignore
    window.app.message = 'Playwright Updated'; // 假设你的Vue实例挂载在window.app上
  });
  await expect(page.locator('text=Playwright Updated')).toBeVisible();
});

6. 使用Playwright API

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

API	描述
`page.goto()`	访问指定的URL
`page.locator()`	获取页面上的元素，可以使用CSS选择器、文本、属性等
`page.click()`	点击元素
`page.fill()`	在输入框中输入文本
`page.textContent()`	获取元素的文本内容
`page.inputValue()`	获取输入框的值
`page.waitForTimeout()`	等待一段时间
`page.waitForSelector()`	等待某个元素出现
`page.route()`	拦截网络请求，可以模拟后端接口返回数据
`page.screenshot()`	截取屏幕截图

Cypress vs Playwright：选哪个好？

Cypress和Playwright各有优缺点，选择哪个取决于你的具体需求：

特性	Cypress	Playwright
易用性	简单易用，调试方便，出错信息清晰，适合小型项目和快速迭代	学习曲线稍陡峭，但功能更强大，适合大型项目和需要跨浏览器测试的项目
浏览器支持	仅支持Chrome、Edge、Firefox、Electron，不支持Safari	支持Chrome、Firefox、Safari、Edge
跨域	Cypress在处理跨域问题时比较麻烦，需要配置`chromeWebSecurity: false`或使用`cy.request`绕过	Playwright对跨域支持更好，不需要特殊配置
调试	Cypress提供了Time Travel功能，可以回溯到每个步骤的状态，方便调试	Playwright也提供了调试工具，可以查看每个步骤的状态，但不如Cypress直观
性能	Cypress在运行速度上稍慢，因为它是在浏览器中运行的	Playwright运行速度更快，因为它是在浏览器外部运行的
API	Cypress API更偏向前端，更贴合前端开发者的习惯	Playwright API更通用，更适合自动化测试工程师
社区	Cypress社区活跃，有很多插件和扩展	Playwright社区也在快速发展，但相对Cypress来说还不够成熟

最佳实践

使用Page Object Model (POM)：将页面元素和操作封装成Page Object，提高代码的可维护性和可复用性。
使用数据驱动测试：将测试数据从测试代码中分离出来，方便管理和维护。
使用CI/CD：将E2E测试集成到CI/CD流程中，确保每次代码提交都能自动运行测试。
编写可维护的测试用例：尽量避免使用硬编码，使用CSS选择器或属性选择器来定位元素。
模拟真实用户行为：尽量模拟真实用户的操作习惯，例如使用cy.wait()等待元素加载完成，而不是使用cy.wait(1000)等待固定的时间。

总结

Cypress和Playwright都是优秀的E2E测试工具，可以帮助你提高Vue应用的质量。选择哪个取决于你的具体需求和团队的技术栈。希望今天的讲解能帮助你更好地理解E2E测试，并将其应用到你的Vue项目中。

各位，下课！

发表回复 取消回复

发表回复取消回复