Integration of WebDriverIO with TestGrid

You are here:
< All Topics

Overview 

Integration of WebDriverIO V7 (LTS) and V8 with TestGrid Automation testing of business applications built on various platforms is critical to delivering high-quality software in ever-shorter timeframes. Selenium testing has always been the first choice for automation testing of web applications. When conducted in tandem with Webdriver IO integration, one can increase the scope of Selenium tests from only web platforms to native Android and iOS devices as well.

Webdriver IO offers third-party integrations that make testing and debugging a lot more efficient. It’s easy to write scripts, and the robust architecture that is based on RESTful services makes it a good choice for automation testing of applications on native Android and iOS devices.

What is WebdriverIO?

Webdriver IO is an open-source testing automation framework written in JavaScript and running on NodeJS. It is particularly useful for testing web applications and native mobile applications for iOS-enabled devices. Its support for both behavior-driven development (BDD) and test-driven development (TDD) makes it a highly preferred choice for automation testers.

 

  • How to use TestGrid Plateform with Webdriver IO for any automation testing of local code projects:

Step 1: Setting Up a WebdriverIO Local Project.

Before exploring how to write WebdriverIO tests, let’s understand how to set up WebdriverIO. First of all, the prerequisites mentioned below have to be met. For more information on how it’s been worked on and set up, please refer to the official documents. Getting Started | WebdriverIO

 

Prerequisites for WebdriverIO:

  1. Install NodeJS – To check if NodeJS and npm are correctly installed, enter the following commands:
$ node -v
$ npm -v

 

2. Install WebdriverIO using npm by entering the following command:

npm install webdriverio

 

3. Install Selenium Server Utility using npm by entering the following command:

npm install -g selenium-standalone

 

  • To configure your webdriverIO automation in your local system, follow the procedures below.

 

Step 2: Setting up the WebdriverIO for the first test.

  • Create the project workspace by entering the following commands:
$ mkdir WebdriverioTestProject
$ cd WebdriverioTestProject

 

  • Initialize package.json by entering the following command:
npm init -y

 

  • Install WebdriverIO CLI (Command Line Interface) by entering the following command:
npm install @wdio/cli

 

  • Create a WebdriverIO config file by entering the following command: This helps configure various WebdriverIO packages automatically:
$ npx wdio config

 

Users can configure themselves by choosing from the given options as per their requirements. This allows them to choose where to launch the tests, the location of the automation back-end, the framework, the location of test specs, the reporter, and whether to run the WebdriverIO commands synchronously or asynchronously.

 

  • Create the test specs folder where all the tests can be kept by entering the command mentioned below:
mkdir -p ./test/specs

 

  • Create the test script file where the automation test script is written:
touch ./test/specs/webdriverioTestScript.js

 

Once your project is set up, open it in any IDE and navigate to the wdio.conf.js file, where you may update the appropriate capabilities steps.

Step 3: Use the following desired capabilities in the WebDriverIO projects to use our testgrid real device cloud.

  • Login with TestGrid credentials and go to the Devices Cloud option tab.

 

 

  • Once the device cloud screen appears, you can find a number of devices and browsers there.
  • Now, choose the browser or devices on which you want to run your local code.

  • Select any iOS or Android device or browser on which you want to run it. You can click on the “i” button. You will find the required device application capabilities here.

     

     

Step 4: Determine the user’s token capabilities.

  • Go to the Dashboard and then click on the Created “Test Runs Application”. After that, click on “Test Case Writer” and then click on “Versions.” On the same screen, look for the “i” button in the upper right corner.

 

 

 

 

  • Go to your project’s wdio.conf.js file and add the correct capabilities in the same format to your desired capability section code snippet. An example of a wdio.conf.js file is shown below.

 

# For Web capabilities:

exports.config = {
    specs: [
      "test/spec/**"
    ],
  
    // Update the hostname and port to your remote Selenium Grid details
    hostname: '{Your_Domain_Name}.testgrid.io', 
    port: 35511, 4444 or the appropriate port
    path: '/wd/hub/',
    protocol: 'http',
    
    capabilities: [
      {
        browserName: 'chrome',
        "tg:userToken": '<Your_User_Token>',
        "tg:udid": '101'
        }
    ],
    logLevel: "warn",
    coloredLogs: true,
    framework: "mocha",
    waitforTimeout: 40000,
    mochaOpts: {
      ui: "bdd",
      timeout: 400000
    }
  };

 

# For Android Mobile capabilities:

exports.config = {
    specs: [
      "test/spec/**"
    ],
  
    // Update the hostname and port to your remote Selenium Grid details
    hostname: '{Your_Domain_Name}.testgrid.io', 
    port: 4444, // 4444 or the appropriate port as given in the testgrid
    path: '/wd/hub/',
    protocol: 'http',
    
    // Update the hostname and port to your Appium server details
    hostname: '{Your_Domain_Name}.testgrid.io', // or 'localhost' if Appium is running on the same machine
    port: 36005, // Default port for Appium
    path: '/wd/hub/',
    protocol: 'http',

    capabilities: [
        {
        // Android
        'appium:platformName': 'Android',
        'appium:platformVersion': '13',
        'appium:deviceName': 'Samsung Galaxy S20',
        'appium:automationName': 'UiAutomator2',
        'appium:udid': '<UDID>',
        'appium:systemPort': 4001,
        'tg:userToken': '<Your_User_Token>'
        }
        
    ],
    logLevel: "warn",
    coloredLogs: true,
    framework: "mocha",
    waitforTimeout: 40000,
    mochaOpts: {
      ui: "bdd",
      timeout: 400000
    }
  };

 

# For iOS Mobile capabilities:

exports.config = {
    specs: [
      "test/spec/**"
    ],
  
    // Update the hostname and port to your remote Selenium Grid details
    hostname: '{Your_Domain_Name}.testgrid.io', 
    port: 4444, // 4444 or the appropriate port as given in the testgrid
    path: '/wd/hub/',
    protocol: 'http',
    
    // Update the hostname and port to your Appium server details
    hostname: '{Your_Domain_Name}.testgrid.io', // or 'localhost' if Appium is running on the same machine
    port: 36005, // Default port for Appium
    path: '/wd/hub/',
    protocol: 'http',

    capabilities: [
        {
        'appium:platformName': 'iOS',
        'appium:platformVersion': '16',
        'appium:deviceName': 'iPhone 13 Pro',
        'appium:udid': '<UDID>',
        'browserName': 'safari', // Open for Safari only
        'appium:automationName': 'XCUITest',
        'appium:wdaLocalPort': '3005',
        'tg:userToken': '<Your_User_Token>'
        }
        
    ],
    logLevel: "warn",
    coloredLogs: true,
    framework: "mocha",
    waitforTimeout: 40000,
    mochaOpts: {
      ui: "bdd",
      timeout: 400000
    }
  };

 

 

Step 5: After you have finished editing your desired capability in your local Webdriver project, run your code.

# Ex: Command.

npx wdio wdio.conf.js

 

 

As simple as that! Happy Testing 😇

Table of Contents