パーシーによる視覚回帰のテスト

この投稿は、個人的な経験に基づいて、スポンサーになっていません（ただし、セットアップを示すスポンサービデオでパーシーと協力しました）。パーシーは強力な視覚的レビュープラットフォームであり、それを探索することを強くお勧めします。

この一般的なシナリオを想像してください。単位テストが合格し、コードをマージし、QAフラグはUIの問題、つまり画面外に浮かぶボタンです。あなたはそのコードに触れませんでしたが、いくつかのCSSを変更しました。突然、さまざまな画面サイズとブラウザにわたるすべてのUI要素に疑問を呈しています。手動でテストすることは記念碑的な作業です。

パーシーは解決策です。予期しないデザインとレイアウトの変更を検出するには非常に貴重です。ワークフローでは不可欠になり、コードを強化し、エラーを防止する方法を共有しています。シームレスに他のツールと統合し、セットアップが簡単です。

パーシーとは何ですか？

パーシーは、視覚回帰を検出するために設計された包括的な視覚レビュープラットフォームです。多くのコードの変更、特にCSSの変更により、予期せぬデザインブレークを導入できます。パーシーは、大きなスタイルシートまたはレガシーコードを変更する際に自信を提供し、単一のコード変更の影響を受けるすべてのUI要素を特定するのに役立ちます。

サンプルサイトのセットアップ

GatsbyとNetlifyを使用して、パーシーテスト用のシンプルなサイトを作成します。これらのテクノロジーに深く潜り込むことはこの範囲を超えていますが、セットアッププロセスを簡素化し、複雑なサーバー構成を排除します。

Netlifyテンプレートを使用し、[netlifyに展開]をクリックします。これにより、githubリポジトリが作成され、Netlifyを介してアプリを展開します。その結果、パーシー統合の準備ができているライブサイトができました。

Circleciによる自動テスト

パーシーはCI環境で繁栄します。 Circleciを使用して、各コミットでテストをトリガーします。

1. Netlify Deployed Repoをクローンします（例、 git clone https://github.com/PaulRyanStitcherAds/gatsby-starter-netlify-cms.git ）。
2. GitHubアカウントを使用してCircleciにサインアップします。
3. LinuxとRuby（Percy-Cli用）を選択して、Circleciにプロジェクトを追加します。
4. この構成で.circleci/config.ymlファイルを作成します。

バージョン：2
仕事：
  建てる：
    Docker：
       - 画像：Circleci/Ruby：2.4.1-Node-Browsers
    working_directory：〜/repo
    ステップ：
      - チェックアウト
      - 走る：
          名前：依存関係をインストールします
          コマンド：|
            NPMインストール
            GemインストールPercy-Cli
      - 走る：
          名前：テストを実行します
          コマンド：|
            npm run build
            パーシースナップショットパブリック

これによりpercy-cliがインストールされ、ビルド後にPercy Snapshotsが実行されます。 （注： percy-cli NPMパッケージとしてインストールしてみてください。）

マスターブランチに押して、Circleciビルドをトリガーします。

パーシーをcircleciに接続します

1. Githubを使用してPercyアカウントを作成します。
2. パーシーに新しい組織とプロジェクトを作成します。
3. 「プロジェクト設定」からパーシートークンを入手してください。
4. Sircleciの「ビルド設定」の環境変数としてトークンを追加します。
5. 再びマスターにプッシュしてパーシーを実行します。パーシーはスナップショットを作成します。初期のビルドには、以前のスナップショットがないため、空の比較列が表示されます。
6. 最後に、「プロジェクト設定」 - >「統合をインストールする」、組織の選択、すべてのリポジトリのインストールを介してリポジトリにパーシーにリンクします。

パーシーの力を活用します

それでは、コードレビューワークフローでパーシーを示しましょう。

1. ブランチを作成します（例：「Changing-Color」）。
2. CSSファイルを変更します（たとえば、色を変更します）。
3. 変更を押して、GitHubにプルリクエストを作成します。
4. Circleciはパーシーを実行し、視覚的な変化を強調します。
5. パーシーの変更を確認し、それらを承認します。これにより、プルリクエストがマージの準備ができているとマークされます。

Percyは、効率的な視覚変化のレビューを可能にし、偶発的なUI回帰を防ぎます。このセットアップは、UIテストプロセスを合理化し、大幅な時間と労力を節約します。

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