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

モバイルアプリケーション向け

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!

詳細については以下のページをご覧ください:

リソース説明
公式ドキュメントApp PercyのWebdriverIOドキュメント
サンプルビルド - チュートリアルApp PercyのWebdriverIOチュートリアル
公式ビデオApp Percyを使用した視覚的テスト
ブログApp Percyの紹介:ネイティブアプリ向けのAI搭載自動視覚テストプラットフォーム

Welcome! How can I help?

WebdriverIO AI Copilot