メインコンテンツにスキップ

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

@wdio/visual-serviceの強力な機能を活用する前に、このツールから最大限の効果を得るためのいくつかの重要な考慮事項を理解することが不可欠です。以下のポイントは、ベストプラクティスと一般的な落とし穴を案内し、正確で効率的な視覚的テスト結果を達成するのに役立ちます。これらの考慮事項は単なる推奨事項ではなく、実際のシナリオでサービスを効果的に活用するために念頭に置くべき重要な側面です。

比較の性質

  • ピクセルごとの比較: このモジュールは画像のピクセルごとの比較を実行します。特定の側面は調整できますが(比較オプションを参照)、基本的なアプローチはピクセル比較のままです。
  • ブラウザ更新の影響: Chromeなどのブラウザの更新がフォントのレンダリングに影響を与え、ベースライン画像の更新が必要になる可能性があることに注意してください。

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

  • 同一プラットフォームでの比較: スクリーンショットが同じプラットフォーム内で比較されるようにしてください。例えば、MacのChromeからのスクリーンショットをUbuntuやWindowsのChromeからのものと比較するべきではありません。
  • 例え: 簡単に言えば、「リンゴとリンゴを比較し、リンゴとアンドロイドを比較しない」ようにしましょう。

不一致の割合に関する注意

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

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

  • モバイルシミュレーションのためのブラウザのリサイズを避ける: デスクトップブラウザをリサイズしてモバイルブラウザとして扱おうとしないでください。リサイズされたデスクトップブラウザは、実際のモバイルブラウザのレンダリングを正確に再現しません。
  • 比較の真正性: このツールはエンドユーザーに表示される視覚的な要素を比較することを目的としています。リサイズされたデスクトップブラウザはモバイルデバイスでの真の体験を反映していません。

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

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

Welcome! How can I help?

WebdriverIO AI Copilot