Cypressでスクリーンショットを撮る:Cypress.Screenshot API徹底解説

2024-04-02

Cypressでスクリーンショットを撮る:Cypress.Screenshot API徹底解説

Cypress.Screenshot APIの使い方

手動でスクリーンショットを撮る

cy.screenshot('my-screenshot'); // スクリーンショットを撮って 'my-screenshot.png' という名前で保存
  • 引数にファイル名を指定することで、保存するファイル名を指定できます。
  • ファイル名は .png 形式で自動的に拡張されます。
  • オプションで、selector を指定して特定の要素のみをキャプチャすることもできます。

テスト失敗時に自動的にスクリーンショットを撮る

Cypress はデフォルトで、テスト失敗時に自動的にスクリーンショットを撮ります。

describe('My tests', () => {
  it('should fail', () => {
    // テストが失敗するコード
    expect(true).to.be.false;
  });
});

上記のコードを実行すると、テストが失敗した際に screenshots フォルダに my-tests-should-fail.png という名前でスクリーンショットが保存されます。

Cypress.Screenshot API は、スクリーンショットのキャプチャ方法を細かくカスタマイズするための様々なオプションを提供しています。

  • screenshotOnRunFailure: テスト失敗時に自動的にスクリーンショットを撮るかどうかを指定します。
  • screenshotOnFailure: 特定のテスト失敗時にのみスクリーンショットを撮るかどうかを指定します。
  • trashAssetsBeforeRuns: テスト実行前に screenshots フォルダをクリアするかどうかを指定します。
  • defaultScreenshotWidth: スクリーンショットのデフォルト幅を指定します。
  • defaultScreenshotHeight: スクリーンショットのデフォルト高さを指定します。
  • blackout: スクリーンショットから特定の要素を隠すかどうかを指定します。

これらのオプションは、cypress.json ファイルまたは Cypress.Screenshot.defaults() メソッドを使用して設定できます。

Cypress.Screenshot APIの利点

  • テストの失敗原因を視覚的にデバッグするのに役立ちます。
  • テスト結果を分かりやすく報告することができます。
  • アプリケーションのUIの変更を記録することができます。

Cypress.Screenshot APIの注意点

  • スクリーンショットのキャプチャは、テストの実行速度を遅らせる可能性があります。
  • 大量のスクリーンショットを保存すると、ディスク容量を圧迫する可能性があります。

Cypress.Screenshot APIのサンプルコード

// cypress.json

{
  "screenshotOnRunFailure": true,
  "defaultScreenshotWidth": 1024,
  "defaultScreenshotHeight": 768,
  "blackout": ["#my-secret-element"]
}

// テストコード

cy.screenshot('my-screenshot');

cy.get('#my-element').screenshot('my-element-screenshot');

Cypress.Screenshot.defaults({
  screenshotOnRunFailure: false,
  blackout: []
});

Cypress.Screenshot API は、Cypress テストでスクリーンショットを簡単にキャプチャするための強力なツールです。テストのデバッグ、報告、UI変更の記録などに役立ちます。



Cypress.Screenshot API サンプルコード集

基本的なスクリーンショットキャプチャ

// テストコード

cy.screenshot('my-screenshot'); // スクリーンショットを撮って 'my-screenshot.png' という名前で保存

cy.get('#my-element').screenshot('my-element-screenshot'); // 特定の要素のみをキャプチャ

// cypress.json

{
  "screenshotOnRunFailure": true, // テスト失敗時に自動的にスクリーンショットを撮る
  "defaultScreenshotWidth": 1024, // スクリーンショットのデフォルト幅
  "defaultScreenshotHeight": 768  // スクリーンショットのデフォルト高さ
}

オプションの使用

// テストコード

cy.screenshot({
  blackout: [".my-secret-element"], // 特定の要素を隠す
  clip: {
    x: 100,
    y: 100,
    width: 500,
    height: 500,
  }, // スクリーンショットの範囲を指定
  captureElement: document.querySelector('#my-element'), // 特定のDOM要素をキャプチャ
  delay: 1000, // スクリーンショットを撮る前に1秒待機
  overwrite: true, // 既存のファイルがあれば上書きする
  scale: 0.5, // スクリーンショットを縮小
  type: 'jpeg', // スクリーンショットのファイル形式
});

高度なテクニック

// テストコード

// テスト完了後にスクリーンショットを撮る
Cypress.on('test:after:run', (test) => {
  if (test.state === 'failed') {
    cy.screenshot('my-screenshot-' + test.title);
  }
});

