Visual Validation and Cross-Browser Testing

Photo by eMotion Tech on Unsplash

Visual Validation and Cross-Browser Testing

Sainath Ramanathan's photo
Sainath Ramanathan
·Mar 1, 2020·

5 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

The test automation industry is facing more challenges these days as the software development is advancing in a fast pace. A decade before, nobody would care if a software is vetted rigorously but these days the industry has pivoted its ideology of giving a least priority to the QA and has started giving more importance to it. It doesn’t stop there, as the development tools and technology has evolved it is equally important to keep testing tools equipped as well. We are already in the era of automation where tools like Selenium, Cypress, Appium etc. has made the test automation seamless. There are lots of testing tools and technologies to talk about but in this article let us stick to User Interface (UI) and Cross-Browser testing.

User Interface Testing (a.k.a) Visual Validation

UX (User Experience) has been dominating the industry since the web development has revolutionised the way the businesses happen these days. We judge a product or company by seeing their website or product page. It is important to test the UI because no matter how good your backend system is, the enduser will always look at what you produce as the output. In a nut shell, “Seeing is believing”. In the agile world where things are happening so fast, you cannot keep looking at the screens for visual glitches also due to short release cycles it is impossible to validate or check all the validation by manual effort.

One of the best tools that I found in the market for UI based validation is Applitools. I am not an ambassador of Applitools but seriously the product stands apart comparing to the rest of its competitors. I standby Applitools because it solves the problem at granular level and and it is not merely a visual comparison tool but has added more intelligence to it. Applitools is an AI based visual validation tool that compares screens by capturing a full page screenshot. It is not limited to an image but a copy of the CSS is also captured along with the screenshot in the background. The captured image along with the CSS is sent to the Eyes server (Eyes is the artificial intelligence engine that process the visual differences) which then compares the visual differences and renders the output in the form of a dashboard. The dashboard has lot of other options to tweak and get your desired output about which we shall discuss in our future article that will be completely focused on Applitools. Right now, our key take-away is that Applitools is an intelligent visual validation tool powered by artificial intelligence.

Cross-Browser Testing

We are in the world where plethora of resources are available to do a task. This prevails in the case of web browsers as well. We have Safari, Firefox, Chrome, Chromium, Edge and Opera. As of now these are the most prominent browsers. There are few other browsers as well which are slowly picking up like Brave (a DLT based browser). Since this count is increasing day by day it is impossible for us to maintain all these in a remote server or as a local instance for testing against every browser. You can’t skip these tests as you would never know which are the browsers that the users are interested to look at. Earlier, the application developers used to have a disclaimer that their application supports only in Internet Explorer, Chrome or Firefox but now being in the age of net-neutrality it is people’s choice to decide what browser to use and not to be forced to use one particular browser.

This situation demands a work-around which should be a cloud-based and a managed solution that is helpful for all the organisations which is BrowserStack and Sauce Labs. BrowserStack and Sauce Labs are equally good in terms of the service they offer. It is a cloud-based solution where you run a single test across different browsers configured in the BrowserStack or Sauce Labs. You just need to setup your test suite with the details of the host url to run your tests, browser name, version and the proxy details necessary to reach the endpoint of these providers. Voila! that’s it your job is done. Similar to Applitools, they have dashboards where you can watch your tests run and also the statistics of the tests can also be seen. It does not limit to web application tests alone, you also have mobile farms that run your mobile app tests on real-devices and not on emulators. How would it be if you have taken all the burden of managing the entire system all by yourself? You will end up in maintaining the systems rather than focusing on the results that you actually need.

Assuming you are a self-managed entity and you are interested to seek other options rather than cloud-based managed solutions, you can also opt for a docker based solution called Zalenium.

Zalenium is a container based Selenium Grid that is easy to spin and run your tests. It provides browser instances as docker images and you can quickly run your container to test in Firefox and Chrome. It also provides video recording capability. It is limited to Firefox and Chrome, however if you would like to extend your test to other browsers, it can be done by linking to Sauce Labs and BrowserStack as well.

This is a high-level overview of different tools available for visual validation and cross-browser testing. Hope you enjoyed reading, DM me for any queries.

Originally published at

Share this