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

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.