- is that a feasible idea?
- what tools do you use?
- what do you call this kind of testing?
-
How do you want to test the CSS? Do you mean validate against a W3C validator or do you mean does it display and render correctly?– terrypMay 4, 2011 at 11:18
-
@terryp: the later, unit testing application of css, cross-browser support,styles assert etc. i am looking at something what CssUnit(Github) does, what do you suggest?– NarayanMay 4, 2011 at 12:48
Add a comment
|
7 Answers
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.
Validate the CSS. (http://jigsaw.w3.org/css-validator/)
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.)
Verify all expected behavior in real web browsers. Behavior comes from CSS pseudo-classes in addition to JavaScript.
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.
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.
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.
Quixote is an actual css testing library - you can either use it for direct unit testing or integration testing.
If you are an open source enthusiast then you have PhantomCSS Else you can use commercially available tools like Applitools