Sign inSign up

Cross browser testing in 2024

Test your app across multiple browsers to assert functionality and performance for all your users

loading
Joe Vaughan
@joevaugh4n

Your app might look great in Chrome but break in Safari. Why does this happen? And how can you stop it from recurring?

Today, I’ll share my top recommendations for cross browser testing, the process of validating your app’s compatibility across multiple browsers. You’ll learn to assert that your UI works in multiple browsers, discover new strategies for choosing which browsers you need to test, and find out about cross browser testing tools that can automate UI testing in different browsers.

What is cross-browser testing?

Cross-browser testing is a non-functional testing methodology that validates how applications display in different contexts. This has become crucial in modern software development because each web browser interprets and renders CSS, HTML and JavaScript differently. That means how your users experience your application changes with each browser!

The rise of cross-browser testing cloud tools

In the past, QAs had to manually load up applications in different browsers to test that they looked and worked correctly. As you can imagine, that's a slow, tiresome process. There had to be a better way.

Cross browser, cloud-based testing tools (like Chromatic) automatically run your test cases across a fleet of virtual browsers, catching browser errors and inconsistencies with pixel-perfect precision and speeds. For extra velocity, several of these tools run tests in parallel, which means they execute all tests at the same time. Chromatic parallelizes every single test case.

How to decide which browsers to test

When you’re thinking about which browsers you should focus on, you should base your decision on four chief factors:

  • Current browser market share
  • Your number of users
  • Your users' location
  • Your team's resources

1) Current browser market share

One key signal for browser popularity is browser market share analysis.

Global browser share
Global browser share (at time of publication – 10 August 2023)

Among desktop browsers, Chrome dominates with 66% of total users. Edge is the second most popular desktop browser at 14%. Safari and Firefox together account for roughly another 15% of users. All other browsers combined have much less usage.

Mobile browsers have a clearer usage distribution. In almost every market, Chrome and Safari capture 90% or more of all users. Worldwide, Chrome has about a 65% share in comparison to Safari’s 25%. For North America as a whole, Safari’s at 50% and Chrome at 44%.

What can we take from these numbers? We know that on desktop devices, there are only four key browsers to support: Chrome, Edge, Safari, and Firefox. Among those, you should focus most of your time on Chrome because it’s over twice as popular as the other browsers combined. Meanwhile, focusing on Safari and Chrome gives you the most coverage for mobile browsers.

2) User count

For small apps, you can safely predict that most visitors will use one of two browsers: desktop Chrome and mobile Safari or Chrome. By focusing your testing resources on those two browsers, you’ll cover around 75% of desktop and almost all mobile users. If you’re not planning to support mobile users, you can safely focus on Chrome.

The picture is slightly different if you’re an enterprise app with hundreds of thousands of monthly visitors. It makes sense to broaden your desktop tests to include Edge, Safari, and Firefox. Ensuring that most customers have the experience you intended is worth your team’s time.

3) Regional variance

Browser use changes by region. This means that knowing where your users are visiting from is just as important as how they’re visiting.

Are your visitors mostly in the US? Adding Safari and Edge to your desktop tests is a good idea: Chrome, Safari, and Edge represent over 90% of users. Or maybe they’re mostly in India? Almost 90% of the desktop market share is Chrome, so focusing on that one browser seems reasonable.

You can find desktop usage for wherever makes sense for your users. For instance:

  • 🇦🇺 Australia: Chrome + Safari + Edge = 95%
  • 🇨🇦 Canada: Chrome + Safari + Edge = 94%
  • 🇮🇳 India: Chrome = 87%
  • 🇯🇵 Japan: Chrome + Edge + Safari = 96%
  • 🇳🇱 Netherlands: Chrome + Safari + Edge = 94%
  • 🇸🇬 Singapore: Chrome + Safari + Edge = 94%
  • 🇰🇷 South Korea: Chrome + Edge = 93%
  • 🇺🇸 US: Chrome + Edge + Safari = 94%
  • 🇬🇧 UK: Chrome + Safari + Edge = 94%
  • 🇦🇺 Australia: Chrome + Safari + Edge = 95%
  • 🇨🇦 Canada: Chrome + Safari + Edge = 94%
  • 🇮🇳 India: Chrome = 87%
  • 🇯🇵 Japan: Chrome + Edge + Safari = 96%
  • 🇳🇱 Netherlands: Chrome + Safari + Edge = 94%
  • 🇸🇬 Singapore: Chrome + Safari + Edge = 94%
  • 🇰🇷 South Korea: Chrome + Edge = 93%
  • 🇺🇸 US: Chrome + Edge + Safari = 94%
  • 🇬🇧 UK: Chrome + Safari + Edge = 94%

4) The size of your team

The resource at your disposal decides how much time you can dedicate to browser testing. Large teams may have enough people to test in all browsers, while smaller teams must balance which subset of browsers gives the highest test coverage for their limited time.

Historically, developers had to open every browser manually to check that their UI looked right. However, the size of modern applications makes this process impossible.

Fortunately, you can use visual testing tools to automate your cross-browser UI tests. These allow you to configure tests for different browser combinations (alongside operating systems, viewports, and locales) and test at an otherwise impossible level of efficiency and consistency. 

Pulling it all together

Ultimately, your decisions break down to something like this:

Screen type

Chrome Safari Edge Firefox
Desktop users
Mobile users

minimum browsers to test, based on platform

How many users

Chrome Safari Edge Firefox
1-15K users per month
15K-250K users per month
250K+ users per month

minimum browsers to test in based on monthly visitor numbers

Location of users

Chrome Safari Edge Firefox
North America
South America
Europe
Africa
Oceania
Asia

minimum browsers to test in based on visitor location

Choosing cross browser testing tools

Chromatic is a visual testing tool developed by the creators of Storybook that lets you automate cross-browser tests for Safari, Edge, Chrome, and Firefox. It’s used by teams at LEGO, The BBC, The Guardian, monday.com, and many more, and widely considered one of the best (if not the best) visual testing tools in the marketplace today.

Chromatic anchors each browser to the latest stable version, so you’re always testing the most up-to-date iteration, and run them in a standardized environment through the cloud. All it takes to extend test coverage to different browsers is one click inside Chromatic’s settings.

Lastly, Chromatic provides all the cutting-edge features that you’d want from a modern browser testing suite:

  • Parallelized tests via the cloud
  • Multi-language testing
  • Integration with CI/CD
  • Integration with Storybook
  • Integration with E2E testing tools (like Playwright and Cypress)

Get started for free

Chromatic provides a free tier with 5,000 snapshots per month. Try it out today. Alternatively, learn more about Chromatic’s UI Test workflows or discover more about Chromatic’s visual testing.

Did this article help you?

Get free UI development guides and tutorials like this emailed to you.

4,472 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Rerun builds in one click

Retake snapshots to debug inconsistent rendering & more July updates
loading
Jarel Fryer
Product
PricingAboutJobsTerms of ServicePrivacyStatusSecurity • SOC 2Contact Sales
Chromatic
© Chroma Software Inc. Made by the maintainers of Storybook.