// スクリーンショットをギャラリーとして表示する
Cypress.Screenshot.defaults({
  screenshotOnRunFailure: false,
  blackout: [],
  onBeforeScreenshot: (screenshot) => {
    // スクリーンショットを加工する
  },
  onAfterScreenshot: (screenshot) => {
    // スクリーンショットをギャラリーに追加する
  },
});


Cypressでスクリーンショットを撮る:その他の方法

cy.get().then() を使用

cy.get('#my-element').then(($element) => {
  const screenshot = $element.screenshot();
  // スクリーンショットデータを処理
});

この方法では、cy.get() で要素を取得してから、screenshot() メソッドを使用してスクリーンショットをキャプチャします。

cy.exec() を使用

cy.exec('npx cypress-image-snapshot --input-file screenshots/my-screenshot.png --output-file screenshots/my-screenshot-diff.png');

この方法では、cy.exec() を使用して cypress-image-snapshot コマンドを実行し、スクリーンショットの差分画像を作成することができます。

これらのライブラリは、Cypress.Screenshot API よりも高度な機能を提供することができます。

  • シンプルで簡単な方法: Cypress.Screenshot API
  • 特定の要素のみをキャプチャしたい場合: cy.get().then()
  • スクリーンショットの差分画像を作成したい場合: cy.exec() または 3rd party ライブラリ
  • フルページスクリーンショットを撮りたい場合: 3rd party ライブラリ
  • 視覚テストを行いたい場合: 3rd party ライブラリ

Cypress でスクリーンショットを撮る方法はいくつかあります。要件に合わせて適切な方法を選択してください。




Cypressで要素操作をレベルアップ!prevUntilコマンドの活用術

prevUntilコマンドは、現在の要素から指定された条件を満たす要素までのすべて前の兄弟要素を取得します。取得した要素は、テストや操作の対象として使用できます。構文引数<selector>:現在の要素を取得するためのセレクター<selector>:取得を終了する要素を指定するためのセレクター



Cypress テストコードを劇的に改善! "within" の使い方をマスターしよう

上記の例では、selector で指定された要素内でのみ click と type コマンドが実行されます。要素間の切り替えを簡略化: テスト対象の要素階層が深い場合、within を使用することで、各要素へのアクセスを簡潔に記述できます。


Cypress テストをデバッグ・速度制御: pause コマンド活用術

pause()コマンドは、単独で使用することも、引数と組み合わせて使用することもできます。単独で使用する場合:テストの実行を一時停止します。画面中央に「Cypress Paused」というメッセージが表示されます。実行を再開するには、EnterキーまたはSpaceキーを押します。


Cypress コマンド "reload" を使う

基本的な使い方:この例では、#some-element をクリックした後、ページをリロードし、#some-element が表示されていないことを確認しています。オプションの指定:cy. reload() コマンドは、オプションを指定して呼び出すことができます。


Cypressのtriggerコマンドを使いこなしてテストコードを効率的に記述しよう!

triggerコマンドの利点:テストコードを簡潔かつ分かりやすく記述できる複雑なユーザー操作を自動化できる特定のイベントに対する要素の反応を検証できるtriggerコマンドの使い方:triggerコマンドの詳細:イベントの種類は、Cypressドキュメント: URL Cypress triggerを参照



Cypress clock コマンドのサンプルコード

cy. clock() コマンドは、Cypress テスト内で時間を操作するための強力なツールです。テストの特定の時点をシミュレートしたり、時間経過に依存する機能を検証したりするのに役立ちます。使用方法cy. clock() コマンドは、以下の 2 つの方法で使用できます。


CypressでJavaScriptコードを使用して状態をリセットする

Cypressで利用可能なクリアコマンド:cy. clear() - テキスト入力フィールドの値をクリアします。cy. clearCookies() - ブラウザのすべてのクッキーを削除します。cy. clearAllSessionStorage() - セッションストレージに保存されているすべてのデータを削除します。


Cypress テストをデバッグ・速度制御: pause コマンド活用術

pause()コマンドは、単独で使用することも、引数と組み合わせて使用することもできます。単独で使用する場合:テストの実行を一時停止します。画面中央に「Cypress Paused」というメッセージが表示されます。実行を再開するには、EnterキーまたはSpaceキーを押します。


Cypress テストコードを劇的に改善! "within" の使い方をマスターしよう

上記の例では、selector で指定された要素内でのみ click と type コマンドが実行されます。要素間の切り替えを簡略化: テスト対象の要素階層が深い場合、within を使用することで、各要素へのアクセスを簡潔に記述できます。


Cypress テストで環境変数を使いこなす! Cypress.env の徹底解説

設定方法Cypress. env は、以下の方法で設定できます。cypress. json ファイルJavaScript コードコマンドライン参照方法Cypress テストの中で、Cypress. env で設定した変数は Cypress