Cross-Browser Testing Checklist Before Going Live

DZone 's Guide to

Cross-Browser Testing Checklist Before Going Live

This checklist will help you make sure your website has the performance and usability you need before going live with cross-browser testing.

· Performance Zone ·
Free Resource

When someone develops a website, going live is like a dream come true. I have also seen one of my friends so excited as he was just about to launch his website. When he finally hit the green button, he suddenly noticed an unusual trend. After going into the details, he found out that the website had a very high bounce rate on mobile devices. Thanks to Google Analytics, he was able to figure that out.

The website was unbelievable on mobile devices — all the elements left their places and the logo was not even fit to the screen. That day taught him a lesson, and he passed it onto me: Go through a checklist for cross-browser testing before going live.

Cross-browser testing is necessary in this digital world where everyone is browsing a website on a different platform, OS, and browser, and you can’t even think of that beforehand. Formulating a perfect cross-browser testing strategy might help you in that, but sometimes, even after that, you need to be prepared for unwelcome bugs. A proper checklist might help you avoid them or figure them out before anyone else does.

Using the Cross-Browser Testing Checklist

  1. Before going through the checklist, you need to make sure that you know how to perform cross-browser testing.
  2. If you are going to perform cross-browser testing, you must know what browsers and devices are you going to test on. So, formulate a proper cross-browser testing strategy.
  3. When done with the cross-browser testing strategy, make sure you can access your local website on a cross-browser testing tool. Some tools, like LambdaTest, provide the flexibility to connect your locally hosted websites or web apps to test on the cloud for cross-browser testing using an SSH tunnel feature. So, decide on your perfect cross-browser testing tool.
  4. Keep mobile devices handy or set up emulators or simulators. If you want to avoid that, use a platform that can provide you with all the devices.

Once done with the prerequisites, go through the checklist.

The Ultimate Checklist for Cross-Browser Tests Before Going Live

1. Alignment of Elements in All Browsers

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

2. Verification of SSL in Various Browsers

SSL certificate error in Windows-XP-IE-8

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 tries to access your website from 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.

3. Rendering of Fonts in Different Browsers

Who doesn't love beautiful fonts on their website? However, they can cause errors 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.

4. 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 that fact and you can easily find either a demo video or tutorial video running on the homepage of a website. But, browser compatibility can cause you trouble if you use unsupported media elements, and that’s not restricted just to videos, but to images as well. Before going live, make sure that the elements you use are supported in all browsers, or you have a fallback for unsupported elements so that your users don’t face this!

unsupported video format

  Understand Multimedia compatibility with Different Browsers in detail in our blog.

5. Are Your APIs Connected in All Browsers?

API calls are also dependent upon browsers. Some browsers acknowledge 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.

Also, some API call methods like getUserMedia/Stream will throw you an error on Opera Mini, iOS Safari 10.3, and IE 11, so you need to be sure that your APIs are browser compatible before going live. Otherwise, when you are on the public server, your users might be unconnected to the world.

6. Make Sure You Validate Your CSS And HTML

Tags left open can be a nightmare for developers and horrifying for the users if they see the code live on screen. It’s mandatory to make sure that the code is clean and properly validated. W3schools have a soft corner for the same. You can easily validate your HTML, JS, and CSS before going live with tools like W3C Markup validation service, Free Formatter, 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.

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

  • Alignment of elements: Are all the elements aligned the way you want them?
  • 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.
  • URL 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 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 are 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.
  • Flash: Make sure that Flash-supported videos, animations, RIAs, and applications work across browsers.
  • HTML animations: Verify that 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 images are aligned and in place across different browsers.
  • Alt tags: Alt-tags are important and we need to be sure that they are in place.

You might need a cross-browser testing tool which can help you in performing cross-browser testing locally.

Once you’re done performing this cross-browser testing checklist, you’re all set to go live and hit the green button. I hope you don't face a 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!

Until then, happy testing and all the best for the launch!

cross browser testing, performance, testing, tutorial

Published at DZone with permission of Deeksha Agarwal . See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}