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

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: テスト失敗時に自動的にスクリーンショットを撮るかどうかを指定します。
• trashAssetsBeforeRuns: テスト実行前に screenshots フォルダをクリアするかどうかを指定します。
• defaultScreenshotWidth: スクリーンショットのデフォルト幅を指定します。
• 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 でスクリーンショットを撮る方法はいくつかあります。要件に合わせて適切な方法を選択してください。