Over a million developers have joined DZone.

34 Ways to Save Time on Manual Cross Browser Testing, Part 3: Methods 21-34

DZone's Guide to

34 Ways to Save Time on Manual Cross Browser Testing, Part 3: Methods 21-34

We take a look at web application testing and development best practices to keep in mind to ensure cross-browser compatibility.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Welcome back! If you missed Part 2, you can check it out here

21. Study the Browser Landscape for the Target Markets

In our last article, we discussed the importance of testing on browsers that really matter, i.e. browsers that are more prevalent. Hence, before you start designing and coding your website/web app, it is important to have a look at resources like CanIUse which outlines features that are supported on different browsers. For example, you can check whether CSS Grid Layout would work on Safari or not. It is a good starting point to know your target audience and develop features that keep your target audience in mind.

You need to make a call about the supported browsers (and their respective versions) and prioritize the features development and testing according to those findings.

22. Utilize Simulators and Emulators

Your source code could execute perfectly fine when it is tested as an ‘independent module,’ but its thorough test occurs when it is tested as an end product and in varied conditions (e.g. latest browser, unsupported browser, etc.). It requires heavy investment to have a lab which can house all the products on which testing can be performed; hence it is a non-viable option.

This is where cross-browser testing can come to your rescue. Alternatively, you also have the option to use VMs (Virtual Machines) where you can install specific browser versions. From a scalability and reliability point of view, cloud-based testing is a preferable option. This will help you realize how your website will be accessed from numerous devices.

23. Deploy a Continuous Integration Model

Continuous Integration is a dev process where a build is triggered as soon as a developer pushes code. You can also integrate testing in the continuous integration process, in which case the module test and full-functionality test would also be triggered once the build is successful. Such a process ensures that your code works as per the intended functionality in different scenarios.

Many large-scale organizations use Jenkins, a leading open-source automation server that provides a number of plugins for build, deployment, and automation.

24. Testing Against a Specification

What if you could automate layout tests across different browsers as soon as you come up with the layout specs? This is possible by using a framework like the Galen Framework, through which you verify relative positioning of the elements in a layout.

The Galen Framework is a great resource that comes in handy when you want your website/web app to adhere to principles of responsive design. By making use of such a framework, you can unearth design issues at a very early stage of product development.

25. Devs Working Hand-In-Hand With Testers

In one of our earlier points, we discussed the importance of having ‘proper communication’ between the developers and the testers. Developers should also be actively involved in the end-to-end testing phase and suggest test cases to their fellow testers (in case they missed some test cases).

Similar to the concept of pair programming, developers can pair with testers (who would be responsible for testing their functionalities) and create an environment that is more conducive to learning.

26. Keep Interactions as Simple as Possible

As an end-user, you want the product that is being developed to be user-friendly and easy to use. Adding too many components to a web page can lead to a confusing design, hence you should add design features that do not add complexity to the product.

There could be scenarios where a race condition is encountered in the source code, i.e. an async operation where the output is largely dependent on the timing of events. Race conditions or deadlock situations are common in web development environments where a number of requests are being processed and concurrency is not being handled in the code. In order to avoid such race conditions, you can make use of the async utility module for JavaScript that is instrumental for coordinating async requests in your website/web app.

27. Use a Testing Framework (Wherever Possible)

As a web developer, you should be aware of the pros and cons of using a CSS framework like Bootstrap. Once you are aware of the framework in detail, you should decide whether utilizing the framework can speed up the cross-browser testing process.

It is recommended that you consult with other teams who have used Bootstrap or other CSS frameworks so that you can incorporate those learnings into your project.

28. Simplicity in Design

In one of our earlier points, we touched upon the importance of keeping interactions simple and adhering to responsive design principles. The same thumb rule also applies to product development. You should keep the ‘design’ simple, yet effective, and ensure that the design does not confuse the end-users. You should always design keeping the end user’s perspective in mind.

29. Consistency in Content

You have probably come across many scenarios where content on a web page looks perfect in the portrait mode but looks messed up in the landscape mode (or vice-versa). This is called 'content variation' and it is critical to maintaining consistency in the test content.

You can make use of the Faker JavaScript library in order to produce fake data so that you do not have to go through the pain of coming up with (consistent) content for testing the functionalities.

30. Capturing Screenshots With Automation

‘Screen Grab’ functionality can be used for verification of the rendered output, an important part of the Image Regression test. The whole methodology is very simple – a screen grab is taken during the execution of a particular functionality and image diff algorithms are used to verify the difference between the quality of the screen grab and the expected output.

31. Comparing Screenshots With Automation

Now that you have captured bulk screenshots over various configurations, it is time to compare and notice the UI deviations. However, comparing an anchor image with other images by scrolling all the way to the bottom of the page for numerous pages can be a very time-consuming and faulty process. Kudos to cross-browser testing tools who have made the task far easier and quicker. 

32. In-House Testing

In a few earlier sections, we touched upon the importance of having efficient and experienced testers who can unearth bugs. In many scenarios, the turnaround time involved in reporting bugs can increase in case there is a lack of communication between different teams involved in product development and product testing. This may result in project delays as well.

Hence, many organizations (irrespective of their size) are now looking for in-house testing teams so that there is better communication and a smaller turnaround time.

33. Focus on Accessibility Testing

If your product also appeals to people with disabilities, e.g. colour blindness, hearing impairments, etc., it is recommended that the test specification covers test cases that cater to ‘accessibility testing’ as well. Testers who would test the product from an ‘accessibility perspective’ should have clear knowledge about the test cases so that even corner test-cases can be verified.

34. Early Focus on Features Related to Localization and User-Experience

Manual testing is apt for verification of features that are tightly coupled with the user experience. The early focus should be laid on user-experience testing and the same should continue over the different phases of product testing. Even though automated testing saves time and effort, it can never be considered a replacement of manual testing.

If your product has localization features, e.g. website content is displayed in the Mandarin language for Chinese customers, it is critical that these features are tested once the product reaches a certain stage of maturity. If those issues are unearthed later, it would become a burden on the product and development teams.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

web dev ,cross-browser compatability ,cross-browser testing ,cross-browser applications

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}