Percy -岩石教程

描述 (SEO)

Percy 是一个视觉测试和审查平台，旨在帮助开发者和团队在应用程序开发和迭代过程中捕获、比较和审查视觉变化。通过自动化截图和视觉差异检测，Percy 能够在代码变化时有效地检测和防止视觉回归，从而确保应用程序的外观和用户体验的一致性。

特点

自动截图：在测试过程中自动捕获网页的截图，包括多种视口和浏览器配置。
视觉差异检测：精准检测新旧版本之间的视觉差异，突出显示变化部分。
审查和批准工作流：提供直观的界面用于审查和批准视觉变化，确保团队中的每个人都能看到并批准这些变化。
集成工具链：与 CI/CD 工具和测试框架无缝集成，如 Travis CI、Jenkins、CircleCI、GitHub Actions 等。
多浏览器支持：支持多个浏览器（如 Chrome、Firefox）和不同的设备视口，确保跨平台一致性。
项目和团队管理：允许管理多个项目和团队成员，提供角色和权限控制。

使用场景

视觉回归测试：捕获代码变化导致的视觉差异，防止意外的视觉回归。
跨浏览器和设备测试：确保应用在不同浏览器和设备上的一致性。
UI 组件库测试：自动捕获和比较 UI 组件的外观变化。
设计审查和批准：提供设计师和开发者之间的协作平台，审查和批准视觉变化。

安装方式

使用 npm 安装 Percy CLI：

npm install --save-dev @percy/cli

使用示例

基本设置

初始化 Percy：

npx percy init

运行截图：

npx percy exec -- your-test-command

与测试框架集成

以 Selenium WebDriver 为例：

安装依赖：

npm install --save-dev @percy/cli @percy/selenium-webdriver

修改测试代码以捕获截图：

const { Builder } = require('selenium-webdriver');
const percySnapshot = require('@percy/selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('https://example.com');
    await percySnapshot(driver, 'Example Page');
  } finally {
    await driver.quit();
  }
})();

运行测试并捕获截图：

npx percy exec -- node your-test-file.js

常用 API 介绍

percySnapshot(driver, name, options)：捕获当前页面的截图。
- driver：WebDriver 实例。
- name：截图的名称。
- options：可选配置对象，例如指定视口大小。
```
await percySnapshot(driver, 'Example Page', { widths: [375, 1280] });
```
percy exec -- command：运行指定命令，并在测试过程中捕获截图。
```
npx percy exec -- node your-test-file.js
```
percy start：启动 Percy 代理服务，用于捕获页面截图。
```
npx percy start
```
percy stop：停止 Percy 代理服务。
```
npx percy stop
```

高级用法

自定义视口

可以通过 widths 选项自定义截图的视口大小：

await percySnapshot(driver, 'Example Page', { widths: [320, 768, 1024] });

禁用特定元素

在截图过程中，可以通过 percyCSS 选项禁用特定的 CSS 选择器，使其在截图中不可见：

await percySnapshot(driver, 'Example Page', {
  percyCSS: 'header { visibility: hidden; }'
});

集成 CI/CD 工具

在 CI/CD 管道中集成 Percy，可以在每次代码更改时自动运行视觉测试。以下是一个简单的 GitHub Actions 配置示例：

name: Visual Testing

on: [push, pull_request]

jobs:
  visual-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run visual tests
        run: npx percy exec -- npx mocha
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

Percy