モバイルアプリケーション向け
WebdriverIOテストとApp Percyを統合する
統合の前に、WebdriverIO向けApp Percyのサンプルビルドチュートリアルを参照できます。 テストスイートを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コマンドを使用できます。詳細については、Run 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搭載自動視覚テストプラットフォーム |