StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAutomated testing of CSS and HTML front-end coding
text
Body
copied!<p>I'm a front-end developer coding CSS, HTML and Javascript (in that order) and most of the work I do is design-lead. Whilst the quality of the <em>designs</em> I create with CSS is subjective, much of the coding is purely functional / layout and I am interested in any way to automate the testing of my page.</p> <p>My question can be split into two parts</p> <ol> <li><p>Does anyone have any existing techniques or suggestions for automatically testing CSS or HTML, particularly with regard cross-browser compatibility?</p></li> <li><p>As CSS can be roughly divided into properties that control layout and those that control design, is automated testing only viable for <strong>layout</strong> (it can't be possible to automatically and valuably test that a <em>colour</em> is correct, for example)? If so, what sort of CSS values might be suitable for boolean acceptance tests?</p></li> </ol> <p>Here are my initial examples of boolean layout values that could be tested - there must be others? </p> <ul> <li>Does a pop-up appear above other content (z-index)</li> <li>Does a footer clear all other content (float)</li> </ul> <p>Thanks for your help. Part three of the question is of course "Am I wasting my time going down this route?".</p> <p>***** edit *****</p> <p>I have found this article that asks the same questions I've asked, but more in depth and perhaps a little more eloquently. </p> <p><a href="http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/" rel="noreferrer">http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/</a></p> <p>Moving forward I am trying to isolate some examples from my work where CSS alone has caused functional errors however those that I've found so far are bugs with JS <strong>and</strong> CSS combined. I would still like to automatically test these sorts of errors, but appreciate that with javascript used it is beyond the scope of my original question.</p> <p>***** edit 2 *****</p> <p>I've since blogged about how I set about solving this problem, available here:</p> <p><a href="http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-coder-is-now-responsible-for-breaking-%E2%80%93-and-fixing-%E2%80%93-the-build/" rel="noreferrer">http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-coder-is-now-responsible-for-breaking-%E2%80%93-and-fixing-%E2%80%93-the-build/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload