Cross-browser testing for 2023

Joe — Thu, 10 Aug 2023 13:14:55 +0000

Browser-specific bugs are inevitable. Each browser uses a different rendering engine, which means the UI can work in one browser and break in another. At the same time, manually testing multiple browsers is impractical when you're reviewing thousands of variations.

In this post, learn about the landscape of cross-browser testing in 2023. Discover which browsers you should be testing—and in which situations. Plus, we’ll highlight the scenarios where less-popular browsers can be omitted, and delve into the question: can you get away with testing in one browser only? Spoiler: yes you can!

Which browsers should you test?

To determine which browsers your app should support, there are four main factors you need to consider:

📊 The popularity of each browser
👩‍💻 Your app’s number of users
🌏 The location of your users
👯 The size of your team

Popularity of each browser

The most accurate browser usage stats are the ones collected on your users using your analytics tools. But that’s not always an option, because, for instance, many users understandably block analytics tools and tracking code or simply because your project is new. So research like browser market share analysis is essential.

Desktop browser share shows Chrome dominating 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 are used much less from there.

Mobile browser share has a clearer usage distribution. In almost every market, Chrome and Safari together constitute 90% or more of all users. Worldwide, Chrome has about a 65% share 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, there are only four key browsers to support: Chrome, Edge, Safari, and Firefox. And among those, you should focus most of your time on Chrome because it’s over twice as popular as the other browsers combined. For mobile browsers, focusing on Safari and Chrome gives you the most coverage.

How many users do you have?

Half of all sites get fewer than 15,000 monthly visitors according to a recent Hubspot survey. This includes early startups, small marketing sites, and side projects.

For modest apps, we know the majority of users are in one of two browsers: desktop Chrome and either mobile Safari or Chrome. So focusing tests on those two browsers will cover about 75% of desktop users and almost all mobile users. If you’re not planning to support mobile users, you can safely focus on Chrome.

What if you’re an enterprise app, with many thousands or millions of visitors each month? Since your users are a larger, more diverse group, you should expect the same of their browsers. It makes sense to broaden your desktop tests to include Edge, Safari, and Firefox. Say you have 500,000 users each month—even Firefox at 6% market share still represents over 30,000 of your visitors. Ensuring that many customers are having the experience you want them to have is probably worth your team’s time testing in multiple browsers.

If you have a medium-size app, your browser testing strategy is less obvious. We established that desktop Chrome and mobile Safari and Chrome give you a majority of coverage. But knowing what other browsers to support requires more information we’ll get to below.

Where do your users live?

Browser share varies from region to region. Knowing where your users are visiting from is just as important as how they’re visiting. Even if you’re not absolutely sure who or where your users are, you can still make some good assumptions based on what you do know.

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%

Your team’s size

Team size affects how much time you can actually dedicate to cross browser testing. Large teams might have enough people to test in all browsers. While smaller teams need to balance which subset of browsers give the highest test coverage for their limited time. But when it comes to supporting your users, it’s clear that every team needs to test in multiple browsers.

“Let’s just test these breakpoints one more time…”

Before visual testing tools like Chromatic, developers would open each browser manually to check the UI “looked right.” But apps have so many UI variations that confirming every one by hand is impractical. This is why we recommend automating your cross-browser UI tests for every team.

Offloading the tedious parts of development to machines is always a win. Every time you push code, Chromatic automatically tests every possible state of your UI in a fleet of cloud browsers simultaneously. If Chromatic detects a bug, you’re notified of where it is, what changed, and in which browser.

With automated tests, you can focus on building a better product while also getting higher confidence than if you’d tested by hand.

Pulling it all together

My goal is to help you figure out which browsers make sense to test in by considering factors like browser market share, how many users, where users live, and your team size. This allows you to focus your efforts where it matters most.

Which browsers to test in depends on several factors that are unique to your app. Your decisions ultimately break down to something like this:

Screen type

	Chrome	Safari	Edge	Firefox
Desktop users	✅
Mobile users	✅	✅

How many users

	Chrome	Safari	Edge	Firefox
1-15K users per month	✅
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)

1-click cross browser testing with Chromatic

Chromatic is a visual testing tool that supports Safari, Edge, Chrome, and Firefox. Each browser is anchored to the latest stable version and runs in a standardized cloud environment. You can extend test coverage across browsers in one click.

Find out more about enabling multiple browsers in Chromatic 👉

// Detect dark theme var iframe = document.getElementById('tweet-1689606322357145600-261'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1689606322357145600&theme=dark" }

Thanks for reading! I'm staff at Chromatic and the Community Manager for Storybook. Follow me for updates on frontend dev, component-driven development and testing 😎

DEV Community: Joe