継続的な UI テストパイプライン: GitHub アクションを使用した BrowserStack-jsチュートリアル-php.cn

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions
たとえ優れたサービスやコンテンツを提供していても、ユーザーの 88% はエクスペリエンスが劣悪なサイトには戻らないことをご存知ですか?シームレスなユーザーインターフェイス (UI) とユーザーエクスペリエンス (UX) は単なる贅沢品ではなく、製品や企業の成功に不可欠であることを認識する時期が来ています。

ここで 継続的 UI テスト が介入します。従来のテスト手法を廃止し、継続的 UI テストは開発と展開のほぼすべてのステップに統合されます。これにより、すべてのブラウザーとデバイスの完璧性が保証されるだけでなく、開発パイプラインを遅くすることなく精度が実現されます。

このブログでは、BrowserStack と GitHub Actions の役割について説明します。前者 (BrowserStack) を使用すると、実際のブラウザーとデバイスで自動テストを実行でき、比類のない精度が保証されます。一方、GitHub Actions は、コードをプッシュするたびにテストワークフローをシームレスにトリガーすることで、このプロセスを自動化します。その方法を見てみましょう。

継続的な UI テストが非常に重要なのはなぜですか?

今日の動的な環境では、定期的な UI テストを無視すると、次のような問題が発生します。

レイアウトの破損: コードの小さな変更により、意図せずにデザインが中断されたり、要素の配置が間違ったり、インターフェイスが応答しなくなる可能性があります。
ブラウザ間の互換性の問題: アプリケーションは、あるブラウザではシームレスに動作しても、別のブラウザに侵入してしまう可能性があります。これはユーザーにとって特にイライラする可能性があります。
ユーザーエクスペリエンスが悪い: 不具合のあるインターフェイスでユーザーを遠ざけるには数秒かかります。これはブランドの評判と収益に直接影響します。

どの CI/CD ワークフローでも、コードが継続的に変更されるたびにリスクが増大します。定期的な UI 一貫性チェックにより、そのような問題やリスクを早期に明らかにすることができます。高価な修正、土壇場での変更、顧客離れ、リリースの遅延といった悩みを抱えずに、構築段階でこれらのテストとチェックに投資することは現実的に可能です。

一貫した UI チェックの大きな利点は次のとおりです。

開発速度の向上: 長期的なパスに焦点を当てる場合は、ランダムにデバッグするのではなく、ビルドのまさに段階でコードの破損を解決します。自動テストにより、スピードとイノベーションが向上します。
高い信頼性: 継続的なテストにより、運用環境に紛れ込んでいる可能性のある UI のバグが確実に減少します。これで、最終的にすべての環境で一貫したパフォーマンスが得られるようになりました!

手動テストと継続的 UI テスト:

Aspect	Continuous UI Testing	Manual Test Techniques
Execution Time	Automated & faster	Slow & resource-intensive
Coverage	Comprehensive across browsers and devices	Limited to selected devices
Scalability	Scalable with CI/CD workflows.	Difficult to scale with frequent changes
Error Detection	Consistent & accurate error detection	Prone to human & other errors
Cost Efficiency	Lower with automation.	Expensive over time due to manual effort

アスペクト継続的な UI テスト手動テスト手法実行時間自動化され高速化遅くてリソースを大量に消費する対象範囲ブラウザとデバイス間で包括的選択したデバイスに限定スケーラビリティ CI/CD ワークフローで拡張可能。頻繁な変更により拡張が困難エラー検出一貫性のある正確なエラー検出人的エラーやその他のエラーが発生しやすいコスト効率自動化により低くなります。手作業のため時間の経過とともにコストがかかるテーブル>

BrowserStack とは何ですか?

BrowserStack は、主要なクラウドベースのテストプラットフォームとして知られており、基本的に開発者は広範囲のブラウザ、オペレーティングシステム、デバイスにわたってアプリケーションをテストできます。社内のデバイスラボの完全な代替品です。 BrowserStack には次のような追加の利点があります:

