無痛セットアップサイプレス＆パーシー

私たちは、完全に、サイプレス、Githubのアクションとパーシーを使用して例を記録し、これは将来的に他の人を助けることができると考えています.
どんなガイドでも、再現性のないコードなしでは、lacklusterですfull repo .
変更前のブランチはbefore-visual-testing . ステップは、上の最終バージョンに達するために続くことができますmain 枝.ガイドの変更はthis PR .

Install Percy locally

Implement a test

Sign up

Test locally

Test in CI

Pull Request integration

Further customization

Custom selector

Custom viewports and browsers

ローカルでpercyをインストール

yarn add -D @percy/cli @percy/cypressアットcypress/support/index.js 行を追加しますimport '@percy/cypress'

テストを実行する

任意のスペックに視覚的なテストを追加することができます.アプリケーションのE 2 Eテストスイートで最も意味をなす仕様cypress/integration/ui-integration/user-context-retainment.spec.js 我々は、ユーザーのアバターを視覚的に拡散を確認することができます.

ビジュアルテストの主なアイデアは以下の通りです.

必要なのは1行ですcy.percySnapshot('any snapshot name') . これはデフォルトのスナップショットを記録し、そのデフォルトを新しい、以降のテスト実行と比較します.最初のスナップショットを一度受け入れる必要があります.

それから、デフォルトと一致する新しいスナップショットは自動的に受け入れられます.

非マッチング新しいスナップショットは、percyインターフェイス上の通知をプロンプト;我々はどちらかこの新しいベースラインを拒否または受け入れる必要があります.我々が拒絶するならば、それは欠陥です.我々が受け入れるならば、我々には新しいベースラインがあります、そして、サイクルは続きます.

ビジュアルスナップショットサービスの大きな販売ポイントはAIですAIは時間をかけて訓練可能です、そして、我々は我々が気にしないかもしれないささいなスナップショットdiffsを無視するためにそれを訓練することができます.スナップショットの名前が与えられていることを気にしてください.私たちは、任意のディグリーを受け入れることによって、AIを訓練することができます.我々は、スナップショットの名前、ビューポート、またはコードの任意の部分を変更することにより、トレーニングをリセットすることができます.
ここではどのように視覚テストは、specに見える.

// cypress/integration/ui-integration/user-context-retainment.spec.js

it('Should keep the user context between routes', () => {
 cy.fixture('users').then((users) => {
  cy.get('.user-picker').select(users[3].name)
  cy.contains('Users').click()

  cy.wait('@userStub')
  cy.url().should('contain', '/users')
  cy.get('.item-header').contains(users[3].name)

  // the visual test
  cy.percySnapshot('User selection retainment between routes')
 })
})

試してみましょうyarn cy:open-e2e . Repoでは、このコマンドはAPI、UI、テストを開始するすべての作業を行います.テストを選択user-context-retainment そして実行します.パーシーコマンドでエントリが表示されます.ここでは何も起こりませんでした.

Visual Diffを実行するには、Percyアカウントとトークンが必要です.視覚テストは、このアカウントにフックされ、実行されるときのみ実行されますcy run .

サインアップ

Sign up here .
新しいプロジェクトを作成します.


グラブPERCY_TOKEN . これはマシン、bash、ciの環境変数でなければなりません.サイプレス環境変数でないことに注意してください…でないcypress.env.json .

It makes sense to use dotenv and store this in a .gitignored .env file.

また、追加する必要がありますPERCY_TOKEN ci環境変数に.

あなたがガイドに従っている場合は、今パーシー検証メールが到着する必要があります.必ず進む前にメールを確認してください.

ローカルテスト

bashでは、トークンをエクスポートする必要があります.

export PERCY_TOKEN=80f74d9b1fdfce3b4f31331849357fcf...

それから、specを実行する必要があります.

# start the ui and the api on a different tab
yarn dev

# run a visual test
# note: you can use any selection of specs
yarn percy exec -- cypress run --spec 'cypress/integration/ui-integration/user-context-retainment.spec.js'

実行の最後に、次のような結果が表示されます.

Percy Webインタフェースで実行できます.

これが最初の実行であるので、許容できるスナップショットであるならパーシーに知らせなければなりません.我々はビッググリーンボタンのいずれかによってビルドを承認することができます-すべてを承認-または我々は一度に1つのスナップショットを承認したい場合は、緑の親指.

別のテストを実行しましょう、今度は、イメージがないように、APIを止めたいです.単に停止yarn dev スクリプトを起動し、yarn start . このアプリはlocalhost上で起動されます:3000と画像が壊れて表示されます.下記は前後です.

一旦テストが実行されると、percyは視覚の相違を検出することによって壊れた像を確認します、そして、現在、分散はレビューされる必要があります.実生活では、この変更を拒否し、ビルドを失敗します.

CIでテスト

既存のジョブに追加のステップを追加するか、Visual Testの完全な新しいジョブを作成できます.我々の意見では、チームが利用しているならば、新しい新しい仕事-後者はより良いカスタマイズ可能性を可能にします.そのシナリオチームでは、すべてのチームに特定のGitHubアクションジョブスを実行するYAMLテンプレートに記入し、テンプレートの末尾にカスタムビジュアルテストジョブを挿入できます.

We ran out of parallelization during testing, in the source code you will find a slightly different yml.

We disabled video and screen shot recording in visual tests, because we already have a replica of the spec(s) doing normal testing and recording those artifacts.

