Browser Compatibility Check on WordPress Sites

WordPress powers 43% of all websites and 65% of the CMS-based websites on the internet today. From personal blogs and portfolios to business and news websites and eCommerce portals of all scales, WordPress is the go-to content management solution for the internet.

Source

The reason for WordPress’ widespread adoption across verticals is its customizability. With an incredible selection of themes and plugins, you can create a custom interface with the look and functionality of your choice. With minimum effort.

But the customizability comes with a cost: themes and plugins often conflict and affect website behavior on different browsers and devices.

Why test WordPress websites for cross browser compatibility?

When you enter a site’s URL in the address bar, the browser sends a request to the server (that hosts the site’s content). The server responds with the content—an HTML file—which is rendered by the browser to display the final structure of the page.

As the web evolved, CSS and JavaScript became necessary for adding interactivity to a webpage.

That’s where the trouble begins. Different browsers went their own ways in terms of rendering CSS and JavaScript. The differences in rendering mechanisms leave developers with the responsibility of accounting for them. It’s the reason why cross browser testing is necessary today.

In the context of WordPress websites, the need for testing is two-fold:

• Component conflicts: Unless they’re a part of the same network, no two WordPress websites are the same. The theme-plugin matrix and the custom code that makes up your website is unique to you. This matrix needs to be cohesive. Components coded in isolation often break when put together. Testing your WordPress website helps make sure that any theme or plugin conflicts—especially ones that are more subtle than the White Screen of Death—are caught and fixed before the site is available to your audience.
• Browser compatibility: A developer can minimize plugin-and-theme conflicts during development by keeping an eye glued to the console, and the website can still break on a different browser. Note that the WordPress project itself is at a mature stage. The core, as well as the default themes and plugins, are largely cross-browser compatible because the project contributors take care to test them thoroughly firsthand. The same meticulous testing standards may not apply to third-party plugins and themes. If your website uses a plugin/theme that’s not cross browser compatible, your website will inherit those bugs too.

Check Browser Compatibility for Free

Browser compatibility testing for WordPress websites: Basic considerations

The goal is to make sure that content and functionality remain uniform across browsers and devices. The following features must be tested in a cross browser testing suite:

• Base Functionality: Verify that input fields, navigation, touch input for mobile devices, etc. work across browsers/devices.
• Design: Verify that the layout, and all its components, are responsive. Use this free responsive design checker to check responsive design on real devices.
• Accessibility: WordPress follows strict coding standards and guidelines, but your custom code might not. Ensure compliance with Web Content Accessibility Guidelines (WCAG), so differently-abled users can access your website.

Since page load speed matters for UX and SEO, you’ll also need to ensure that your website loads within a few seconds, especially on mobile networks with limited bandwidth.

Selecting Browsers and Devices to test on

Try to answer the question—how does your audience access your WordPress website?

If you are launching a new website, or if you don’t have enough site traffic data to answer that question, shoot for maximum reach: pick the browsers and devices to test on based on their respective market shares.

If you do have site traffic data and a dashboard to view them from, you’ll see browsers and devices your visitors use to access your site. Test on any browser/device that gets >5% share of traffic.

Note that it’s a lot easier to ensure your website’s compatibility with desktop/laptop devices than with mobile. This is because the mobile landscape is exponentially more fragmented in terms of device size, chipsets, graphics capabilities, and more—factors that affect browser rendering as well. In order to ensure your website’s compatibility with a maximum number of devices, test on the right mobile devices.

We stress the importance of testing on real devices for the simple reason that emulators are not evolved enough to give you true results. Most online cross browser testing tools (like Chrome Dev Tools and its mobile browser emulator) simulate your website’s rendering on those devices and browsers. We’ve covered why results differ when it comes to testing your site on virtual vs real devices in a previous post, so take a look.

This post focuses on BrowserStack, and how you can use it to test your WordPress website on desktop browsers and real mobile devices.

How to test WordPress sites on latest and legacy browsers

With BrowserStack, you can test your website—locally or publicly hosted—on 3000+ real browsers and devices.  Essentially, you can analyze and verify how your WordPress site performs and renders in real user conditions – real browsers (Chrome, Firefox, Safari, and more) installed on thousands of real desktop and mobile devices. 

Test WordPress Sites on Real Devices & Browsers

