23

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 designs 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.

My question can be split into two parts

  1. Does anyone have any existing techniques or suggestions for automatically testing CSS or HTML, particularly with regard cross-browser compatibility?

  2. As CSS can be roughly divided into properties that control layout and those that control design, is automated testing only viable for layout (it can't be possible to automatically and valuably test that a colour is correct, for example)? If so, what sort of CSS values might be suitable for boolean acceptance tests?

Here are my initial examples of boolean layout values that could be tested - there must be others?

  • Does a pop-up appear above other content (z-index)
  • Does a footer clear all other content (float)

Thanks for your help. Part three of the question is of course "Am I wasting my time going down this route?".

***** edit *****

I have found this article that asks the same questions I've asked, but more in depth and perhaps a little more eloquently.

http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/

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 and 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.

***** edit 2 *****

I've since blogged about how I set about solving this problem, available here:

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/

1
  • Yes, but what if you need to test that everything looks good in, say, 10 browsers (including different versions of each) and in 3 different OS, maybe also on mobile devices? That's not as easy as "open the page and look how it looks". Even more, you could have 3 different layouts, different sections with different styles, and you want to make sure it looks like you intended. I think too that it's impossible (for me at least), but there's always smarter people thinking in this kind of things and maybe one of them came up with a cool solution.
    – nerohc
    Sep 29, 2011 at 19:38

5 Answers 5

8

Have a look into Selenium - it's a browser-based automated testing tool. I think it's what you're looking for.

It works with all browsers (it has an IDE in Firefox for creating your test scripts, but the scripts themselves can be run in any browser)

It allows you to test the contents of the DOM, etc against the expected output at any point during the script.

2
  • Selenium is a pretty niffy tool. There's a learning curve, but it's not too steep. Oct 28, 2010 at 16:36
  • Selenium is also slow as hell (just the nature of the beast). But, combined with a javaScript system that could also poke the page, you could get something that would run very quickly. I've used selenium to load a mostly-javaScript unit test framework, and that's been great. I connected that up with a continous-integration system (Jenkins) and that has found all kinds of wonderful strange bugs without me having to always spin up my Windows VM constantly. Feb 6, 2012 at 17:36
4

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. It's using Selenium, so you might as well check for other assertions, like z-indizes, font-sizes, etc.

0
2

You can also check Nighwatch.js

Nightwatch.js is an easy to use Node.js based End-to-End (E2E) testing solution for browser based apps and websites. It uses the powerful W3C WebDriver API to perform commands and assertions on DOM elements.

1

w3 validation and Adobe Browser Labs are the best solution I can provide to this problem. Back when I was doing UI layout and design (read=cutup monkey) those were my two best friends.

There's really no way to automate testing how something looks. So, you're back to either visually inspecting everything yourself or crowdsourcing (or insourcing) a tester to do the same thing for you. It ain't fun, but it keeps us Front-end guys in business.

The good news is, many browsers share rendering engines. So, if you test correctly on Chrome, you can bet you're going to be fine in Safari. Check in Firefox and IE and you've got 90% of your problems solved. Then, determine how picky you (or your boss) wants to be and test accordingly.

1
  • Thanks for your answers. I've got all the manual cross-browser testing accounted for, but was hoping (read=clutching at straws?) that I could automate some of it.
    – ajcw
    Oct 28, 2010 at 15:44
0

These tools may not have existed when the OP posted but they are worth a mention:

CasperJS, which uses PhantomJS https://ghostinspector.com/ (for automating journeys) https://github.com/BBC-News/wraith (for screenshot comparisons)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.