## .github/workflows/main.yml

    # option 1: append the visual testing as a step

  cypress-e2e-tests:
    strategy:
      matrix:
        machines: [1, 2]
    needs: [install-dependencies]
    runs-on: ubuntu-latest
    container: cypress/included:9.4.1
    steps:
      - uses: actions/checkout@v3

      - uses: bahmutov/npm-install@v1 
        with: { useRollingCache: true }

      - name: Cypress e2e tests 🧪
        uses: cypress-io/[email protected]
        with:
          install: false 
          start: yarn dev 
          wait-on: 'http://localhost:3000'
          browser: chrome
          record: true
          parallel: true
          group: e2e-tests
          tag: e2e-tests
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          LAUNCH_DARKLY_PROJECT_KEY: ${{ secrets.LAUNCH_DARKLY_PROJECT_KEY }}
          LAUNCH_DARKLY_AUTH_TOKEN: ${{ secrets.LAUNCH_DARKLY_AUTH_TOKEN }}

        # visual test appended as a step 
        # preferred if not using GHA Remote Reusable Workflows
      - name: Cypress visual tests 🧪
        uses: cypress-io/[email protected]
        with:
          install: false # no need to install because of the above 2
          start: yarn dev # concurrently starts ui and api servers
          wait-on: 'http://localhost:3000'
          browser: chrome
          command: yarn percy exec -- cypress run --spec 'cypress/integration/ui-integration/user-context-retainment.spec.js' --config video=false,screenshotOnRunFailure=false
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}      

## .github/workflows/main.yml

    # option 2: use an entire new job for visual testing
  # preferred if using remote reusable workflows
  # insert at the end of your yml file

  cypress-visual-tests:
    needs: [install-dependencies]
    runs-on: ubuntu-latest
    container: cypress/included:9.4.1 
    steps:
      - uses: actions/checkout@v3

      - uses: bahmutov/npm-install@v1 
        with: { useRollingCache: true }

      - name: Cypress visual tests 🧪
        uses: cypress-io/[email protected]
       with:
          install: false 
          start: yarn dev
          wait-on: 'http://localhost:3000'
          browser: chrome
          command: yarn percy exec -- cypress run --spec 'cypress/integration/ui-integration/user-context-retainment.spec.js' --config video=false,screenshotOnRunFailure=false
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

これが新しいCIジョブです.それが通過するとき、パーシーダッシュボードはちょうどローカルにスクリプトを走らせるのと同じように見えます.

プルリクエストの統合

我々は、スナップショットが失敗したときにチェックCi実行の詳細と外部URLを持っていない究極の開発者の経験をしたい.我々は、ギタブのリンクをクリックして、我々がどこにいる必要があります終了します.GitthubとPercyを統合しましょう.クリックAdd integration パーシーインタフェースについて

Juthubレポにパーシーをインストールするプロンプトに従ってください.それは我々がパーシーアクセスを持つべきであるreposとパーミッションを選ぶgithubへのルートです.その後、percyプロジェクトをリポジトリでリンクする必要があります.最終的にはこんなふうに見えます.

この時点でパーシーの仕事を見るためにもう1回押します.詳細をクリックすると、このコミットのパーシーインターフェイスにまっすぐになります.スナップショットが一致しない場合、percyジョブは失敗します.スナップショットを更新し、新しいベースラインとして分散を承認する場合、GITUBジョブはすぐに緑色に変わります.それ以外の場合は失敗します.無痛の開発者の経験は、常に簡単に販売されています.

更なるカスタマイズ

カスタムセレクター

我々はフルスクリーンのスナップショットを取りたくないが、サブエリアに集中したいとしましょう.percyにはこの機能はありませんが、カスタムコマンドを実装できます.

// cypress/support/commands.js
import '@percy/cypress'

...

// https://github.com/percy/percy-cypress/issues/56
Cypress.Commands.add(
  'percySnapshotElement',
  { prevSubject: true },
  (subject, name, options) => {
    cy.percySnapshot(name, {
      domTransformation: (documentClone) =>
        scope(documentClone, subject.selector),
      ...options
    })
  }
)

function scope(documentClone, selector) {
  const element = documentClone.querySelector(selector)
  documentClone.querySelector('body').innerHTML = element.outerHTML

  return documentClone
}

ここでは2番目のスナップショットを追加しました.

// cypress/integration/ui-integration/user-context-retainment.spec.js

it('Should keep the user context between routes', () => {
 cy.fixture('users').then((users) => {
   cy.get('.user-picker').select(users[3].name)
   cy.contains('Users').click()

   cy.wait('@userStub')
   cy.url().should('contain', '/users')
   cy.get('.item-header').contains(users[3].name)

   // the full-page visual test
   cy.percySnapshot('User selection retainment between routes')

   // using custom command for css selector focus
   cy.getByCy('user-details').percySnapshotElement(
     'user details with custom selector'
   )
 })
})

カスタムビューポートとブラウザ

デフォルトでは、2つのViewports(375 pxと1280 px)は、Safariを含む4台のブラウザーで実行されています.これは、実行あたり8スナップショットがかかります.ブラウザの切り替えを行うProject Configuration Settings , しかし、我々はその機能の有料版が必要です.

パーシーa few configuration options . 私たちはviewport configのためのYAMLファイルを好む.ファイルを作成する.percy.yml Repoルートで

## .percy.yml
version: 2
snapshot:
  widths: [750, 1024, 1920]

それぞれのスナップショットは、3つの異なるビューポートになります.
いろいろなブラウザーやビューポートをどう見ているか確認できます.この場合、各々のスナップショットは4×3チェックをアサートします、そして、我々が2つのスナップショットをするので、スペックは24のチェックをします.

それは、我々が視覚テストについて知っていなければならないすべてを包みます.