これを行うには2つの方法が考えられます。
1 つ - Web 要素ごとに、そのサイズ、場所、可視性などを確認できます。サイズを変更するたびに、それらのパラメーターを以前に指定した値と比較して、レイアウトが変更されたかどうかを確認できます。
第二 - 画像比較。サイズを変更するたびに、ページのスクリーンショットを撮り、以前に保存したパターンと比較できます。それを実現するためのさまざまな画像比較ライブラリがあります。当社ではImageMagickを使用しています。ただし、画像比較は、開発中のページやコンテンツが変化するページには適していません。この問題は、javascript で変更されやすいページの部分を非表示にすることで回避できます (これは WebDriver で実行できます)。
レスポンシブ ページを手動または自動でテストする機会がなかったことを認めなければならないため、上記は単なる私の考えです。「通常の」ページのテストには画像比較を使用しますが、レスポンシブ ページにも適しているかどうかはわかりません。
編集
残念ながらRubyはわかりません。以下は Java での例です。理解して、何とか Ruby に翻訳していただければ幸いです。このコードは、リストからすべての要素のサイズと位置を出力するだけです。
org.openqa.selenium.Point point;
org.openqa.selenium.Dimension dimension;
List<WebElement> elementsList = driver.findElements(By.xpath("//some/xpath"));
for (WebElement element : elementsList)
{
point = element.getLocation();
dimension = element.getSize();
System.out.println("Element name: " + element.getTagName());
System.out.println("Element size: " + dimension.height + "x" + dimension.width);
System.out.println("Element location: " + point.x + ":" + point.y);
}
getLocation() および getSize() を呼び出すたびに、(値を取得するために) js が実行され、時間がかかることに注意してください。そのため、要素ごとに 1 回だけ呼び出す必要があります。element.getSize().height + "x" + element.getSize().width などは使用しないでください。上記の例に比べて 2 倍の時間がかかります。
Ruby では、上記のメソッドは element.location および element.size と呼ばれます。