Can I check visual regressions in my responsive design?

Question

My Ruby on Rails website has a responsive design. Can I write tests for visual regressions? For example, my site is placed in the viewport of iPhone 5 without horizontal scrolling. If offset-x: hiddennot installed, and I inadvertently increase the width of the image outside the viewport, my site will have horizontal scrolling (in the photo below). This is undesirable. Is there a visual regression check method such as assert_horizontal_scroll(0)or assert_page_width == "480px", :viewport_width => "480px"?

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

EDIT: Let me make it clear: I'm currently viewing changes to my styles in a full-screen browser window. If I make changes that may affect the way my site displays on mobile screens, I will resize this browser window to fit the size of my mobile device, and then see if everything looks fine. I want to automate the “see if everything looks fine” process on small screens using the unit test, so I don’t need to resize my browser to every width of the device.

EDIT: : , 50%, opacity: .5. , , CSS 1, , . , ( IE) , .

Answer 1

• PhantomCSS " CasperJS PhantomJS Resemble.js. -, ".

• CasperJS "- PhantomJS, JavaScript. - PHPUnit JUnit, ".

• Wraith - " CSS, , ". " , ".

Answer 2

, , , , , , : Applitools Eyes.

SDK () WebDriver. , , . Java Ruby SDK . , :)

, . , , , , .

Answer 3

. ?

, css:

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

img{
    max-width:100%;
    height:auto;
    display:block;
}