本文へスキップ

最適な使用方法のための重要な考慮事項

@wdio/visual-service の強力な機能を活用する前に、このツールを最大限に活用するための重要な考慮事項を理解することが不可欠です。以下の点は、ベストプラクティスとよくある落とし穴を案内し、正確で効率的なビジュアルテスト結果を得るのに役立ちます。これらの考慮事項は単なる推奨事項ではなく、現実世界のシナリオでサービスを効果的に利用するために心に留めておくべき重要な側面です。

比較の性質

  • ピクセル単位の比較:このモジュールは、画像をピクセル単位で比較します。一部の側面は調整できます(比較オプションを参照)が、基本的なアプローチはピクセル比較のままです。
  • ブラウザの更新の影響:Chromeなどのブラウザの更新はフォントレンダリングに影響を与える可能性があるため、ベースライン画像の更新が必要になる場合があります。

プラットフォームの一貫性

  • 同一プラットフォームの比較:スクリーンショットは同一プラットフォーム内で比較してください。たとえば、Mac上のChromeからのスクリーンショットを、UbuntuまたはWindows上のChromeからのスクリーンショットと比較しないでください。
  • アナロジー:簡単に言うと、「リンゴとリンゴを比較し、リンゴとアンドロイドを比較しない」ということです。

不一致率への注意

  • 不一致の受け入れのリスク:不一致率を受け入れる際には注意が必要です。これは、大きなスクリーンショットの場合に特に重要で、不一致を受け入れることで、ボタンや要素の欠落などの重大な不一致を見落とす可能性があります。

モバイル画面のシミュレーション

  • モバイルシミュレーションのためのブラウザのリサイズを避けてください:デスクトップブラウザをリサイズしてモバイルブラウザとして扱うことで、モバイル画面サイズをシミュレートしようとしないでください。デスクトップブラウザは、リサイズしても、実際のモバイルブラウザのレンダリングを正確に再現しません。
  • 比較における信頼性:このツールは、エンドユーザーに見える通りのビジュアルを比較することを目的としています。リサイズされたデスクトップブラウザは、モバイルデバイスでの実際のエクスペリエンスを反映していません。

ヘッドレスブラウザに関する立場

  • ヘッドレスブラウザは推奨されません:ヘッドレスブラウザでこのモジュールを使用することはお勧めしません。エンドユーザーはヘッドレスブラウザとやり取りしないため、そのような使用から生じる問題はサポートされません。

ようこそ!お手伝いできることはありますか?

WebdriverIO AI Copilot