メインコンテンツにスキップ

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://webdriverio.dokyumento.jp');
    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によるビジュアルテスト
ブログVisual Reviews 2.0のご紹介

ようこそ！何かお困りですか？

WebdriverIO AI Copilot