Essential Tools for Testing Cross-Browser Compatibility on Your WordPress Site

If you’re not testing how your site looks and performs on different browsers, you really have no idea whether visitors to your site are viewing it as you intended.

Add to that, testing on multiple browsers on different operating systems and different devices is also a must. After all, Google Chrome on OS X isn’t quite like Google Chrome on Windows or Google Chrome on an iPhone 6S.

Of course, if you don’t have multiple browsers running multiple operating systems, testing this thoroughly isn’t possible. Luckily, there are some great tools that allow you to cross-browser test your site. In this post, we’ll look at how to test for cross-browser compatibility and some top free and premium options for carrying out tests.

Getting Started

When a site is cross-browser compatible, it means it looks and works the same on all devices, screens and browsers along with every version of these.

Before you can dive right into testing your site so it can be cross-browser compatible, there are a few things you need to find out:

• The browsing methods your visitors are using to view your site
• The most common versions of these browsing methods
• The most popular devices used globally to access sites

Ideally, you want to test every device and browser out there, but that’s incredibly difficult to do, especially if you’re the only one doing the testing. It’s still important to be as thorough as possible, but how?

The best place to start is with the methods you know your visitors are using regularly so you can make sure they don’t have issues coming back to your site.

Then, you can test out all the other browsing methods and their versions to make sure the rest of the world can access your site.

If you want to find out how exactly your visitors are viewing your site, the obvious place to start is your traffic stats, ala Google Analytics for most. So fire up Google Analytics and go to Audience > Technology > Browser & OS for a rundown of the browsers your visitors are using. For an even deeper analysis of how your users are viewing your site, click on Secondary dimension and select Device Category to see how many of your users are checking out your site with certain browser and operating system combinations.

These details are where you want to run the tests, but most importantly, start testing for the top five to 10 methods of getting to your site and go from there.

If you don’t have access to browsing statistics or you want to test even further, here’s a list of the most common browsing methods along with their most popular versions. In each category, the versions and browsing methods are listed from most popular to least popular:

• Operating Systems and desktop computers
  • Microsoft, Windows – 7, 10, XP, 8.1, 8, Vista, NT, 2000, 98
  • Apple, Mac – OS X, 10.11 El Capitan, 10.10 Yosemite, 10.9 Mavericks, 10.8 Mountain Lion, 10.7 Lion, 10.6 Snow Leopard, 10.5 Leopard, 10.4 Tiger
  • Linux – Mint, Debian, Ubuntu, openSUSE, Fedora, Mageia, Manjaro, CentOS, Arch, Elementary
• Browsers
  • Chrome – 49.0, 48.0, 45.0, 31.0, 47.0, 36.0, 38.0, 46.0, 43.0, 42.0, 29.0, 39.0, 44.0, 18.0, 32.0, 35.0, 30.0 Maxthon Edition, 50.0
  • Internet Explorer – 11.0, 8.0, 9.0, 10.0, 7.0, 6.0
  • Edge – 13, 12
  • Firefox – 44, 45, 43, 38, 42, 46, 41
  • Safari – 9.0, 9.1, 8.0, 5.0
  • Opera – 35, 36, 12.×
• Mobile Devices
  • Android – Marshmellow, KitKat, Lollipop, Jelly Bean, Gingerbread, Ice Cream Sandwich and Samsung Galaxy S3 (GT-I9300), Galaxy S5 (SM-G900F), Galaxy S4 (GT-I9505), Galaxy S4 (GT-I9500), Galaxy Grand Prime (SM-G530H), Galaxy Note 3 (SM-N9005), Galaxy Note 2 (SM-N7100), Galaxy S Duos 2 (GT-S7582), LG G3 (LG-D855)
  • iPhone and iPad – iOS 9.×, 8.×, 6.×, 5.×, 4.× and iPhone 6, iPhone 5s, iPhone 6s, iPhone 5, iPhone 6+, iPhone 5c, iPad 2G, iPad Air, iPhone 4s, iPAd Mini, iPhone 6s+, iPhone 4, iPad Air 2, iPad 4G, iPad Mini 2, iPod touch 5G, iPad 3G, iPod touch 4G, iPad Pro
  • Windows Phone – 8.1, 8, 7, 10 and Nokia Lumia 520, Nokia Lumia 630, Microsoft Lumia 535, Nokia Lumia 625, Nokia Lumia 635, Nokia Lumia 530, Nokia Lumia 920, Nokia Lumia 925, Nokia Lumia 620, Nokia Lumia 720

