Cypress.Screenshot のコード例と実用例

2025-01-18

Cypress.Screenshot は、Cypress テストフレームワーク内でスクリーンショットをキャプチャするための機能です。テストの実行中に特定の時点の画面状態を画像ファイルとして保存することで、テスト結果の視覚的な確認やバグの再現に役立ちます。

主な使い方

  1. テストケース内で直接使用

    cy.visit('https://example.com');
    cy.get('#login-button').click();
    cy.screenshot('login-page');
    

    このコードでは、指定した URL にアクセスし、ログインボタンをクリックした後、"login-page" という名前のスクリーンショットをキャプチャします。

  2. Cypress.Screenshot API を使用

    Cypress.Screenshot.defaults({
        capture: 'fullPage',
        blackout: ['#password-field']
    });
    

    このコードでは、スクリーンショットのデフォルト設定を指定しています。capture: 'fullPage' は全画面のキャプチャを指定し、blackout: ['#password-field'] はパスワードフィールドを黒塗りして機密情報を保護します。

スクリーンショットの保存場所
デフォルトでは、スクリーンショットは cypress/screenshots フォルダーに保存されます。各テストケースのスクリーンショットは、そのテストケースに対応するサブフォルダーに保存されます。

スクリーンショットの活用

  • テストカバレッジの向上
    特定の画面遷移や操作を確認するためのスクリーンショットをキャプチャできます。
  • バグの再現
    バグが発生した際の画面状態を記録し、開発者に提供できます。
  • テスト結果の視覚的確認
    テストが失敗した際の画面の状態を確認できます。
  • 機密情報が含まれる画面をキャプチャする場合は、適切なセキュリティ対策が必要です。
  • スクリーンショットのファイルサイズは大きくなる可能性があります。
  • スクリーンショットのキャプチャはテストの実行時間を増加させる可能性があります。


Cypress.Screenshot の一般的なエラーとトラブルシューティング

Cypress.Screenshot 機能を使用する際に、いくつかの一般的なエラーや問題が発生することがあります。以下に、その原因と解決方法を説明します。

スクリーンショットがキャプチャされない

  • 解決方法
    • Cypress の設定を確認し、スクリーンショットのキャプチャが有効になっていることを確認します。
    • cy.wait() を使用して、テストケースの実行を遅延させてスクリーンショットのキャプチャ時間を確保します。
    • ブラウザの拡張機能を一時的に無効にして、干渉を排除します。
  • 原因
    • Cypress の設定に問題がある。
    • テストケースの実行が速すぎて、スクリーンショットがキャプチャされる前に完了してしまう。
    • ブラウザの拡張機能や設定が干渉している。

スクリーンショットの品質が悪い

  • 解決方法
    • Cypress の設定でスクリーンショットの解像度を上げる。
    • cy.wait() を使用して、ブラウザのレンダリングが完了するまで待つ。
  • 原因
    • スクリーンショットの解像度が低い。
    • ブラウザのレンダリングが遅いため、スクリーンショットが不完全になる。

スクリーンショットのファイルサイズが大きい

  • 解決方法
    • Cypress の設定でスクリーンショットの解像度を下げる。
    • 特定の要素のみをキャプチャする。
  • 原因
    • スクリーンショットの解像度が高すぎる。
    • スクリーンショットが全画面キャプチャになっている。

スクリーンショットが保存されない

  • 解決方法
    • ディスク容量を確認し、必要に応じて空き容量を増やす。
    • ファイルシステムのアクセス権限を確認し、Cypress がスクリーンショットを保存できることを確認します。
  • 原因
    • ディスク容量不足。
    • ファイルシステムのアクセス権限の問題。
  • 解決方法
    • テスト環境を実際の環境に近づける。
    • 異なるブラウザでテストを実行し、ブラウザごとのレンダリングの違いを確認する。
  • 原因
    • テストケースの実行環境と実際の環境の違い。
    • ブラウザのレンダリングの違い。


Cypress.Screenshot の具体的なコード例

全画面スクリーンショットのキャプチャ

cy.visit('https://example.com');
cy.screenshot('full_page_screenshot');

このコードは、指定した URL にアクセスし、全画面のスクリーンショットを full_page_screenshot という名前でキャプチャします。

特定要素のスクリーンショットのキャプチャ

cy.get('#login-button').screenshot('login_button_screenshot');

このコードは、#login-button という ID の要素を特定し、その要素のスクリーンショットを login_button_screenshot という名前でキャプチャします。

スクリーンショットのデフォルト設定

Cypress.Screenshot.defaults({
  capture: 'fullPage',
  blackout: ['#password-field']
});

このコードは、スクリーンショットのデフォルト設定を指定します。capture: 'fullPage' は全画面キャプチャを指定し、blackout: ['#password-field'] はパスワードフィールドを黒塗りします。

ダイナミックなスクリーンショット名

cy.get('h1').then(($h1) => {
  const title = $h1.text();
  cy.screenshot(`${title}_screenshot`);
});

このコードは、h1 タグのテキストを取得し、そのテキストをスクリーンショット名の一部として使用します。これにより、ダイナミックなスクリーンショット名を生成できます。

スクリーンショットの保存場所の指定

Cypress.config('screenshotsFolder', 'custom_screenshots');

このコードは、スクリーンショットの保存先を custom_screenshots フォルダーに変更します。

  • スクリーンショットのファイルサイズが大きい場合
    • Cypress の設定でスクリーンショットの解像度を下げる。
    • 特定の要素のみをキャプチャします。
  • スクリーンショットの品質が悪い場合
    • Cypress の設定でスクリーンショットの解像度を上げる。
    • cy.wait() を使用して、ブラウザのレンダリングが完了するまで待ちます。
  • スクリーンショットがキャプチャされない場合
    • Cypress の設定を確認し、スクリーンショットのキャプチャが有効になっていることを確認します。
    • cy.wait() を使用して、テストケースの実行を遅延させてスクリーンショットのキャプチャ時間を確保します。


Cypress.Screenshot の代替方法

Cypress.Screenshot は、Cypress テストフレームワーク内でスクリーンショットをキャプチャするための強力な機能ですが、他の方法も検討できます。以下に、いくつかの代替方法を紹介します。

ブラウザの開発者ツール

  • デメリット
    • 手動操作が必要
    • テスト自動化には適さない
  • メリット
    • 柔軟なキャプチャ機能
    • リアルタイムの画面確認

第三者ライブラリ

  • Playwright
    • Microsoft が開発したクロスブラウザの自動化ライブラリ
    • スクリーンショットのキャプチャ機能を備えている
  • Puppeteer
    • Node.js で動作する強力なブラウザ自動化ライブラリ
    • スクリーンショットのキャプチャ機能を備えている

Cypress のカスタムコマンド

Cypress のカスタムコマンド機能を使って、スクリーンショットのキャプチャをカスタマイズすることができます。例えば、特定の要素のスクリーンショットを特定のフォーマットで保存するようなカスタムコマンドを作成できます。

CI/CD パイプラインのスクリーンショットキャプチャ

CI/CD パイプライン内で、テスト実行時にスクリーンショットをキャプチャし、テストレポートに添付することができます。これにより、テスト結果の視覚的な確認が容易になります。

  • カスタマイズ性
    Cypress のカスタムコマンドを使用することで、スクリーンショットのキャプチャをカスタマイズすることができます。
  • 柔軟性
    ブラウザの開発者ツールは柔軟なキャプチャ機能を提供しますが、手動操作が必要となります。
  • 自動化の程度
    自動化されたテスト環境では、Cypress.Screenshot や Puppeteer、Playwright などのライブラリが適しています。