Browser Testing and Quality Assurance Checklist

Emily Dupree

Emily is one of our Graphic Designers. She covers topics related to the design process, branding, web design and SEO.

Browser Testing On Different Screen Sizes

Problem

Time vs. Thoroughness

With endless versions of software, operating systems, browsers and devices, it can be difficult to know where to start with browser testing.

How do you balance browser testing with budget constraints? And how do you choose which bugs to fix and which aren’t worth the effort?

This is a great article on browser testing. It suggests testing in three strategic phases to get rid of extra work. We’ve adapted this method a little and created a customizable Google spreadsheet to go along with it. You can download the spreadsheet below and use it for your own projects.

For new or redesigned websites, this 3-step approach will help catch browser/device issues without spending more time than you need to on testing.

Tools Needed

Before you start

Check Google Analytics for user data

You’ll want to look for the most popular versions of browsers, operating systems and screen resolutions. You can enter this data in the Google spreadsheet.

Use this data to create five combinations of browsers and devices. The idea is to mix the browsers, operating systems and devices so you can test the fewest combinations.

Google Analytics data in spreadsheet

Here’s a few suggestions to get you started:

  • Latest Chrome + a popular OS
  • Latest Firefox + a popular OS
  • Most popular version of Internet Explorer + a popular OS
  • Mobile Safari on an iOS phone or tablet
  • Mobile Chrome on an Android phone or tablet

We’ll use this info to help determine which browsers and devices to test at each stage. Once you enter these combinations, the spreadsheet will automatically fill in the testing checklist.

Stage 1: Testing in your own Chrome browser

For every new version or website update.

This simple testing step reveals obvious bugs that show up in even the most stable, up-to-date browsers. Use the Window Resizer extension to test responsiveness at different screen sizes.

Stage 2: Testing a couple problematic browsers

To be done mid-project.

Some browsers tend to have more bugs than others (like Internet Explorer). At this stage of testing, you want to find as many bugs as possible in the shortest amount of time. So, test the oldest, most difficult browsers first, since these are more likely to have issues. BrowserStack is a great tool that allows you to test on different devices and browsers remotely.

I’ve included a suggested list of browsers for this stage in the spreadsheet. But feel free to edit this list based on your own website’s analytics.

Stage 3: Testing more combinations of popular browsers/devices

To be done towards the end of a project.

This is the last stage of testing, and at this point you’ll need to test a wider range of browsers. Use the list of device/browser combinations you came up with at the beginning. Hopefully you’ve already found most of the bugs in Stage 2, so this stage of testing should move more quickly.

If you’d like to download the testing spreadsheet, just fill out the form below. It’s customizable and includes more detailed instructions. Please don’t hesitate to contact us if you’d like to learn more about browser testing or website design.

 

Browser Testing Checklist

Fill out this form to get your own browser testing Google spreadsheet.
  • This field is for validation purposes and should be left unchanged.
Search