1

私の Ruby on Rails サイトはレスポンシブ デザインになっています。ビジュアル リグレッションのテストを作成できますか? たとえば、私のサイトは、水平スクロールなしで iPhone 5 のビューポートに収まります。が設定されておらず、意図せずにビューポートを超えて画像の幅を広げた場合offset-x: hidden、私のサイトは水平方向にスクロールします (下の図)。これは望ましくありません。assert_horizontal_scroll(0)またはのような視覚的な回帰テスト方法はassert_page_width == "480px", :viewport_width => "480px"ありますか?

+---------+      +---------+
| PAGE    |      | PAGE    |
| +-----+ |      | +---------+
| | IMG | |      | |   IMG   |
| +-----+ |      | +---------+
|         |      |         |
+---------+      +---------+

編集: 明確にしておきましょう: 現在、スタイルへの変更をフルスクリーンのブラウザ ウィンドウでプレビューしています。モバイル画面でのサイトの表示方法に影響を与える可能性のある変更を行った場合は、そのブラウザー ウィンドウのサイズをモバイル デバイスのサイズに合わせて変更し、すべてが正常に表示されるかどうかを確認します。各デバイスの幅に合わせてブラウザーのサイズを変更する必要がないように、単体テストを使用して、小さな画面で「すべてが正常に見えるかどうかを確認する」プロセスを自動化したいと考えています。

編集: 別の例: 要素を 50% 透明にしたいので、 を設定しopacity: .5ます。要素の不透明度をテストしたいので、後で CSS スタイルが意図せずにその要素の不透明度を 1 に設定した場合、テストが失敗するのでわかります。または、特定のブラウザー (初期の IE) が不透明度をサポートしていない場合も、テストは失敗します。

4

2 に答える 2

0

私はあなたの質問を完全には理解していません。サイズに関係なく画像を解像度に合わせようとしていますか、それともトリミングしますか?

レスポンシブ イメージが必要な場合は、css を使用します。

http://jsfiddle.net/csswizardry/eqE9J/

img{
    max-width:100%;
    height:auto;
    display:block;
}
于 2013-06-05T05:20:23.647 に答える