用于Web应用程序

将您的WebdriverIO测试与Percy集成

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

步骤1：创建Percy项目

登录Percy。在Percy中，创建一个Web类型的项目，然后命名项目。项目创建后，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://webdriver.io');
    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!

有关更多详细信息，请访问以下页面：

• 将WebdriverIO测试与Percy集成
• 环境变量页面
• 使用BrowserStack SDK集成（如果您使用的是BrowserStack Automate）。

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