Is there a way to automate 'look and feel' testing of a web page? [closed]

Question

I have few resources to perform testing on many projects with hundreds of different web pages and the most tedious part is verifying the look and feel of the site is OK. Specially the layouts of HTML elements are not broken.

Is there a way to automate such testing by not developing highly sophisticated AI tools ? :)

Answer 1

Though this question is two years old, I think there's been a huge leap in the field which justifies an updated answer.

There are a number of tools which allows you to perform automated visual testing of your web/mobile application, thus saving valuable time. These tools differ in several ways:

1. Type of visual comparison: Whether it's pixel-to-pixel, threshold based or more complex algorithms.
2. Automation: some of these tools integrate with existing automation frameworks such as Selenium/Webdriver, others use their own proprietary automation frameworks.
3. Open source/commercial.

Here's a partial list of tools and their description:

1. Applitools Eyes - My personal favourite, and IMHO the best and most advanced tool out there by far. It's a commercial tool, but it also has a free plan. Since this tool is aimed to visual testing as a human would, its comparison engine does all the work for you and does not require you to define any thresholds or mark parts of the screen or anything like that. Test maintenance is done via a web application, and provides very powerful maintenance features (automatic identification of similar changes across different steps etc.) which I haven't encountered in any other tool. It has SDKs for Selenium (Java/Python/Ruby/Javascript), Appium, Protractor, and more, and even an Extension which allows you to perform tests without any coding at all.
2. WebdriverCSS - An open source tool which is based on WebdriverIO (A Selenium wrapper written in Javascript). It uses GraphicsMagick for comparing images, and you can define a threshold from which images are considered different. If you're already using WebDriverIO it's super easy to add visual checkpoints to your tests.
3. Sikuli - An open source tool with a proprietary automation framework based on the visual elements in the screen.

There are actually quite a few more tools, such as PhantomCSS, Huxley, dpxdt and more.

Answer 2

I'll add my vote to Arran's comment that while you /can/ do this, you likely should /not/ spend your valuable time on this. I base this on a lot of years working around UI automation in many different tools including Watir, WebDriver, Selenium RC, Visual Studio, and Telerik's Test Studio.

UI automation is difficult and brittle enough when you're simply trying to do functional testing. Trying to automate look and feel to validate CSS, layout positioning, image appearance, etc. is extraordinarily brittle--even the smallest difference between browsers and the smallest change to the UI will leave you spending a lot of time updating failing tests.

Yes, it's possible. However, keep your sanity by focusing your automation efforts on functionality. Leave visual checks to the tools that do it the quickest and easiest: human eyes.

UPDATE: Please do read the response from dcoder. He/she is absolutely right. There have been some significant (long overdue!) advances in the field. You need to evaluate those tools for fit.