適用於行動應用程式

將您的 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');
  });
});

我們正在傳遞必要的引數。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 驅動自動視覺測試平台