前端自动化测试：使用`Jest`、`Cypress`和`Playwright`进行自动化测试，确保代码质量。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

前端自动化测试：Jest、Cypress 和 Playwright 实战

大家好，今天我们来聊聊前端自动化测试。作为一名开发者，我们都希望自己的代码质量过硬，减少线上 bug。而自动化测试就是保障代码质量的重要手段。今天我们会重点讲解三个流行的前端测试框架：Jest、Cypress 和 Playwright。它们各有特点，适用于不同的测试场景。

一、为什么要做自动化测试？

在深入了解具体框架之前，我们先来明确自动化测试的价值。

减少重复劳动： 手动测试繁琐且耗时，自动化测试可以将这部分工作解放出来，让测试人员专注于更复杂的测试场景。
提高测试效率： 自动化测试可以在短时间内执行大量测试用例，快速发现代码中的问题。
保证代码质量： 自动化测试可以覆盖各种边界情况和异常场景，确保代码的健壮性。
支持持续集成/持续部署 (CI/CD)： 自动化测试是 CI/CD 流程中的重要环节，可以确保每次代码变更都经过充分的测试。
降低回归风险： 当代码进行修改后，自动化测试可以快速验证之前的代码功能是否仍然正常。

二、Jest：单元测试的利器

Jest 是 Facebook 开源的一个 JavaScript 测试框架，它以其简单易用、功能强大而著称，非常适合进行单元测试。

2.1 Jest 的特点：

零配置： Jest 默认配置良好，开箱即用，无需复杂的配置过程。
快速： Jest 使用并行测试和快照测试等技术，可以显著提高测试速度。
内置 Mocking 功能： Jest 提供了强大的 Mocking 功能，可以轻松模拟依赖项，隔离测试单元。
代码覆盖率报告： Jest 可以自动生成代码覆盖率报告，帮助开发者了解测试覆盖范围。
易于学习和使用： Jest 的 API 简单明了，文档完善，学习曲线平缓。

2.2 Jest 的安装和配置：

首先，我们需要安装 Jest：

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

然后，在 package.json 文件中添加测试脚本：

{
  "scripts": {
    "test": "jest"
  }
}

这样，我们就可以通过 npm test 或 yarn test 命令来运行测试了。

2.3 Jest 的基本用法：

下面是一个简单的 Jest 测试用例：

// sum.js
function sum(a, b) {
  return a + b;
}

module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

describe 函数用于组织测试用例，可以包含多个 test 函数。
test 函数定义一个具体的测试用例。
expect 函数用于断言测试结果。
toBe 是一个匹配器，用于比较期望值和实际值。

Jest 提供了丰富的匹配器，例如：

匹配器	描述
`toBe`	严格相等 (===)
`toEqual`	深度相等，用于比较对象和数组
`toBeNull`	检查是否为 null
`toBeUndefined`	检查是否为 undefined
`toBeDefined`	检查是否已定义
`toBeTruthy`	检查是否为真值
`toBeFalsy`	检查是否为假值
`toBeGreaterThan`	检查是否大于给定值
`toBeLessThan`	检查是否小于给定值
`toContain`	检查数组或字符串是否包含给定元素或子字符串
`toThrow`	检查函数是否抛出异常

2.4 Jest 的 Mocking 功能：

在单元测试中，我们经常需要模拟依赖项，以隔离测试单元。Jest 提供了强大的 Mocking 功能，可以轻松实现这一点。

例如，假设我们有一个 UserService 类，它依赖于 UserRepository 类：

// UserRepository.js
class UserRepository {
  getUserById(id) {
    // 从数据库中获取用户
    throw new Error('Not implemented');
  }
}

module.exports = UserRepository;

// UserService.js
const UserRepository = require('./UserRepository');

class UserService {
  constructor(userRepository) {
    this.userRepository = userRepository;
  }

  getUserNameById(id) {
    const user = this.userRepository.getUserById(id);
    return user.name;
  }
}

module.exports = UserService;

在测试 UserService 时，我们不想真正访问数据库，而是希望模拟 UserRepository 的行为。

// UserService.test.js
const UserService = require('./UserService');
const UserRepository = require('./UserRepository');

jest.mock('./UserRepository'); // 模拟 UserRepository

