パーシーとの視覚テストのガイド

Percy：シームレスなUI品質の視覚テストの自動

Percyと協力して作成されたこの記事では、自動化された視覚テストを実装して、ユーザーインターフェイス（UI）がさまざまなブラウザーと画面サイズで一貫性を維持することを保証します。 ユニットと統合テストはアプリケーションロジックを検証しますが、視覚的な欠陥を見逃すことがよくあります。 パーシーは、視覚的なスナップショットをキャプチャして比較し、矛盾を強調し、レビュープロセスを合理化するプロセスを自動化することにより、ソリューションを提供します。

このチュートリアルでは、API駆動型のシングルページアプリケーションを実用的な例として使用しています。 Percyが動的データを処理し、効率的な視覚的レビューと承認を得るためにワークフローと統合する方法を学習します。

パーシーの重要な利点：

UIの問題の早期検出：
• 従来のテストで見逃された視覚的なバグをキャッチし、ブラウザーと画面サイズで一貫したUIを確保します。 自動化されたスナップショット比較：
視覚的なスナップショットのキャプチャと比較を自動化し、簡単なレビューのための違いを強調します。
• 簡単な統合：標準テストフレームワークのセットアップと同様に、インストールと統合は簡単です。
• 動的なデータ処理：ダイナミックデータの表示を効果的に管理し、データの変更からの誤検知を防止します。
合理化された承認ワークフロー：
• チームのレビューと視覚的変更の承認を促進し、意図された変更のみが展開されるようにします。 汎用性の高いSDK：
さまざまなテストフレームワークにSDKを提供し、既存の開発環境との互換性を高めます。
• 前提条件：
• このチュートリアルは、ES6構文、Express.JS（RESTFUL APIS）、JQUERY、AXIOS、CSSフレームワーク、GIT分岐戦略、および理想的にはテストフレームワークの経験に精通している中間から高度なJavaScript開発者をターゲットにします。 GitHubアカウントが必要です。 GitHubで利用可能なサンプル通貨アプリケーションを使用します パーシーの理解：

Percyは、Webアプリ、静的サイト、コンポーネントライブラリの視覚的なテスト用のプラットフォームとワークフローを提供しています。 その無料プランには、無制限のチームメンバー、毎月5,000のスナップショット（1か月の歴史があります）、無制限のプロジェクトが含まれます。 このプロセスには、SDKのインストール、プロジェクトダッシュボードの作成、コードベースとの統合が含まれます。パーシーは、ChromeとFirefoxでスナップショットをレンダリングし、最大10の画面解像度をサポートします。

実装の手順：

1. デモプロジェクトのセットアップ：提供されたgithubリポジトリをフォークし、readmeの指示に従ってサンプル通貨アプリケーションをセットアップします。

2. Percy Project Dashboardのセットアップ：無料のPercyアカウントにサインアップし、プロジェクト（「Percy-Tutorial」）を作成し、GitHubリポジトリにリンクします。あなたの。を入手してください PERCY_TOKEN

3. Percy Snapshotsの生成：

   Package（）をインストールします。 を作成します（コードについては、元の記事を参照してください）。このスクリプトは、操り人形師を使用してアプリケーションと対話し、各ページのスナップショットを生成します。 Percyスクリプトを実行する前に、アプリケーションを起動するために、別の端末で@percy/scriptを実行することを忘れないでください。 npm install -D @percy/script。snapshots.jsを使用してスクリプトを実行します npm start export PERCY_TOKEN=<your_token> && npx percy exec -- node snapshots.js</your_token>

動的データの取り扱い：
4. APIリクエストを傍受し、応答をモックデータに置き換えるために、一貫したスナップショットを確保するために応答を変更します。 （更新されたコードについては、元の記事を参照してください）

   snapshots.js承認ワークフロー：

   機能ブランチの作成、視覚的な変更を行い、コミット、プッシュ、Githubでプルリクエストを作成し、パーシーテストを実行し、パーシーダッシュボードでビルドを承認し、ブランチをマージします。 最後に、マスターブランチを更新し、パーシーテストを再度実行して、新しいベースラインを確立します。

5. 継続的統合（CI）およびSDK統合：

Percyは、自動テストのためにさまざまなCI/CDプラットフォーム（Appveyor、Azure Pipelinesなど）と統合します。 また、さまざまなテストフレームワーク（サイプレスなど）と統合するためのさまざまなSDKをサポートしています。 元の記事は、サイプレス統合の例を示しています。

結論：

Percyは、プロセスを自動化し、視覚的変化を確認および承認するための合理化されたワークフローを提供することにより、UIテストを大幅に強化します。 Percyを開発プロセスに統合することにより、視覚的な欠陥で製品をリリースするリスクを大幅に減らすことができます。 元の記事のFAQは、視覚テストの概念とパーシーの機能に関する詳細を提供します。

以上がパーシーとの視覚テストのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。