The list of browsers available and being used is almost endless, so making sure that all applications and websites are compatible with these browsers is becoming the need of the hour. Though the extent and viability of testing performed on multiple browsers might vary, reviewing the site on different browsers cannot be avoided. Cross browser testing is undertaken to ensure the application will work flawlessly across all the different types of browsers.

Cross browser testing strategy

Cross Browser Testing has become a necessity and is now considered as part of the normal QA cycle. Like all other testing types, cross browser testing is important, and there are several tools available that can help with the job of testing.

This article offers a few quick tips on how to create a cross browser testing strategy that can help you to be more efficient.

1. Who are the Target Audience?

Although we are aware of the almost limitless number of available browsers and devices being used by people around the world, planning to run cross browser tests on all browsers, and versions may be neither feasible or practical. With this knowledge, understanding who the target users and their region will be, becomes a very important aspect for cross browser test planning.  Browser choice will vary person to person, but for the purposes of QA, a decision must be taken to identify the most commonly used browsers and devices for that region. Often, end users are tied to a specific browser due to company restrictions. Irrespective of the browser used, the ultimate goal must be for the application to render correctly on all popular browsers. Say, an e-commerce website running in the United States may have more customers using macOS and Safari, whereas some countries still have their primary customer base using Windows and Chrome. The list of the most frequently used browsers, operating systems, and devices is usually shared with the project team during the requirement discovery phase, therefore the QA team needs to be aware of this list to come up with a more comprehensive cross browser test plan. If the data is unavailable, Google Analytics can be used to extract this information.

2. Know When to Test

We often hear the statement, “Start QA as early as possible,” because bugs found at later stages can be costly to fix. Although this is true with functional testing, when it comes to testing on multiple browsers, the testing must be performed when the system is stable, which means that at least 50% of the functional tests passed. QA of an unstable application on different browsers and devices may be time-consuming and will not deliver usable results, making it difficult to identify if issues occur due to a functional bug or the browser. So, the objective must be to begin by testing on a primary browser, and once QA feels comfortable with the build and release, plan to extend testing to other browsers and devices, which will help with isolating browser related issues, as well as requiring less effort.

3. Know What to Test

Running full tests on all planned browsers and devices is always is the aim, but it’s not always achievable because teams are often hindered by budget or time limitations. In such circumstances, the scope for cross browser testing will need to be redefined. To do so, it is imperative to identify essential areas that will have a greater impact when viewed on different browsers. Below are some of the high impact cross browser related elements to include.

  • Alignment of Checkboxes, Buttons and Error Messages – Overlapping buttons, misaligned checkboxes, and the partial display of words indicate some of the known browser-related bugs.
  • Rendering of Videos and Images – Many a time, we see the error message “Unsupported file format,” or issues like “This file format is not supported in this version of the browser,” so don’t miss checking that images and videos can be loaded on different browsers. As a tester, be sure to verify that the application does not display any types of unsupported errors.
  • Dropdown menus and their values – The display of dropdowns varies from browser to browser, so include checks to expand and view the details of all dropdown menus.
  • Zoom in and Zoom Out Feature – The ability to zoom in or zoom out any image or text must work and respond adequately, irrespective of the browser. If this is not tested, it may cause user experience issues.
  • Display of fonts  – How fonts are rendered depends a lot on the browser. Websites sometimes use new fonts which aren’t supported by some of the browsers, so it’s vital to check that the browser displays all text correctly.
  • Display of Popup/Modal boxes – One of the most common bugs noticed by almost all website projects is “Popup is not displayed,” and the resolution provided requires either clearing the cache, restarting the browser or checking on a different browser. Thus, be sure that verifying the display of popup is included as a check in the testing plan for cross browser testing.

Conclusion

To summarize, the final scope and extent of testing required must depend on the type of application under test. For instance, an intranet site may not need a very detailed cross browser review since a closed group may use it on a single browser, but an online news portal will be broader testing because it is accessed by millions of people everyday.