プラットフォームのビジュアルテスト: プラットフォームの断片化を気にすることなく、一貫したユーザーエクスペリエンスを実現します。視覚的回帰をシームレスに検出し、ピクセルパーフェクトなデザインを可能にします。
自動テストのサポート: BrowserStack 上で Cypress、Selenium、またはその他のテストフレームワークを簡単に実行して、クリーンで堅牢な UI 検証を行うことができます。
クロスブラウザーおよびデバイステスト: 異なるブラウザーおよび異なるデバイス間でのバージョン間でのシームレスな実行を検証します。

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions

GitHub アクションとは何ですか?

GitHub とシームレスに統合する自動化ツールです。「アクション」は、開発者が特にコードのプッシュ、PR (プルリクエスト)、またはスケジュールされたトリガーに基づいてワークフローを開始、管理、トリガーするのに役立ちます。 GitHub Actions の主な機能は次のとおりです。

並列実行: 基本的に、時間を節約し、配信を高速化するためにジョブを同時に実行するのに役立ちます。
カスタマイズ可能なパイプライン: 特定の CI/CD ニーズに合わせた YAML ファイルを使用することで、プロジェクトのワークフローを定義するアクションが非常に効率的になります。
幅広い統合: BrowserStack や AWS などのサードパーティツールとシームレスに組み合わせて、あらゆる種類の包括的な自動化を実現できます。
イベント駆動型ワークフロー: おそらく最良の部分は、テストの実行やリポジトリコードのデプロイなど、リポジトリイベントに基づいてタスクを自動化できることです。

前提条件:

次に、BrowserStack と GitHub Actions を使用してインターフェイステストのセットアップを実行するために必要なツールのリストを示します。

GitHub リポジトリ。
BrowserStack へのアクセス (自動化)。
Selenium/Cypress テストスクリプト (またはブログで提供されているサンプルスクリプト)。

BrowserStack はどのように GitHub Actions と統合されますか?

BrowserStack と GitHub Actions の選択による主要な成果物を最終的に理解した後、これらを組み合わせることで効果的に堅牢かつ自動化できることが証明できると結論付けることができます。さらに読んで、UI テストをさまざまなデバイスやブラウザーで実行できるようにする方法を確認してください。統合プロセスの段階的な技術ウォークスルーへようこそ:

Step-1 :	Event Triggering: Activating Your Workflow
Step-2 :	Code Checkout: Preparing the Test Environment
Step-3 :	Test Execution on BrowserStack: Running UI Tests
Step-4 :	Results Collection and Reporting

上記の 4 つの各ステップの詳細なアプローチを見てみましょう:

ステップ 1: イベントトリガー: ワークフローのアクティブ化

「イベント駆動型」とは、本質的に、GitHub Actions のワークフローがリポジトリイベントによってトリガーされることを意味します。これはドアホンのように機能します。アクティブ化され、事前定義された応答がトリガーされるまでは何も起こりません。

これと同様に、GitHub Actions には、(イベントに応じて) 特定の方法でワークフローをトリガーできるイベントがいくつかあります。いくつかの例を示します:

- プッシュ: コードは特定のブランチ (メイン、開発など) にプッシュされます
  
  * プルリクエスト (PR): プルリクエストを開始、同期、またはマージします。
  
  * 削除: ブランチまたはタグが削除されたとき。

特定の .yml ファイル内の構成を利用して、これらのイベント例を理解できます。

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

ログイン後にコピー

ステップ 2: コードのチェックアウト: テスト環境の準備

このプロセスの次のステップは、GitHub Actions のワークフローを使用してリポジトリのコードベースを取得することです。アクション/チェックアウトアクションを使用してこれを行うことができます。これにより、リポジトリのすべてのテストスクリプトと構成ファイルが正常に実行できるようになります。

これの YAML スニペットの例は次のとおりです。

