What is Cross Browser Visual Testing? Why is it important?

Testing is essential for better customer engagement and retention of the software applications. With the rise in the use of web applications, testing has become pivotal for the software cycle.

For a lean tech start-up developing a web application, it is a daunting task to ensure that their application functions efficiently on most of the users’ devices. This is exactly where the role of cross browser Visual testing is the most crucial. Let’s dive deeper.

Source

Why think cross browser?

The structure of the internet or the World Wide Web today is such that developers must keep in mind and adjust to various variables. It is because different browsers render webpages differently. Over the years, there has been a great deal of standardization and a significant variety in devices, operating systems, etc. 

However, since the specifications for the world wide web are not strictly enforced, there are variations in the interpretations of code on different browser platforms. Mainly due to the engine under the hood, which interprets dynamic parts of a web application like CSS, and JavaScript code, the outcomes have some differences, albeit small but still consequential in many cases.

And hence it becomes essential to deliver a consistent user experience across different browsers versions. Cross browser testing ensures that the website is rendered and behaves consistently across different browser device combinations. 

Source

The most widely adopted way of dealing with this challenge is to adopt a cross browser compatible approach during development and testing. In this approach, developers and testers run and test the application on as many different devices and browsers to ensure that the end user experience is seamless and consistent across different browsers.

This is important because users are now able to access web applications through different devices and browsers, given the abundance of options available. Hence, it is essential to keep the user experience seamless as they move from one device to another. 

While Cross browser compatibility has to be checked both in terms of functionality and visuals, a lot of QAs just check the cross browser functional compatibility, ignoring cross browser visual compatibility. This article explores cross browser visual testing, why is it important and how to perform it.

Run Cross Browser Tests on Real Devices

Source

How to perform effective Cross Browser Visual Testing

To implement cross browser visual testing for your application the big challenge is to set up test environments representing different browser conditions, and running your test plans on each environment. Which could be a very resource intensive task if tried to do manually.

It requires  assistive technologies and techniques that can help us achieve the results of a well designed and executed cross browser test. Here are three important pieces to the puzzle:

• Devices

Buying physical devices is not a practical solution because every year new models new companies and new versions are being launched. Also buying physical devices mean handling and managing those devices which in turn involves further resource consumption and elaborate setups. To be efficient with this part we can use real device clouds which is a recent technology helping you access real devices without having to physically acquire them.

Validate your web app’s cross-browser compliance for free with Responsive and Screenshots

• Automation

Why spend human resource on something which can be automated, as far as cross browser testing is concerned there are ways to automate parts of the workflow which can help you save cost and resources. Also automation provides opportunities to further integrate with post deployment or other QA activities.

• Cross Browser Compatibility

Another important part of the cross browser testing puzzle is the ability to switch between various browsers on a device to capture the outcomes of rendering webpages in each scenario.

• Integration with CI/CD 

Finally a Cross browser test strategy has to fit into the overall CICD workflows of a Development operation including all the testing infrastructure which has to be complemented by any additional layers of testing.

Source

Once the basics of the testing process and infrastructure are figured out, here are the other aspects to test during a cross browser examination:

• App components: first and foremost we want to see and validate whether or not all the required application components on a specific page are being rendered to the desired specification.
• Functionality: for all the components rendered on the page it is important to test whether they are also able to execute the functional goal which could be different for each component.
• Design/UX: for each component the design specification has to be implemented in a close to pixel perfect manner and testing such compliance to design standards is an important part of the visual testing process.
• Interactions: whether it is a form input, button click, or any other kind of user-app interaction, it is important to see if the application is providing the user with the right kind of guidance and feedback during the usage in the form of notifications, messages, warnings etc.
• Business goals: it is also possible to test end-to-end business workflows with the help of automated cross-browser visual testing tools which allow automation of step-by-step processes which can be used to validate critical flows.
• Browser compliance: for any application there has to be a well defined set of primary targeted browser device combinations on which the application is most likely to be used and according to such understanding the testing process should include the prospect of running the same application on as many test environments as possible including testing on all the different browsers available on the platform.

Cross Browser Visual Testing with BrowserStack Percy

Percy is a cross browser testing framework/platform powered by BrowserStack real device cloud and can be used to set up workflows for visual testing. Let us have a look at some of the important features of the platform:

Integration with popular Application Development and Testing Frameworks

It can be integrated through an application framework or a testing framework, read more about all supported integrations here. Because it provides such a wide range of possible integrations you can set up a custom workflow as per the needs of your development and testing processes.

Any test that you execute through Percy is run on the server side and is available on the dashboard for further analysis. This helps teams get consistent execution environments independent of whether the build is on a local development, test development or a pre-production environment.

User friendly dashboards

Percy dashboard and SDKs are designed with modern development practices and workflows in mind. On the dashboard you have abstractions in the following sequence: 

Account > Organization > Projects > Builds

So when it is set up properly it is easy for the managers to control the testing effort on more than one sub- projects easily. The trigger for a build could be a manual or a CI-based automated step.

Capture and analyze screens

Percy uses a custom engine to render webpages into a compiled DOM package which can be executed on each browser-device runtime environment as specified in the test configuration. 

During the rendering of screens you can capture the output using screenshot, snapshot and diffs. Here is a summary of the various features:

• Screenshots: using the Percy snapshot function you can capture images of pages or individual components on pages and compare the differences for different builds.
• Automatic Diff matching: Percy uses latest in screenshot analysis technology to provide you with the ability of automatic difference matching and visualisation on the dashboard which makes it easy to see and work on UI changes.
• Diff Sensitivity: you can define the strictness with which differences are to be evaluated by defining the diff sensitivity and control behavior accordingly.
• Responsive visual testing: it provides the ability to define multiple break points for testing the responsive behavior of application. You can set up to 10 break points between the range of 120 pixels and 2000 pixels.
• Percy specific CSS: since it is a custom process of rendering which is very close to the real device rendering but still not exactly the same thing, there could be scenarios where incident level control is required to control behavior. For that purpose there is built-in ability to specify Percy  specific CSS commands which can be used to ignore scenarios or control for desired outcomes in edge cases.

Collaborate on results

With features like team access, notifications and comments you can set up the workflow to include the responsibility structure of your team into the test execution and result delivery pipeline. Having the execution on server side accessible through a dashboard is a great advantage here because any member of the team can be included to view results from executions carried out even on developers’ computers.

The ability to integrate with slack and the possibility of having webhook integration with any workflow of your choice provides the flexibility for extending the set up to a much more broader range of possibilities.

Change requests and build approvals

On top of the many flexible collaboration features built into the platform, you also get smart change request and build approval workflows made possible with the help of features like auto approve, approval carry forward etc.

Changes can be requested at the level of screenshots and the status at the level of the build is calculated by looking at all the snapshots under a specific build.

On top of all the above mentioned features, new and exciting developments are happening constantly and the product is being improved by many advancements in the field of AI and ML. 

Extrapolating the trend going into the future, cross browser automation testing is bound to play a critical role in reducing the amount of manual human effort going into the process of visual testing.

Test on Percy for Free