For manual testing of WordPress sites, use BrowserStack Live. BrowserStack’s real device cloud provides not just the latest devices, such as the iPhone 12 and GalaxyS21 as well as legacy devices, such as GalaxyS6 as well as legacy devices. Essentially, it allows users to run WordPress browser checks on a wide spectrum of devices potential users may leverage to access a website or app.

Simply sign up for free, select the device-browser-OS combination you need, and start testing.

WordPress Browser Compatibility Plugin for your website

BrowserStack provides a WordPress plugin integration for easy access to run a quick browser compatibility test. Read more about this.

Quick WordPress Integration with BrowserStack

However, manual cross browser testing is ideal for smaller, manual test cases that are easy to execute. For testing a large and complex WordPress website, we recommend automated Selenium testing via BrowserStack Automate.

Automated Testing of WordPress websites

With Automate, you can create test scripts that will automate human interactions with the website (for faster, more efficient testing). The scripts can be written in your choice of language and framework (Java, NodeJS, PHP, Python, and more).

Since you have a WordPress website, you are likely familiar with PHP and have it installed on your workstation and local server. Here’s a brief walkthrough to get an automated test running in PHP on BrowserStack:

1. To start, create a free-trial account on BrowserStack to avail 100 minutes of free, automated testing.
2. To programmatically make a call to BrowserStack’s Cloud Selenium Grid of real mobile devices and browsers, install the Selenium webdriver on your server using PHP’s package manager composer.

   php composer.phar require facebook/webdriver

3. The Automate PHP documentation shows you an interactive code snippet that looks up ‘BrowserStack’ on Google search. Let’s run this test on the Android browser on Samsung Galaxy Note 8 with Android 7.1 OS. Remember to substitute USERNAME: ACCESS_KEY with your own once you’ve logged in to BrowserStack.

   <?php
     require_once('vendor/autoload.php');
     use Facebook\WebDriver\Remote\RemoteWebDriver;
     use Facebook\WebDriver\WebDriverBy;
   
     $caps = array(
    "browserName" => "android",
    "device" => "Samsung Galaxy Note 8",
    "realMobile" => "true",
    "os_version" => "7.1"
   );
     $web_driver = RemoteWebDriver::create(
       "https://USERNAME:ACCESS_KEY@hub-cloud.browserstack.com/wd/hub",
       $caps
     );
     $web_driver->get("https://google.com");
   
     $element = $web_driver->findElement(WebDriverBy::name("q"));
     if($element) {
         $element->sendKeys("Browserstack");
         $element->submit();
     }
     print $web_driver->getTitle();
     $web_driver->quit();
   ?>
   

Once your test has run its course, you can check the results in your Automate dashboard. You can see a video of the test scenario playing out as per the code.

Run Automated WordPress Tests on Real Devices

You can create a library of test cases for your website and set it to execute automatically at every build. Enable this by integrating BrowserStack with popular Continuous Integration (CI) tools, like Travis CI and Jenkins.

The scenario above tests a publicly hosted website. For projects that are in development/staging servers, you can build a secure local tunnel to the BrowserStack cloud from your development machine. This lets you test locally-hosted projects before pushing the changes to production.

Open source projects like PhpMyAdmin integrate BrowserStack with Travis CI to test various features once the unit tests pass.

Chrome Extension or Plugin for testing WordPress sites

If you are looking for a WordPress browser compatibility plugin, look no further. For easier access to BrowserStack’s repository of real browsers and devices, users can simply install the BrowserStack plugin on their Chrome browser. Once installed, users can launch a new test session in any browser using the BrowserStack Quick Launch Extension. It sets up browsers for quick access and minimizes time spent in switching browsers. You can review changes immediately and make cross-browser testing an integral and instant part of development.

More specifically, BrowserStack also offers something akin to a WordPress Internet Explorer compatibility plugin. Our Test IE plugin allows you to preview and test websites in all versions of real Internet Explorer (IE6 – IE11) and Edge straight from Chrome browser, through BrowserStack. Install the plugin, choose the IE version you require, and initiate a test session in BrowserStack Live.

Endnote

In this tutorial, we discussed the nuances of cross browser compatibility in WordPress and proceeded to automate the process through BrowserStack.

WordPress is largely bug-free out-of-the-box. More obvious errors creep in as you add more features to the core installation. By incorporating cross browser testing in your WordPress development, you put up a line of defense between browser-specific bugs and your UX.