ブラウザでのレンダリングの自動テスト

Question

Seleniumまたは他の自動化ツールは、Webページ上の要素の適切な配置をチェックできますか？

たとえば、IE 6でOnStartups.comを見ると、メニューの右側にあるはずのメインコンテンツは代わりにその下にあり、下にスクロールして読む必要があります。実際に表示されているdivの座標を照会して取得できますか？また、ビューポートの座標を取得して、左上隅が実際に表示可能領域内にあることを確認できますか？

Answer 1

スクリーンショットを比較することは、あなたができる最善のことだと思います。そのための堅牢なツールはまだないのではないかと思います。

私があなたなら、サイトのすべてのページをナビゲートするスクリプトを作成し、それぞれの写真をキャプチャしてから、すべての結果を含むフォルダーを開きます。それらの30。本当に馬鹿げているように聞こえますが、時々、より簡単な代替案が最高のものになります...

Answer 2

できることは、標準ブラウザを選択し、他のブラウザのスクリーンショットを参照ブラウザと比較することです。

特定のものを思い出せませんが、Araxis mergeのようなツールはスクリーンショットを非常にインテリジェントな方法で比較できました。

Answer 3

Seleniumには、要素の位置とサイズをチェックするアサーションがあります：

• assertElementHeight（locator、pattern）
• assertElementWidth（locator、pattern）
• assertElementPositionLeft（locator、pattern）
• assertElementPositionTop（locator、pattern）

OPの例でレンダリングを確認する簡単なテストは、次のように記述することです

assertElementPositionTop(//*[@id='main_content'],0)

したがって、＃main_contentが上部または他のどこにレンダリングされるかを確認します。