describe('UserService', () => {
  it('should return user name by id', () => {
    const mockUserRepository = new UserRepository();
    mockUserRepository.getUserById.mockReturnValue({ id: 1, name: 'John Doe' }); // 设置模拟返回值

    const userService = new UserService(mockUserRepository);
    const userName = userService.getUserNameById(1);

    expect(userName).toBe('John Doe');
    expect(mockUserRepository.getUserById).toHaveBeenCalledWith(1); // 验证是否调用了该方法
  });
});

jest.mock('./UserRepository') 语句会模拟 UserRepository 类。
mockUserRepository.getUserById.mockReturnValue() 语句设置 getUserById 方法的模拟返回值。
expect(mockUserRepository.getUserById).toHaveBeenCalledWith(1) 语句验证 getUserById 方法是否被调用，以及调用时传入的参数是否正确。

2.5 Jest 的快照测试：

快照测试是一种非常方便的测试 UI 组件的方式。它可以将 UI 组件的渲染结果保存为一个快照文件，然后在每次测试时比较渲染结果和快照文件，如果两者不一致，则测试失败。

例如，假设我们有一个 Button 组件：

// Button.jsx
import React from 'react';

function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

export default Button;

// Button.test.jsx
import React from 'react';
import { shallow } from 'enzyme'; // 需要安装 enzyme
import Button from './Button';

it('renders correctly', () => {
  const wrapper = shallow(<Button>Click me</Button>);
  expect(wrapper).toMatchSnapshot();
});

shallow 函数用于浅渲染组件，只渲染组件本身，不渲染其子组件。
toMatchSnapshot() 语句会将组件的渲染结果保存为一个快照文件。

在第一次运行测试时，Jest 会生成一个快照文件。在后续的测试中，Jest 会比较组件的渲染结果和快照文件，如果两者不一致，则测试失败。

三、Cypress：端到端 (E2E) 测试的强大工具

Cypress 是一个专门为 Web 应用设计的端到端 (E2E) 测试框架。它与传统的 E2E 测试框架不同，Cypress 直接在浏览器中运行，可以更好地控制测试环境，提供更快的测试速度和更可靠的测试结果。

3.1 Cypress 的特点：

在浏览器中运行： Cypress 直接在浏览器中运行，可以访问浏览器的所有 API，更好地模拟用户行为。
时间旅行： Cypress 可以记录测试过程中的每一步操作，方便开发者调试问题。
自动等待： Cypress 可以自动等待元素加载完成，无需手动添加等待时间。
实时重载： 当测试代码发生变化时，Cypress 会自动重新运行测试。
截图和录像： Cypress 可以自动生成测试过程中的截图和录像，方便开发者分析问题。
易于调试： Cypress 提供了强大的调试工具，方便开发者定位问题。

3.2 Cypress 的安装和配置：

首先，我们需要安装 Cypress：

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

然后，我们可以通过以下命令来启动 Cypress：

npx cypress open
# 或者
yarn cypress open

Cypress 会打开一个图形界面，我们可以在这里运行测试用例。

3.3 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 field and type into it
    cy.get('.action-email')
      .type('[email protected]')
      .should('have.value', '[email protected]');
  });
});

describe 函数用于组织测试用例，可以包含多个 it 函数。
it 函数定义一个具体的测试用例。
cy.visit() 函数用于访问一个 URL。
cy.contains() 函数用于查找包含指定文本的元素。
cy.click() 函数用于点击一个元素。
cy.url() 函数用于获取当前 URL。
cy.should() 函数用于断言测试结果。
cy.get() 函数用于查找元素。
cy.type() 函数用于在输入框中输入文本。
cy.have.value 是一个断言，用于检查元素的值是否等于指定值。

Cypress 提供了丰富的命令和断言，可以满足各种测试需求。

3.4 Cypress 的高级用法：

自定义命令： Cypress 允许开发者自定义命令，以封装常用的操作。
插件： Cypress 提供了丰富的插件，可以扩展其功能。
环境变量： Cypress 允许开发者设置环境变量，以便在不同的环境中运行测试。
测试数据： Cypress 允许开发者使用测试数据，以便更好地模拟用户行为。

四、Playwright：跨浏览器 E2E 测试的新选择

Playwright 是 Microsoft 开源的一个跨浏览器 E2E 测试框架。它支持 Chrome、Firefox、Safari 等主流浏览器，并提供了强大的 API，可以轻松实现各种测试场景。

