Web 应用

将您的 WebdriverIO 测试与 Percy 集成

在集成之前，您可以浏览Percy 的 WebdriverIO 示例构建教程。将您的 WebdriverIO 自动化测试与 BrowserStack Percy 集成，以下概述了集成步骤

步骤 1：创建 Percy 项目

有关创建项目的详细信息，请参阅创建 Percy 项目。

步骤 2：将项目令牌设置为环境变量

运行给定的命令将 PERCY_TOKEN 设置为环境变量

export PERCY_TOKEN="<your token here>"   // macOS or Linux
$Env:PERCY_TOKEN="<your token here>"   // Windows PowerShell
set PERCY_TOKEN="<your token here>"    // Windows CMD

步骤 3：安装 Percy 依赖项

安装为您的测试套件建立集成环境所需的组件。

要安装依赖项，请运行以下命令

npm install --save-dev @percy/cli @percy/webdriverio

步骤 4：更新您的测试脚本

导入 Percy 库以使用拍摄屏幕截图所需的方法和属性。以下示例在异步模式下使用 percySnapshot() 函数

import percySnapshot from '@percy/webdriverio';
describe('webdriver.io page', () => {
  it('should have the right title', async () => {
    await browser.url('https://webdriverio.node.org.cn');
    await expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');
    await percySnapshot('webdriver.io page');
  });
});

在独立模式下使用 WebdriverIO 时，将浏览器对象作为第一个参数提供给 percySnapshot 函数

import { remote } from 'webdriverio'

import percySnapshot from '@percy/webdriverio';

const browser = await remote({
  logLevel: 'trace',
  capabilities: {
    browserName: 'chrome'
  }
});

await browser.url('https://duckduckgo.com');
const inputElem = await browser.$('#search_form_input_homepage');
await inputElem.setValue('WebdriverIO');
const submitBtn = await browser.$('#search_button_homepage');
await submitBtn.click();
// the browser object is required in standalone mode
percySnapshot(browser, 'WebdriverIO at DuckDuckGo');
await browser.deleteSession();

快照方法的参数为

percySnapshot(name[, options])

独立模式

percySnapshot(browser, name[, options])

browser（必需） - WebdriverIO 浏览器对象
name（必需） - 快照名称；每个快照必须唯一
options - 请参阅每个快照的配置选项

要了解更多信息，请参阅Percy 快照。

步骤 5：运行 Percy

使用以下所示的 percy exec 命令运行您的测试

如果您无法使用 percy:exec 命令或更愿意使用 IDE 运行选项运行测试，则可以使用 percy:exec:start 和 percy:exec:stop 命令。要了解更多信息，请访问运行 Percy。

percy exec -- wdio wdio.conf.js

[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Running "wdio wdio.conf.js"
...
[...] webdriver.io page
[percy] Snapshot taken "webdriver.io page"
[...]    ✓ should have the right title
...
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

访问以下页面以获取更多详细信息：

资源	描述
官方文档	Percy 的 WebdriverIO 文档
示例构建 - 教程	Percy 的 WebdriverIO 教程
官方视频	使用 Percy 进行视觉测试
博客	推出视觉审查 2.0

将您的 WebdriverIO 测试与 Percy 集成​

步骤 1：创建 Percy 项目​

步骤 2：将项目令牌设置为环境变量​

步骤 3：安装 Percy 依赖项​

步骤 4：更新您的测试脚本​

独立模式​

步骤 5：运行 Percy​

访问以下页面以获取更多详细信息：​