Cross Browser Testing With WebDriverIO [Tutorial]

Introduction to WebDriverIO automation framework

WebDriverIO is the next-generation browser and test automation framework that is preferred by JavaScript developers for performing cross browser testing. Here is the overall architecture of the WebDriverIO test automation framework:

As seen in the architecture diagram, the JavaScript code implemented by the user is sent by the WebDriverIO via NodeJS to the Services through the WebDriver Protocol. The subsequent request is then sent to the corresponding browser where appropriate actions are performed on the WebElements in the DOM.

The WebDriverIO project is available on GitHub and the overall statistics speak to the popularity of this JavaScript framework. It has more than 9.8K stars and the project has been forked more than 2.6K times on GitHub.

You can also refer to our detailed WebDriverIO JavaScript tutorial for Selenium test automation to get a quick overview of the WebDriverIO framework. It will also provide you with information related to the setting up of the WebDriverIO framework.

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

3M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from TestMu AI:

You can aslo read – WebdriverIO Interview Questions for extra insights.

Why WebDriverIO for cross browser testing

For starters, cross browser compatibility testing is not only about testing the product features on different browser combinations. It is also about testing the compatibility on different devices and platforms (or operating systems). On the whole, cross browser compatibility testing does not cater only to web browsers.

Read – Why Cross Browser Testing Is Not Only About Web Browsers

WebDriverIO framework in JavaScript provides a range of commands that let you interact with the WebElements, perform navigation with the web browser, and manage page loads more effectively. Please refer to our blog titled Browser Commands in WebDriverIO where we have covered WebDriverIO commands for Selenium web automation.

To summarize, here are the major benefits of cross browser testing on a reliable and scalable cloud-based Selenium Grid:

• Faster browser coverage
• Fast platform coverage
• Great quality of product vastly
• Platform related issues
• Unique product behaviour

How Do AI Agents Handle Cross-Browser Test Failures Now?

AI agents compare a failing browser's DOM and screenshot against a passing run, then flag the exact CSS or rendering difference instead of a generic timeout error.

• Visual-diff triage: An agent overlays a Chrome screenshot on the same test's Firefox or Safari screenshot and flags only the pixels that changed, instead of a human scanning both manually.
• Root-cause classification: An agent reads the WebDriver Protocol error alongside the DOM snapshot to separate a real cross-browser rendering bug from a flaky timing issue, the two failure types this article's Chrome and Firefox scenarios can both produce.
• Capability generation from natural language: An agent given the instruction "test this on Chrome, Firefox, and Safari" can generate the wdio.conf.js capability block covered above instead of a developer writing each combination by hand.
• Limitation: An agent still needs a real browser session, local or on a cloud Selenium Grid, to execute the test. It changes how a failure gets diagnosed, not the WebDriver Protocol call that runs it.

None of this replaces the WebDriver Protocol calls or the capability blocks covered earlier in this WebdriverIO tutorial. It only changes how fast a team spots which browser broke.

Cross browser testing with WebDriverIO on cloud Selenium Grid

One thing that you would have observed is that automated browser testing using JavaScript based frameworks require the installation of local browser drivers. This is a big bottleneck with automated browser testing performed on a local Selenium Grid.

Rather than running tests on a local Selenium Grid, you can opt for testing on a cloud-based Selenium Grid like TestMu AI. Selenium testing on the cloud (e.g. TestMu AI) provides benefits like improved scalability, reliability, faster test execution (through parallelism), improved test coverage, and detailed insights into test execution.

Once you create an account on TestMu AI, you need to make a note of the user-name and access-key from the LamdaTest profile section. You can use the TestMu AI capabilities generator to generate the capabilities for the corresponding browser & OS combination.

You can also perform parallel testing in Selenium by taking into account different browser and OS combinations on which tests have to be performed. Here is how you can create capabilities for two or more browsers in TestMu AI:

export.config = {
    // ...
    capabilities: {
        chromeBrowser: {
            capabilities: {
                browserName: 'chrome'
            }
        },
        firefoxBrowser: {
            capabilities: {
                browserName: 'firefox'
            }
        }
    }
    // ...
}

It is very easy to port an existing WebDriverIO test running on a local Selenium Grid to cloud-based Selenium Grid by TestMu AI. Let’s see how to configure it.

Open your terminal go to your project root folder, run below command to add the necessary dependencies:

npm i wdio-lambdatest-service --save-dev

On successful execution, you will see below entry in package.json file

{
    "devDependencies": {
        "wdio-lambdatest-service": "^1.0.0"
    }
}

If your website is hosted locally, then set tunnel:true in Wdio.config.js file.

// wdio.conf.js
export.config = {
    // ...
    user: process.env.LT_USERNAME,
    key: process.env.LT_ACCESS_KEY,
    services: [
        ['lambdatest', {
            tunnel: true
        }]
    ],
    // ...
};

In case you are not testing locally hosted pages (i.e. the pages are located on the server), you need to add the following JavaScript parameters in the Wdio.config.js file:

path: “/wd/hub”
user: "user_name_on_LambdaTeste",
key: "access_key_on_LambdaTest",
hostname: "hub.lambdatest.com",
port: 80,
services: ["lambdatest"],

Here is the complete Configuration file (i.e. Wdio.config.js) where we have defined the number of parallel sessions to 5. The test is conducted on two different browser & OS combination (i.e. Chrome 79.0 on Windows 10 and Safari 11.0 on macOS High Sierra).

exports.config = {
   outputDir: "absolute_path_output_dir",
   runner: "local",
   path: "/wd/hub",
   specs: ["./test/specs/**/CrossBrowserTesting.js"],
   exclude: [
       // 'path/to/excluded/files'
   ],

   maxInstances: 10,
   user: "user_name",
   key: "access_key",
   capabilities: [
       {
          
           maxInstances: 5,         
           name: "Cross browser testing - Safari-Mac", // name of the test,
           build: "CrossBrowserTesting",
           platformName: "macOS High Sierra", // macOS High Sierra & Windows 10
           browserName: "Safari",
           browserVersion: "11.0",
           video: true,
           console: true,
           visual: false,
       },
       {
           name: "Cross browser testing - Safari-Mac", // name of the test,
           build: "CrossBrowserTesting",
           platformName: "Windows 10", // macOS High Sierra & Windows 10
           browserName: "Chrome",
           browserVersion: "79.0",
           video: true,
           console: true,
           visual: false,
       },
   ],
   coloredLogs: true,
   hostname: "hub.lambdatest.com",
   port: 80,
   baseUrl: "http://the-internet.herokuapp.com/",
   waitforTimeout: 10000,
   connectionRetryTimeout: 90000,
   connectionRetryCount: 1,
  
   services: ["lambdatest"],
   // Test Code
};

Shown below is the execution snapshot on TestMu AI:

It’s a Wrap

In this part of the WebDriverIO JavaScript tutorial series, we looked at how to configure the Chrome and Firefox browsers for running WebDriverIO JavaScript tests on the respective web browsers. Using cloud-based Selenium Grid on TestMu AI, you can run tests using WebDriverIO on multiple browser & OS combinations. Accelerate the speed of cross browser tests by performing WebDriverIO testing in parallel on the cloud-based Grid. This is how you can take ultimate advantage of cross browser testing using WebDriverIO JavaScript.

Do check out the WebDriverIO Learning Hub on TestMu AI to get acquainted with the overall capabilities of WebDriverIO and how you can use those capabilities for achieving optimum test coverage.

I hope you have enjoyed reading this article that is a part of the ongoing WebDriverIO JavaScript tutorial series. Do leave a note as to how you run cross browser testing with the WebDriverIO framework…

Happy Testing!

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

3M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email