4.1 Playwright 的特点：

跨浏览器支持： Playwright 支持 Chrome、Firefox、Safari 等主流浏览器，可以确保应用在不同浏览器上的兼容性。
自动等待： Playwright 可以自动等待元素加载完成，无需手动添加等待时间。
网络控制： Playwright 可以模拟不同的网络环境，例如离线、慢速网络等。
设备模拟： Playwright 可以模拟不同的设备，例如手机、平板电脑等。
截图和录像： Playwright 可以自动生成测试过程中的截图和录像，方便开发者分析问题。
易于使用： Playwright 的 API 简单明了，文档完善，学习曲线平缓。

4.2 Playwright 的安装和配置：

首先，我们需要安装 Playwright：

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

然后，我们需要安装浏览器：

npx playwright install
# 或者
yarn playwright install

Playwright 会自动安装 Chrome、Firefox、Safari 等主流浏览器。

4.3 Playwright 的基本用法：

下面是一个简单的 Playwright 测试用例：

// example.spec.js
const { chromium } = require('playwright');

(async () => {
  // Launch browser
  const browser = await chromium.launch();
  // Create context
  const context = await browser.newContext();
  // Create page
  const page = await context.newPage();
  // Go to a website
  await page.goto('https://example.com');
  // Get the title
  const title = await page.title();
  // Assert title
  console.log(`Title is: ${title}`);
  // Close browser
  await browser.close();
})();

chromium.launch() 函数用于启动 Chromium 浏览器。
browser.newContext() 函数用于创建一个新的浏览器上下文。
context.newPage() 函数用于创建一个新的页面。
page.goto() 函数用于访问一个 URL。
page.title() 函数用于获取页面的标题。
await browser.close() 函数用于关闭浏览器。

Playwright 提供了丰富的 API，可以满足各种测试需求。

4.4 Playwright 的高级用法：

选择器： Playwright 提供了强大的选择器，可以轻松定位页面元素。
操作： Playwright 提供了丰富的操作，可以模拟用户行为。
断言： Playwright 提供了丰富的断言，可以验证测试结果。
测试数据： Playwright 允许开发者使用测试数据，以便更好地模拟用户行为。

五、如何选择合适的测试框架？

Jest、Cypress 和 Playwright 各有特点，适用于不同的测试场景。

特性	Jest	Cypress	Playwright
测试类型	单元测试、集成测试	端到端 (E2E) 测试	端到端 (E2E) 测试
运行环境	Node.js	浏览器	浏览器
跨浏览器支持	不支持	仅支持 Chrome 系列浏览器 (Edge, Chrome)	支持 Chrome、Firefox、Safari 等主流浏览器
易用性	简单易用	易于使用	易于使用
Mocking 功能	强大	有限	强大
调试工具	强大	强大	强大
适用场景	单元测试、组件测试、快速迭代的项目	复杂的 UI 交互、真实用户场景模拟	跨浏览器兼容性测试、复杂的用户流程

建议：

对于单元测试和组件测试，建议使用 Jest。
对于需要模拟真实用户行为的端到端测试，建议使用 Cypress 或 Playwright。
对于需要进行跨浏览器兼容性测试的项目，建议使用 Playwright。
根据项目需求、团队技术栈和个人偏好选择合适的测试框架。

六、最佳实践

编写可维护的测试用例： 测试用例应该易于理解、易于维护，避免重复代码。
测试驱动开发 (TDD)： 在编写代码之前先编写测试用例，可以帮助开发者更好地思考需求和设计。
持续集成/持续部署 (CI/CD)： 将自动化测试集成到 CI/CD 流程中，可以确保每次代码变更都经过充分的测试。
代码覆盖率： 关注代码覆盖率，确保测试覆盖范围足够广泛。
定期维护测试用例： 随着代码的不断演进，测试用例也需要定期维护，以确保其有效性。

总结：选择合适的工具，构建可靠的前端应用

今天我们学习了 Jest、Cypress 和 Playwright 这三个优秀的前端自动化测试框架。通过理解它们的特点和适用场景，我们可以更好地选择合适的工具，编写高质量的测试用例，保障代码质量，构建可靠的前端应用。希望今天的分享对大家有所帮助！

前端自动化测试：Jest、Cypress 和 Playwright 实战

发表回复 取消回复

发表回复取消回复