Cross Browser Testing Checklist Before Going Live

The Ultimate Checklist For Cross Browser Tests Before Going Live

The checklist contains various elements that need to be tested before going live in your local environment.

Alignment of Elements in All Browsers

Make sure that the elements are in the correct place that you intend them to be in.

Verification of SSL in Various Browsers

If you have faced this error, one of the reasons can be that your website's SSL certificate doesn't support some of the browser versions. If your user try to access your website those browser versions, then they might not be able to access it at all. So, check your website's SSL certificates in all browsers before going live.

The browser in that screenshot is retired. The Internet Explorer 11 desktop application ended support on June 15, 2022, and Microsoft carries legacy sites forward only through Internet Explorer mode in Edge, supported through at least 2029. The certificate row still belongs on the checklist because browsers no longer share one trust decision. Chrome verifies certificates against its own Chrome Root Store rather than the operating system store, rolled out on Windows and macOS in Chrome 105, so trust can differ between two browsers on the same machine. Load the staging URL over HTTPS in every browser on your list and confirm no certificate interstitial appears.

Rendering of Font in Different Browsers

Who don't love beautiful fonts on their website, however they can cause blunders if they don't render properly. Rendering of fonts is highly affected by the browser in which your site is being browsed. So, you need to make sure that your fonts render the same in every web browser.

Read more on Fonts and Browser Compatibility

Compatibility of Media Elements with Diverse Browsers

Videos are the most loved form of media nowadays. Web designers and developers have been taking advantage of the fact and you can easily find either a demo video or some tutorial video running on the homepage of a website. But browser compatibility can cause you trouble if you some use unsupported media elements and that's not restricted just to videos, but to images as well. So before going live make sure that you use those elements that are supported in all browsers or you have a fallback for unsupported elements so that your users don't face this!

Understand incompatible multimedia formats and their browser fallbacks in detail in our blog.

Are Your APIs Connected in All Browsers?

API calls are also dependent upon browsers. Some browsers acknowledges API requests while others might avoid this or throw you an error. Before going live, always be sure that the APIs that you're using are connected in every browser. Because there are some browsers like Opera Mini that don't support APIs like Websocket.

Some API calls also carry conditions beyond browser support. getUserMedia() runs only in a secure context, so navigator.mediaDevices is undefined and the call throws a TypeError on any page served over plain HTTP. Confirm that your APIs are browser compatible before going live, and confirm it on the staging URL you will actually ship.

Make Sure You Validate Your CSS And HTML

Unclosed tags and invalid CSS break layout in some browsers and leave raw markup on screen in others. So, it's mandatory to make sure that the code is clean and properly validated. You can easily validate your HTML, JS, and CSS before going live on tools like W3C Markup validation service, Free Formatter or JS Formatter, W3C CSS Validation Service - W3 Jigsaw or CSS Validation Service.

Browser Compatibility issues can be found to a greater extent using these tools and you can further proceed with solving them.

Read more on Finding Cross Browser Compatibility Issues in HTML and CSS

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

After checking out all the major compatibility issues, you need to perform a round of cross browser testing in general taking of minor but important factors like:

• Alignment of elements: Are all the elements aligned the way you want them to.
• Pop Ups: Check if the pop ups are being displayed properly and are opening in all browsers.
• Alignment of checkboxes: Checkboxes can cause problems in many browsers. Make sure that your checkboxes are aligned and in proper working condition.
• Alignment and functioning of Buttons: Buttons hold a major part when it comes to CTAs or any other action so you need to be sure that they are aligned and properly working across diverse browsers.
• URLs redirection from buttons: Check the links to which the buttons are redirecting.
• Drop down Menus: Verify that the drop downs work as expected across all browsers.
• Forms and Form APIs: Make sure that the forms take in data and the data is transferred to the collecting API endpoint intact.
• Grids/Tables: Check the alignment and location of tables and grids if any across every browser.
• Sessions and cookies: If your website uses cookies, verify that the prompt is there and it works accordingly.
• Dates: Test if the date formats as decided in every browser.
• Zoom in and Zoom out functionality: Check if the zoom in and zoom out functionality works properly and doesn't break the UI when in action.
• Appearance of scroll: Check if the scroll is present on both horizontal and vertical bars and is functional.
• Media fallbacks: Flash is no longer supported by any browser, so confirm that the video, audio, and interactive content that replaced it renders in every browser on your list.
• HTML animations: Verify if your animations load across all browsers.
• Mouse hovering: Check if the mouse adjusts to the button, text box, link, and white space accordingly.
• Image alignment: Make sure that all the images are aligned and in place across different browsers.
• Alt tags: Alt-tags are again important and we need to be sure that they are in place.
• Console errors: Open the developer console in each browser and confirm the page loads with no JavaScript errors, because a script that throws in one engine can stop the rest of the page from running there.

And everything else that you can think of in every possible browser, OS, and device combination.

Three checks that this list predates now belong in every pre-launch pass. Load each page with the operating system set to dark mode and confirm your prefers-color-scheme styles keep text readable. Switch on the reduced motion setting and confirm prefers-reduced-motion stops animation without hiding content. Test login and session flows in Firefox and Safari on their own, because both block third-party cookies by default and Chrome does not.

As we can see here, there are various things to be tested in a local environment across thousands of combinations for making sure it doesn't hinder the experience of the users once the website is made live. So, we need to make sure that we test on all possible combinations to avoid further surprises. Since, many of the following tests are repetitive and time consuming, so we can make use of an online Selenium grid for automating cross browser tests. With such automation, you can avoid repetitive and time consuming tasks and automate them using a simple script.

TestMu AI also provides you an online selenium grid on which you can automate your tests on both public and local servers and test on TestMu AI cloud grid of more than 3000+ devices, browsers, browser versions, and resolution combinations. Hence, you need to make sure that you find the best cross browser testing tool and then you can perform tests on your checklist, some manually while others using automation.

Key Takeaway: The pre-launch cross browser checklist covers element alignment, SSL certificate support, font rendering, media fallbacks, API availability, and HTML and CSS validation, then adds dark mode, reduced motion, and third-party cookie checks across every browser, OS, and device combination.

Once you're done with testing this cross browser testing checklist, you're all set to go live and hit the green button. I hope you might not face the situation like my friend because you're smart enough not to repeat the same mistake.

Let us know if I missed something that should be included in the checklist in the comments section below! Till then, Happy Testing and all the best for the launch!