The Basics of Modern Browser Testing!

About a year ago, we published this article on how to get started with browser testing in less than 2 hours. A bold statement, right?

Well, ever since a lot of things happened. New browsers appeared on the market and they got way more powerful.

So, today I’m going to show you everything you need to know about the state of art of browser testing. Plus: There’s also a free browser testing checklist for you to download.

What is modern browser testing?

Browser testing itself is known by various names. Some people might call it browser compatibility testing other refer to it as cross browser testing.

The main goal of browser testing is to ensure that a website or web application works in a given browser.

So, in order to perform modern browser testing, you need to think beyond the topic of browser tests. When it comes to modern browser testing, compatibility testing itself plays an immense role.

Types of compatibility testing

There are various types of compatibility tests. Those types include the following:

• Hardware tests
• OS tests
• Device tests
• Browser tests

Automated vs manual browser testing

When getting started with browser testing, you might wonder if you should choose an automated browser testing approach or a manual one.

You need to decide if you want to run browser tests without any human intervention (= automated browser testing) or with human intervention (=manual browser testing).

In order to decide what’s the best way for you, I’d recommend to check out this article.

Browser Testing Plan

You can’t just start testing your new prototype, website or web application in various browsers and conduct some browser tests. You need a proper plan for that.

When starting with your browser testing plan you need to answer the following questions:

• Which browsers are used by your target audience?
• Can you ensure the availability of all those browser versions?
• Which devices are needed for conducting those browser tests?

To answer these questions and put those answers in a test specification document.

How to execute browser tests

While executing browser tests with the defined test specifications, you need to pay close attention to the following areas:

• Content
• Layout
• Functionality
• Other specifications

1. Content

When testing your web application or website in various browsers you need need to ensure that your content (text, images, videos, audio) behaves as expected and defined.

• Are all images available across browsers?
• Are used fonts working for every browser version?
• Are all audio files available for every browser?
• Can the content be consumed on every browser version?

2. Layout

With various browser versions available, chances are high that certain layout elements do not behave as expected. Therefore, make sure to check the following questions.

• Is the layout consistent?
• Are all layout element behaving as expected?
• Is the (responsive) layout working in all browser versions?
• Are animations and effects running smoothly and as expected?

3. Functionality

The features and functionality of your website or your application are probably the most important things to test.

The experience your users are having will decide if those users will adapt to using your product or not. So, better make sure to take the following questions into consideration:

• Are all features useable in the targeted browser versions?
• Are all available integrations and 3rd party services running as expected?
• Are all forms and other dynamic interactions working across browsers?
• Are all interactions working equally good with touch input (e.g. from a mobile device) and mouse input (e.g. from a desktop computer)?

Browser Testing Checklist

All those mentioned criteria must be checked in every browser testing project. So, we collected all that information in this free browser testing checklist.

The best browser testing tools

When it comes to choosing the best browser testing tool for you, you need to be sure about your workflow.

As a matter of principle, there are two different approaches and workflow you can follow when conducting browser tests.

1. You simulate defined browser versions
2. You have all browser versions available locally

1. SauceLabs

Sauce Labs is one of the leaders in the modern browser testing world. It offers a feature-rich set of automated and manual testing suites.

https://saucelabs.com

2. BrowserStack

BrowserStack offers you 1000+ desktop and mobile browsers to choose from.

https://www.browserstack.com

3. Browserling

With Browserling you can emulate every possible browser version and test your application or website.

https://www.browserling.com

4. Browsershots

Browsershots is another, yet useful tool for testing the browser compatibility in various browsers.

http://browsershots.org/

There’s more than just a browser testing tool.

Those four mentioned browser testing tools are great and work fine for every modern browser testing project. However, you need to think beyond the topic of tools and make sure that you have a workflow in place for collecting and managing your user feedback.

No matter if you’re conducting the browser tests yourself or if you have outsourced it. A user feedback tool like Usersnap helps you to stay organized while running all those browser tests.