Cross Browser Testing for WordPress Website

Posted on by

WordPress powers over 30% of all websites on the internet today. From personal blogs and portfolios to business and news websites and eCommerce portals of all scales; sites like Forbes and the New York Times are built on WordPress.

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.

The need for testing 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.

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.

That’s why you need cross browser testing for your WordPress website.

Cross browser testing for WordPress websites: Basic considerations

The goal is to make sure that content and functionality are uniform across browsers and devices. We covered what features are tested in a cross browser testing suite in a previous post. These include:

  • 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.
  • 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 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 emulator) simulate your website’s rendering on those devices and browsers.

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

Cross browser testing a WordPress website with BrowserStack

With BrowserStack, you can test your website—locally or publicly hosted—on any browser on real mobile and desktop devices. There are two products which help you test:

  • LIVE: Interactive cross browser testing and debugging
  • AUTOMATE: Automated Selenium and JS testing

Live 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 Automate.

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 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 coded.

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.

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

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.

Posted in Hosting Tutorial.