Integration of WebDriverIO with TestGrid
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:
- 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 “Codeless.”
- Click on “Test Case Writer” and then click on Versions. On the same screen, look for the “i” button in the upper right corner. Click on the “i” button icon.
- 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 = { runner: 'local', hostname: '{{your_domain}}.testgrid.io', port: 80, path: '/browserrun{port}/wd/hub', specs: [ './test/specs/**/*.js' ], exclude: [], maxInstances: 10, capabilities: [{ browserName: 'firefox', # any browser name like 'chrome' & 'firefox' 'tg:udid': '{{udid}}', 'tg:userToken': '{{your_token}}' }], logLevel: 'info', baseUrl: 'http://{{your_domain}}.testgrid.io/', waitforTimeout: 10000, connectionRetryTimeout: 120000, connectionRetryCount: 3, framework: 'mocha', reporters: ['spec'], mochaOpts: { ui: 'bdd', timeout: 60000 }, before: function (capabilities, specs) { const chai = require('chai'); global.expect = chai.expect; } };
# For Android Mobile capabilities:
export const config = { hostname: '{{your_domain}}.testgrid.io', runner: 'local', port: 80, path: '/appium_{port}/wd/hub', # get this details From the Device cloud "i" button. specs: [ './test/specs/**/*.js' ], exclude: [], maxInstances: 10, capabilities: [{ platformName: 'Android', browserName: 'Chrome', 'appium:deviceName': 'Pixel 7', 'appium:platformVersion': '14', 'appium:automationName': 'UiAutomator2', "appium:uiautomator2ServerLaunchTimeout": "90000", "appium:udid": "{{device_UDID}}", "appium:systemPort": "{{system_port}}", "tg:userToken": "{{Your_Usertoken}}" }], logLevel: 'info', bail: 0, waitforTimeout: 10000, connectionRetryTimeout: 120000, connectionRetryCount: 3, framework: 'mocha', reporters: ['spec'], mochaOpts: { ui: 'bdd', timeout: 60000 } }
# For iOS Mobile capabilities:
export const config = { hostname: '{{your_domain}}.testgrid.io', runner: 'local', port: 80, path: '/appium_{port}/wd/hub', // Get these details from the Device Cloud "i" button. specs: [ './test/specs/**/*.js' ], exclude: [], maxInstances: 10, capabilities: [{ platformName: 'iOS', browserName: 'Safari', 'appium:deviceName': 'iPhone 13 Pro', 'appium:platformVersion': '16', 'appium:automationName': 'XCUITest', "appium:wdaLocalPort": "{{localport}}", "appium:udid": "{{device_UDID}}", "tg:userToken": "{{Your_Usertoken}}" }], logLevel: 'info', bail: 0, waitforTimeout: 10000, connectionRetryTimeout: 120000, connectionRetryCount: 3, framework: 'mocha', reporters: ['spec'], mochaOpts: { ui: 'bdd', timeout: 60000 } }
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