While this isn’t an exhaustive list by any means, it should give you a solid basis with which to start.

What Does Testing Involve?

Since cross-browser testing is all about making sure your site works in all browsers and the different versions they have, it makes sense to test popular ones like Chrome, Firefox, Internet Explorer and Safari, but it’s also important to test out your site on different mobile devices and computers.

Each device’s browser has its own rules on what kind of code is accepted and displayed just as much as any browser on its own so it’s important to test out all variations.

This is especially true for older versions over newer versions. As programming languages progress over time, new kinds of code are released for developers to use.

The new code and the functions that you can create with them are included in new versions of the different browsers, but naturally, older versions are left behind. It gets even more complicated when not all new versions of the different browsers include the programming language updates.

Perhaps just as important as knowing what to test is knowing what to look for when you’re testing. You should test to make sure your site looks and works exactly how you intend across all devices and browsers. While you’re testing, you can also check for site speed as well since many performance issues are linked to speed issues.

The most common issues to look out for are inconsistencies in the way your site looks in other browsers such as in your:

• Layout – Page elements may not load or be positioned properly.
• Navigation – Drop down navigation or links may not work.
• Text alignment – Your images and other page elements may not wrap correctly.
• Buttons – They may not send form data or link to where you set them.
• Elements – You may see various issues with other page elements such as animations not displaying or working as expected.
• SSL Certificate – You may see errors saying your site isn’t secured properly.

There may also be other anomalies that you may notice as well and knowing what kind of code is accepted across browsers helps narrow down where the issue could be rooted.

Here are a few resources for support tables which outline coding elements that are supported by the most popular browsers:

• CanIUse.com – Extensive browser support tables for HTML, CSS, Javascript and more
• MDN Web Technology for Developers – In sections such as HTML, you can view tags and see their compatibility
• W3Schools CSS3 Browser Support – Browser support for CSS3 elements and you can view compatibility for individual elements in the Reference section.

How to Test for Cross-Browser Compatibility

Before you get into tools you can use to test your site on all browsers and devices, one of the best places to begin when starting to test your site is checking your site on browsers that you can install yourself on your operating system and any devices you own.

There are also developer tools you can install or that are already included in many popular browsers. They’re built into Edge, Internet Explorer and Chrome and you can also install Firebug to use with Firefox.

In Internet Explorer, you can view your site across multiple versions without actually needing to download previous versions which may not be available any longer. You can also pinpoint what code was used on any given part of a page.

You can access the developer tools in Edge. Visit your site, right click on the page and select Inspect Element. You can also click the ellipsis icon at the top right and select F12 Developer Tools.

In the small window that pops up, click the Emulation tab and select a version of the Edge, Internet Explorer, Chrome, Firefox, Safari or Opera browsers under the User agent string drop down box.

You can also select Windows 10 Mobile under Browser profile to see how your site would look on an up-to-date Windows phone. The default is for desktop screens.

Similarly, to access the developer tools in Internet Explorer, open the browser and click the gear settings icon at the top right of the window and select F12 developer tools. Click Browser Mode in the segmented window that appears and select one of the options to see how your site looks in the version of Explorer you selected.

In Chrome, you can can’t test compatibility with multiple browser types, but you can see the code that’s used in any element on the page. Visit your site and right click on the page, then select Inspect. (Check out our guide Leveraging Chrome Developer Tools for WordPress Development for more details.)

When you hover over each line of code, the page is highlighted so you can see what would be affected if you were to change that line.

In Firefox, you can also install the Firebug add-on to get a similar tool. You can activate it by clicking the bug icon in your address bar. When the console opens, you can hover over a line of code to see the element of the page it refers to in real time.

You can also click the pointer icon in the console to hover over specific parts of the page to reveal the in-depth code related to just that page element.

On Safari and Opera browsers, you can also get the same sort of tool in the browser by visiting your site, right-clicking anywhere on the page and selecting Inspect Element. The console should open where you can view a page element’s code, line by line.

You can also use validators to check your code for any issues. Here are some great (and free!) code validators:

