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

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 4 years ago.

Improve this 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

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.

Answer 2

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 3

There is a YouTube video with a great approach for the problem: The Secret to Safe Continuous Deployment from Google Developers Live. In the video Breett Slatkin teach us how to use visual diffs to make 'look and feel' testing.

I hope this can help you.

Answer 4

You can do this although it is more trouble than it is worth:

Write a script to test that the width/ height/ xy position of each element is equal to the same as some defined values for elements.

Answer 5

i would also second the opinion that UI automation for layouts image appearances logos , for e.g .i have a lot of such cases where particular ui elements displayed based on login type etc but the investment is tedious and change can be counterproductive

Answer 6

Hi To automate web browser you can use selenium (http://seleniumhq.org/) e.g to seee where your users click etc... To validate html you can find a validator that accepts a batch of pages and run them all through validation... like http://www.htmlhelp.com/tools/validator/ or something similar

Hope that helps

Answer 7

Selenium can be used to check the look of the site..

Use Verify, Assert commands to test this

Also, QTP can be used for the same.

Answer 8

Why don't you try image comparison, try capturing screen shot and comparing it to archived images. C# - Capture screenshot of active window