網頁應用程式

將您的 WebdriverIO 測試與 Percy 整合

在整合之前，您可以瀏覽 Percy 的 WebdriverIO 範例建置教學。將您的 WebdriverIO 自動化測試與 BrowserStack Percy 整合，以下是整合步驟的概述

步驟 1：建立 Percy 專案

登入 Percy。在 Percy 中，建立一個類型為「網頁」的專案，然後為專案命名。專案建立後，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.dev.org.tw');
    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 Automate，請使用 BrowserStack SDK 整合。

資源	描述
官方文件	Percy 的 WebdriverIO 文件
範例建置 - 教學課程	Percy 的 WebdriverIO 教學課程
官方影片	使用 Percy 進行視覺測試
部落格	推出視覺檢閱 2.0