steps:
  - name: Checkout Repository
    uses: actions/checkout@v3

ログイン後にコピー

?
デフォルトでは、ワークフローを高速化するために、チェックアウトアクションは最新のコミットのみをフェッチします。必要に応じて、完全なリポジトリ履歴には fetch- Depth: 0 を使用します。

ステップ 3: BrowserStack でのテスト実行: UI テストの実行

BrowserStack と GitHub Actions の統合の重要な本質は、BrowserStack の強力なインフラストラクチャ上で UI テストをシームレスに実行することにあります。この重要な設定により、開発者はあらゆる種類のクロスブラウザテストを非常に効率的に自動化できます。その結果、どのような環境でもアプリケーションの一貫したパフォーマンスが得られます。 BrowserStack でのテスト実行の構成方法の詳細は次のとおりです。

BrowserStack 認証情報のセットアップ:

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

ログイン後にコピー

    ```yaml
    steps:
      - name: Set BrowserStack Credentials
        env:
          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
    ```

ログイン後にコピー

依存関係のインストール:

* You must then install the project dependencies based on your project (e.g., Selenium, Cypress). This `.yml` file could be an example:

ログイン後にコピー

    ```yaml
    steps:
      - name: Install Dependencies
        run: |
          npm install
          npm run build
    ```

ログイン後にコピー

BrowserStack CLI または API を介したテストの実行:

* Configure the test runner to execute on BrowserStack Automate:  
    Example for Selenium:

ログイン後にコピー

    ```yaml
    steps:
      - name: Run Selenium Tests on BrowserStack
        run: |
          npx selenium-standalone start &
          npm test
    ```

ログイン後にコピー

* Example for Cypress (via BrowserStack Cypress CLI):

ログイン後にコピー

    ```yaml
    steps:
      - name: Run Cypress Tests on BrowserStack
        run: |
          browserstack-cypress run --sync
    ```

ログイン後にコピー

ステップ 4: 結果の収集とレポート

BrowserStack は、前述したように、包括的に生成することで完璧なレポートと分析を提供します。これらには主に次のものが含まれます:

実行ログ: デバッグ用のステップバイステップのログのセット。
スクリーンショット: 重要なテスト手順をキャプチャして送信します。
ビデオ: リアルタイムで行われたテスト実行の完全な記録
テストステータス: アプリケーションの成功、失敗、スキップされたテストのハイライト。

前述のアーティファクトは、簡単にアクセスできるように GitHub Actions ワークフローに簡単にリンクできます。 .yml ファイルの例でそれを行う方法を次に示します。

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

ログイン後にコピー

統合の高度な機能

並列テストの実行:

BrowserStack Automate の並列テスト機能を使用して、複数のテストケースを異なるブラウザーやデバイスで同時に実行します。これは、テストフレームワークの設定 (Selenium の maxInstances など) を介して構成できます。
動的ブラウザとデバイスのマトリックス:

JSON 構成を使用してテストマトリックスを動的に定義し、テスト対象のブラウザーとデバイスを簡単に更新できるようにします。
```
steps:
  - name: Checkout Repository
    uses: actions/checkout@v3
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
エラー通知:

Slack や電子メールなどの統合を使用して、ワークフローの失敗に関する通知を設定します:
```
* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

技術図

以下は、統合されたワークフローを示す図です

GitHub イベント: コードのプッシュまたはプルリクエストにより、ワークフローがトリガーされます。
CI パイプライン: GitHub Actions はコードと依存関係をフェッチします。
BrowserStack 実行: テストは BrowserStack Automate で実行されます。
テスト結果: ログ、スクリーンショット、レポートが生成され、ワークフローにリンクされます。

BrowserStack と GitHub Actions のシームレスな統合を活用することで、チームは UI テストを自動化し、デバイスとブラウザー全体を包括的にカバーしながら、CI/CD パイプラインを高速化できます。

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions

