Is there any reliable way to test CSS of a site?

Question

• is that a feasible idea?
• what tools do you use?
• what do you call this kind of testing?

Answer 1

If you're looking for a tool that's built for regression testing check out:

https://github.com/bfirsh/needle

It basically takes screenshots of the parts you select (check their example) and compares them. If they're too different from each other, the test will fail.

Answer 2

1. Validate the CSS. (http://jigsaw.w3.org/css-validator/)

2. Compare the rendering results from real browsers against the expected results. (There is some room for waffling here, since a degraded user experience might be expected in some browsers.)

3. Verify all expected behavior in real web browsers. Behavior comes from CSS pseudo-classes in addition to JavaScript.

Answer 3

You could use a good automation tool to test for the existence of css in the html or css file, however, the computed style of a particular element will be significantly different from that.

This type of testing is where I think manual testing really shines and the best tools are ones like browsershots.org to get the information in front of a human as quickly as possible.

Answer 4

A simple application I use to test cross browser compatibility with regards to CSS is Adobe Browser Lab which lets you compare rending in different browsers from different operating systems (you would be surprised to see some of the tiny differences that exist on the page). On the subject of cross-browser compatibility have a read over this page as it provides descriptions and links to some more helpful tools.

Answer 5

You almost certainly have to test on your actual product pages - trying to test CSS 'in parts' will miss out on any of the interesting cascading effects that you get with multiple stylesheets on the whole page. Of course, you also need to test on all the browsers you care about, since they all have their own rendering idiosyncrasies.

Finding an appropriate oracle to tell you if the visuals are right can be difficult. For some stuff, like known colors or attribute values, you could check the HTML attributes.

You could do manual or automated page comparison against a known-good image of the page.

You could do some automated checking for overlapped or truncated elements - I'm not sure which if any test toolkits do this.