Keep the Web Open with Cross-Browser Testing

Cross-browser testing is crucial to keeping the Internet open and healthy. Anyone should be able to view your website on any browser or device. It’s a founding principal of the Web, and one that we take seriously here at Mozilla. But building completely cross-browser-friendly sites isn’t easy. It takes a ton of expertise — and time. That’s why we’ve partnered with two top automated testing companies, BrowerStack and Sauce Labs.

Both companies help developers test their sites across multiple browsers and devices simultaneously. That means you can spend less time testing your sites and more time making them.

Automated testing lets you run your own Selenium test scripts (written in the language of your choice) on virtual machines in the cloud. You specify the OS/browser combos and testing services automatically spool up virtual machines to match, run your tests, and return the results. They take videos and screenshots of your site throughout the testing process so you can see how your site works on different browsers, platforms, and devices. Test results are stored securely in your testing account and can be pulled into your own reports. It’s the fastest and most effective way to test your sites.

We think more developers should be testing their sites across all browsers. That’s why Mozilla partnered with and is offering some great promotions for BrowserStack and Sauce Labs.

Browser testing matters

The Web is huge. There are more than more than a billion websites and more than 3 billion active Internet users. Mobile browsing is bigger than ever — there are about 8.1 billion connected devices, and more than 24,000 different mobile device types.

Those are tremendous numbers and if you ignore even a fraction of Internet users, you will miss out page views and possible revenue.

Assuming everyone uses the same browser can detrimental. Most web developers (70%) use Chrome on desktop, but only 50% of traffic across all devices is through Chrome, and only about 62% of desktop traffic is through Chrome. When you build and test for Chrome exclusively, you’re ignoring almost half of global users. (Note that different browser share trackers use different methodologies.)

And don’t think your users will switch browsers if your site doesn’t work for them. They’re more likely to simply switch sites. According to Akamai:

• 32% of users who encounter a problem on your site are less likely to make online transactions with your company
• 35% will have a more negative perception of your company
• 45% are less likely to visit your web site again
• And more than 1 in 5 users (22%) will leave for good

Most users won’t install different browsers. Many are also locked into certain browsers by employers or public institutions (think library or university computers).

Use browser tools

Automated cross-browser testing is fantastic, but it’s not the only way to make sure your site works across browsers.

• Explore your site in multiple browsers. Watch the developer console in the developer tools for errors:
• Firefox dev tools
• Chrome dev tools
• IE/Edge dev tools
• Safari dev tools
• Opera dev tools
• Look out for browser-specific features:
• Caniuse
• MDN’s compatibility tables
• Kangax’s ECMAScript compatibility tables
• Explore coding tools that can improve cross-browser compatibility:
• Autoprefixer, CSSNext, Oldie and other PostCSS plugins make it possible to write pure, modern CSS that won’t break old browsers
• Modernizr helps you identify and handle implementation differences between browsers (use this instead of UA sniffing)
• @supports helps you build progressive enhancements into the web experience for more capable browsers
• Go deep. Learn about the web’s many features and quirks. The more you know about it the more you will love it:
• MDN
• Google Developers
• W3C Developers
• If you’ve found a bug on someone else’s site, file it at webcompat.com.

Master your craft

Web development is a skilled discipline. Take pride in what you do, hone your craft, and demonstrate your mastery of it.

• Stay current with the latest technologies, frameworks, and techniques.
• Test carefully and implement cross browser/platform apps, including fallbacks for less capable browsers. Is the experience acceptable?
• Make sure your content is accessible to people with disabilities.
• Make sure the general look and user experience of your site is pleasant and fits in with you/your client’s brand.