What Browsers to Test in Cross-Browser Testing

Why Cross-Browser Test in the First Place

As an application developer, you have to ensure that what you’re building is going to be accessible by your wider audience. With the emergence of a wide range of devices, each installed with its own browsing experience, your aim as a developer is to ensure you’re deliver a seamless and consist user experience across all of those devices and installed browsers. Hence why testing your application might be a good idea, to ensure that every user can carry out key functionality and there aren’t any obvious discrepancies in terms of your app’s user experience.

What Browser Versions should I be Testing?

There are a number of factors that dictate which browsers you need to support, and there are a few indicators that will help you make that decision:

1. Analytics
   If you have Google Analytics in your site, then that will offer you great insights into your audience. If your site hasn’t gone live yet, then observing analytics of other site analytics that you have access to might help. If you don’t have access to that either, then probably worth checking out StatCounter.com.
2. Government Web Standards
   Especially if you’re working in a Government entity, it is very likely that there are standards and guidelines that dictate which browsers you MUST be supporting. This would be driven by government’s initiative to ensuring that information is made available and is accessibility to the largest number of users possible. For example in New Zealand this is described in the NZ Government Web Standards Guidelines, other countries will have their own.
3. Company Guidelines
   There are times in which your company might have defined their own set of best practices. Of course this is the least desirable approach and should be abrogated by your web analytics which should dictate what those should be.

Is there a List of Available Browser Versions?

If you’ve done cross-browser testing before, then you would have probably heard of BrowserStack.com. BrowserStack is one of the leading software for carrying out cross-browser testing in the industry. And hence luckily, they have compiled a list of devices and available browsers to ensure you have good coverage — https://www.browserstack.com/list-of-browsers-and-platforms/live.

Is there a Way to Share Target Browsers with Different Front-End Tools?

Luckily there is Browserslist, which pretty much is a configuration that you add that’s supported by popular packages like — Autoprefixer, Babel, postcss-preset-env, eslint-plugin-compat, stylelint-no-unsupported-browser-features, postcss-normalize, and obsolete-webpack-plugin.

Is there a Way to Automagically Inject Vendor-Specific CSS to Ensure Better Cross-Browser Support?

Luckily there is Autoprefixer which does exactly that. It basically takes your pre-processed CSS (E.g. Sass CSS), and adds the appropriate vendor-prefixed CSS rules so that you don’t have to. See example generated CSS below:

[BEFORE]

.grid-container {
  display: grid;
  grid-template-columns: 1fr minmax(17rem, 17rem);
  grid-template-rows: 1fr;
  grid-template-areas: "left-block right-block";
}

[AFTER]

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr minmax(17rem, 17rem);
  grid-template-columns: 1fr minmax(17rem, 17rem);
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "left-block right-block";
}