• W3C Markup Validation Service – Checks URLs for issues in HTML, XHTML, SMIL, MathML and more
• W3C CSS Validation Service – Checks CSS by entering a URL
• Nu HTML Checker – Checks HTML documents
• Unicorn – Unified validator for HTML, CSS, links and mobile
• JSFiddle – Validates HTML, CSS, SCSS, Javascript, JQuery and JSON
• JSLint – Finds errors in pasted Javascript or JSON
• Code Beautify Javascript Validator – Checks for Javascript syntax errors
• Code Beautify JSON Validator – Validates your JSON code and finds syntax errors
• PHP Code Checker – Syntax check (lint) and a custom check for common errors
• PiliApp PHP Code Syntax Check – Check both PHP4 and PHP5 code for syntax errors

These sites are all great for making sure your code is up to snuff, but there are also many other tools you can use to run complete tests for cross-browser compatibility.

Tools for Cross-Browser Testing

To run some tests, you could set up a virtual machine to run different browsers on simulated operating systems, but this is a time-consuming process. There are some alternatives that make cross-browser testing easier and quicker.

These free and premium tools are great for cross-browser testing. The premium tools also have free trials or demos so you can try out all of these for free before you settle on one you want to use.

• Browser Sandbox

  

  With Browser Sandbox, you can test all versions of Chrome, Firefox and Internet Explorer online. There are also multiple versions of Safari and Opera as well.

  This tool is free, but you do need to sign up for an account to run tests.

• Browsera

  

  Browsera actually compares versions side-by-side and lets you know exactly what the difference is between the two. You can test Internet Explorer, Firefox and Safari browsers. You can sign up for a free account or upgrade to the premium version for advanced error reporting.

• Browserling

  

  You can test all of the most popular browsers and their versions for free for Windows and Android OSes with Browserling. Just enter your site’s URL on the front page and you can begin testing without creating an account, but you’re placed in a queue and need to wait a few minutes until you’re able to do some testing.

  You can also sign up for a free account or upgrade to a premium version.

• DebugBar

  

  You can test your site for free with DebugBar and you can check your site on Internet Explorer versions 5.5, 6, 7, 8, 9, 10 and 11 on Windows 8 desktop, Windows 7, Vista and XP. It’s software that you can download and use for both personal and professional use.

• Browser Shots

  

  You can test your site on most versions of Firefox and Chrome as well as a few others for free, but this tool isn’t quite the same as the others on this list.

  Instead of being able to interact with the testing tool to test a live site, Browser Shots lets you select as many versions as you would like from the ones that are available. In a few minutes, screenshots are generated of your site from these different browsers and versions. Then, you can visually examine them for differences, although, it may be difficult to pinpoint exactly what’s wrong.

• Cross Browser Testing

  

  Cross Browser Testing is a premium service where you can test your site across over 900 browsers and 40 operating systems. It’s also not a service that simulates the different devices – you can test your site on the physical devices for supreme accuracy.

• SauceLabs

  

  SauceLabs is another premium service which lets you manually test your site across over 700 different combinations of browsers and operating systems. You can view your site on different browsers in a few seconds.

• BrowserStack

  

  With BowserStack, you can actually have access to physical devices, but in a simulator where you can test your site on over 700 different browsers including the latest versions of Internet Explorer, Edge, Safari, Chrome, Firefox on several kinds of Windows and OS X systems. It’s also a premium service with no queues to wait in.

• UserReplay

  

  UserReplay is a premium service that records an end user’s screen when a bug is reported so you can see exactly what went wrong and the steps leading up to it so you can make quick work of fixing the issue. It streamlines communication and eliminates the need for constant back and forth to clarify the bug that was found.

Wrapping Up

Now you’re armed with all everything you need to start cross-browser testing your WordPress site. If you want a few more tools you can use for free, check out one of our other posts Using CSS3 Media Queries for a Responsive WordPress Design.

For more on how to run different kinds of tests to make sure your site is knocking it out of the park, check out these other posts as well:

• 11 Best Tools for A/B Split Testing in WordPress
• 4 Free Plugins to Test Your WordPress Site for Compatibility Issues
•  Stress Testing Your WordPress Site So You’re Ready for Traffic Spikes
•  Quick and Reliable Bug Testing with Cloner for WordPress Multisite

Have you completed cross-browser tests before? What tools are your favorite? Did we miss some? Have you come across a stubborn bug that you were able to solve? Share your experience in the comments below.

Tags:

• browsers
• compatibility
• testing environment