この統合により UI テストが合理化され、チームが問題を早期に特定し、高品質のアプリケーションをより迅速に提供できるようになります。

UI テストの効率を高めるためのプロのヒント

並列テストの活用: 複数のブラウザーとデバイス間でテストを同時に実行することでテストサイクルを高速化し、実行時間を短縮し、カバレッジを向上させます。
再試行メカニズムの実装: 不安定なテストの影響を軽減し、一貫した結果を保証するために再試行を実装します。
ビジュアル回帰テストの採用: Percy などのツールを使用して、ビジュアルスナップショットを比較することで意図しない UI の変更を検出し、シームレスなユーザーインターフェイスを確保します。

よくある問題とその解決方法

継続的な UI テストを実装する場合、いくつかの一般的な課題に遭遇する可能性があります。ここでは、いくつかのトラブルシューティングのヒントと、それらを解決するためのヒントを紹介します。

不安定なテスト:

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

ログイン後にコピー

構成エラー:

steps:
  - name: Checkout Repository
    uses: actions/checkout@v3

ログイン後にコピー

ブラウザの互換性の問題

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

ログイン後にコピー

この場合に採用できるベストプラクティスは次のとおりです。

安定したテスト環境を維持する: 一貫した結果を保証するために専用のテスト環境をセットアップします。
テストのパフォーマンスを監視: テストの実行時間を監視し、不必要なテストの実行を避けてください。
ログの確認: テストで何が問題だったのか明確な洞察が得られない場合は、必ずログを検査してください。
並列テスト: 効率と対象範囲を向上させるために、複数のブラウザーとデバイスを同時にテストします。

これらの一般的な問題に対処し、ベストプラクティスに従うことで、UI テストの信頼性を向上させ、よりスムーズなテストエクスペリエンスを保証できます。

Keploy: 速度と精度を重視したテスト自動化の簡素化

Keploy は、最新のアプリケーションのテスト生成と実行を合理化するように設計された、オープンソースのコード不要のテストプラットフォームです。 API インタラクションを自動的にキャプチャすることで、手動介入なしで信頼性の高い包括的なテストケースを生成できます。

継続的な UI テストで Keploy を使用する理由

自動テスト作成: Keploy は実行時に API 呼び出しを記録することでテストケースを自動的に生成し、手動スクリプト作成の必要性を減らします。
回帰テスト: 逸脱を検出してフラグを立てることにより、アプリケーションが一貫したパフォーマンスを維持することを保証します。
シームレスな CI/CD 統合: Keploy は GitHub Actions や BrowserStack などのツールと連携して動作し、CI/CD パイプラインの効率を高めます。
反復の高速化: テストスクリプト作成にかかる時間を削減できるため、チームは開発とイノベーションに集中できます。

ユースケース:

Keploy と BrowserStack をペアリングすると、API と UI 要素の両方をカバーし、一貫したクロスプラットフォームのパフォーマンスを実現する包括的なテストソリューションが提供されます。 Keploy をワークフローに組み込むことで、最高のアプリケーション品質を維持しながら、テストの効率をさらに高め、配信を加速できます。

結論

今日のペースの速い開発環境では、継続的な UI テストはもはや贅沢ではなく、必要不可欠なものになっています。 BrowserStack や GitHub Actions などのツールを使用すると、複雑なテストプロセスを自動化し、チームがシームレスなクロスプラットフォームのユーザーエクスペリエンスを提供できるようになります。これらの統合により、開発サイクルの短縮、信頼性の向上、コストの削減が可能になり、アプリケーションが最高の品質基準を満たしていることが保証されます。

これらのツールを Keploy などの革新的なプラットフォームと組み合わせることで、テスト戦略を次のレベルに引き上げ、開発サイクルの早い段階で UI レベルと API レベルの問題の両方を捉えることができます。これにより、CI/CD パイプラインが高速化されるだけでなく、アプリケーション全体の復元力とユーザー満足度も強化されます。