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, a method for validating your app’s compatibility across multiple browsers. You’ll learn the importance of cross-browser testing for verifying your app in multiple browsers, new strategies for choosing which browsers to test, and how to use cross-browser testing tools to run cross-browser tests simultaneously and in CI.

What is cross-browser testing?

Cross-browser testing is a non-functional testing methodology that validates how applications display in different browsers. Cross-browser testing has become crucial to modern software development because different browsers interpret CSS, HTML, and JavaScript differently. That variation means that how a user sees your app depends on their browser, making cross-browser testing necessary for test coverage across your whole audience.

The rise of cross-browser testing cloud tools

In the past, to perform cross-browser tests, QAs had to manually load applications in different browsers. As you can imagine, that's a slow, tiresome process. There had to be a better way!

Cloud-based testing tools like Chromatic let you run cross-browser tests automatically. They inspect your test cases across a fleet of virtual browsers to detect browser incompatibility errors and inconsistencies with pixel-perfect precision and speeds. Some visual testing tools run these tests in parallel, meaning they execute them simultaneously. Chromatic, for example, parallelizes every single test case.

Plan your browser testing

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 to use when browser testing 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 usage varies by region. That means knowing where your users are is as important as understanding their browsing behavior.

Are most of your visitors in the US? Adding Safari and Edge to your desktop tests is a good idea: Chrome, Safari, and Edge represent over 90% of users. Alternatively, are they 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.