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

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

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メソッドに渡しています。

screenshotメソッドの引数は次のとおりです。

percyScreenshot(driver, name[, options])

ステップ6:テストスクリプトを実行する

`percy app:exec`を使用してテストを実行します。

percyアプリを使用できない場合:execコマンド、またはIDEの実行オプションを使用してテストを実行することを希望する場合は、percy app:execを使用できます:スタートとpercy app:exec:停止コマンド。詳細については、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搭載自動ビジュアルテストプラットフォーム

ようこそ!何かお困りですか?

WebdriverIO AI Copilot