适用于移动应用

将您的 WebdriverIO 测试与 App Percy 集成

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

步骤 1：在 Percy 仪表盘上创建新的应用项目

登录 Percy 并创建一个新的应用类型项目。创建项目后，您将看到一个 PERCY_TOKEN 环境变量。Percy 将使用 PERCY_TOKEN 来识别要将屏幕截图上传到的组织和项目。您将在后续步骤中需要此 PERCY_TOKEN。

步骤 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

步骤 4：安装依赖项

安装 Percy Appium 应用

npm install --save-dev @percy/appium-app

步骤 5：更新测试脚本

确保在您的代码中导入了 @percy/appium-app。

以下是用 percyScreenshot 函数进行测试的示例。在您需要截取屏幕截图的地方使用此函数。

import percyScreenshot from '@percy/appium-app';
describe('Appium webdriverio test example', function() {
  it('takes a screenshot', async () => {
    await percyScreenshot('Appium JS example');
  });
});

我们正在传递所需的 arguments.percyScreenshot 方法。

屏幕截图方法的参数为

percyScreenshot(driver, name[, options])

步骤 6：运行您的测试脚本

使用 percy app:exec 运行您的测试。

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

$ percy app:exec -- appium test command

此命令启动 Percy，创建一个新的 Percy 构建，截取快照并将其上传到您的项目，然后停止 Percy

[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Snapshot taken "Appium WebdriverIO Example"
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

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

• 将您的 WebdriverIO 测试与 Percy 集成
• 环境变量页面
• 如果您正在使用 BrowserStack Automate，请使用 BrowserStack SDK 集成。

资源	描述
官方文档	App Percy 的 WebdriverIO 文档
示例构建 - 教程	App Percy 的 WebdriverIO 教程
官方视频	使用 App Percy 进行视觉测试
博客	了解 App Percy：面向原生应用的 AI 驱动的自动化视觉测试平台