Can I test for visual regressions in my responsive design?

问题

My Ruby on Rails site has a responsive design. Can I write tests for visual regressions? For example, my site fits in an iPhone 5's viewport without horizontal scrolling. If offset-x: hidden isn't set, and I unintentionally extend the width of an image past the viewport, my site will have horizontal scrolling (pictured below). This is undesirable. Does a visual regression test method such as assert_horizontal_scroll(0) or assert_page_width == "480px", :viewport_width => "480px" exist?

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

EDIT: Let me try to clarify: I currently preview changes to my styles in a fullscreen browser window. If I make changes that could affect the way my site appears on mobile screens, I'll resize that browser window to match the dimensions of a mobile device, then see if everything looks ok. I want to automate the process of "seeing if everything looks ok" on small screens via a unit test so that I don't have to resize my browser to each device width.

EDIT: Another example: I want an element to be 50% transparent, and I set opacity: .5. I want to test the element's opacity, so that if later CSS styles unintentionally set that element's opacity to 1, I'll know because my test will fail. Or if a particular browser (early IE) doesn't support opacity, the test will also fail.

回答1:

• PhantomCSS is "a CasperJS module for automating visual regression testing with PhantomJS and Resemble.js. For testing Web apps, live style guides and responsive layouts."

• CasperJS "is a navigation scripting and testing utility for PhantomJS, written in JavaScript. It allows us to test websites a lot like PHPUnit or JUnit allow us to test our code."

• Wraith is a tool for "testing CSS changes, both deliberate and unintentional." It's used "to compare screenshots of pages, at the pull request level and when merged into master."

回答2:

I don't fully understand your question. Are you trying to fit the image to the resolution regardless of it's size or do you want to crop it?

If you want responsive image just use css:

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

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

来源：https://stackoverflow.com/questions/16931600/can-i-test-for-visual-regressions-in-my-responsive-design