👍

このdocでカバーされている

Rails、Sinatraなどを含むRuby webフレームワークでPercyとCapybara機能テストを統合する。

機能テスト（または”uiテスト”、”受け入れテスト”など））、あなたはそれらを正しく取得し、あなたのアプリを正しいUI状態にすることがいかに難しいかを知っています。 Percy Capybaraでは、機能テストの構築に費やしたすべての時間を取り、スクリーンショットや視覚的な回帰テストでそれらを展開して、複雑なUI状態の背後にあ以下の例では、RSpecを使用していることを前提としていますが、他のテストフレームワークに簡単に適応できます。

🚧

Percy Capybara v4

このドキュメントは、Percy Capybaraバージョン4.0.0以降のものです。 以前のバージョンのPercy Capybaraには、異なる互換性のないAPIがありました。

v4へのアップグレードガイドまたは古いドキュメントを参照してください。

Setup

アプリケーションのGemfileに次の行を追加します。

gem 'percy-capybara', '~> 4.0.0'

次を実行します。

$ bundle install

または自分でインストールしますgem install percy-capybara

。また、Percy agentをインストールする必要があります。

これはあなたのテストと一緒に実行されるプロセスで、あなたに代わってpercyにスナップショットをアップロードします。 Npmを使用してインストールする必要があります。プロジェクトがルートディレクトリにpackage.jsonnpm initpackage.jsonはノードパッケージのGemfileのようなものです。

プロジェクトのローカルに@percy/agentをインストールするには：

$ npm install --save-dev @percy/agent

これは、エージェントとその依存関係を含む./node_modules/./node_modules/.bin/percyにあります。

次に、percy Capybaraライブラリをスナップショットを取得するファイルにインポートします。

require 'percy'

これで、Percy.snapshot(...)を使用して、テストからスナップショットを生成できます。

describe 'Test with visual testing', type: :feature, js: true do it 'loads example.com homepage' do visit 'https://example.com' Percy.snapshot(page, { name: 'example.com homepage' }) endend

describe 'Test with visual testing', type: :feature, js: true do it 'loads example.com homepage' do visit 'https://example.com' Percy.snapshot(page, { name: 'example.com homepage' }) endend

describe 'Test with visual testing', type: :feature, js: true do it 'loads example.com homepage' do visit 'https://example.com' Percy.snapshot(page, { name: 'example.com homepage' }) endend

require 'percy'

require 'percy'

require 'percy'

Percy.snapshotは、テスト対象のwebページを表すCapybara::Sessionpercy execコマンドでラップします。 これにより、ローカルのPercyエージェントが開始され、テストからスナップショットを受信してPercyダッシュボードにアップロードされます。 Percyを正常に実行するには、PERCY_TOKEN環境変数を設定する必要があります。

# Windows$ set PERCY_TOKEN=<your token here># Unix $ export PERCY_TOKEN=<your token here>

フルパス（通常は./node_modules/.bin/percynpx percy（npxはパッケージバイナリを実行できるノードユーティリティ）。 Npxをサポートしていない5.2より前のnpmバージョンを使用している場合は、代わりに$(npm bin)/percyを使用できます。たとえば、RSpecを使用してテストを実行している場合、新しいtestコマンドは次のようになります。

$ npx percy exec -- rspec

ダブルダッシュ--npx percy execとtest runコマンドの間にあることに注意してください。CIシステムがテストを実行するための新しい方法として、このnpx percy exec -- <test runner>コマンドを追加する必要があります。

これで終わりです！ 今、あなたのCIが実行されるたびに、その状態のアプリのスナップショットは、視覚的なテストのためにPercyにアップロードされます！ p>

設定

Percy.snapshot(page)Percy.snapshot(page, options)

pageは、スナップショットを作成するwebページを表すCapybara::Sessionオブジェクトです。 必須です。

optionsは、次のようなオプションのハッシュです。

• name:このスナップショットを識別する文字列。 これは、ページとその状態を識別するために理にかなっている任意の文字列にすることができます。 これは一意であり、ビルド間で同じままである必要があります。 あなたがそれを提供しない場合、Percyはテスト中のページの完全なURLを使用します。 同じURLを使用して複数のスナップショットを取得する場合は、2つのスナップショットの間で明確にするために、スナップショット名を手動で指定する必要があります。 スナップショット名の生成の詳細については、”自動生成されたスナップショット名”を参照してください。
• widths:スナップショットを取得するブラウザの幅(ピクセル単位)を表す整数の配列。
• min_height:結果のスナップショットの最小の高さを指定する整数(ページの内容によっては、スナップショットがこの値よりも高くなる デフォルトは1024pxです。
• percy_css:このスナップショットに適用されるPercy固有のCSSを含む文字列。
• request_headers:このスナップショットのアセット検出中に行われた各要求に対して送信されるHTTPヘッダーを含むオブジェクトです。

例

Percy.snapshot(page, { name: 'Responsive snapshot', widths: })Percy.snapshot(page, { min_height: 2000 })

グローバル設定

すべてのスナップショットで同じオプションを使用するようにPercyを設定することもできます。 幅を含むサポートされている設定を確認するには、SDKの設定ドキュメントをお読みください

Capybaraで要素を待機しています

Capybaraには、特定のページ要素が表示されるのを効率的に待機するために使用できる堅牢な内部待機システムがあります続行する前に。 Capybaraでフレーク状のsleep呼び出しを記述する必要はありません。

RSpecテストで

expect(page).to have_css('#new-project')expect(page).to have_content('New Project')

これは、#new-project要素が存在するのを効率的に待機します。Capybaraの一般的なhas_no_css?has_no_content?has_no_xpath?メソッドを使用して、続行する前にページの状態が正 おそらく、要素のクエリがtrueを返した場合に実行を停止するために例外を発生させたいと思うでしょう。

raise 'element missing!' if page.has_no_css?('#new-project')raise 'element missing!' if page.has_no_content?('New Project')

詳細情報

• https://github.com/teamcapybara/capybara#querying
• https://github.com/teamcapybara/capybara#asynchronous-javascript-ajax-and-friends

トラブルシューティング

スタイルが欠落しています

あなたのスクリーンショットが次のようになっている場合

スタイルが欠落しており、webpackerを使用してアプリのフロントエンド資産を構築している場合は、テスト用に構築するときにcssを抽出するように構成す デフォルトでは、WebpackはCSSをblobアセットとして生成します。 Webpacker設定ファイルでは、extract_css: true:

test: ... # Extract and emit a css file extract_css: true

test: ... # Extract and emit a css file extract_css: true