WebdriverIO Integration with LambdaTest
WebdriverIO is a custom implementation for selenium's W3C webdriver API. It is written in Javascript and packaged into 'npm' and runs on Node.js.
- Download Visual Studio (IDE) for your operating system.
- Node.js and Package Manager (npm) : Install Node.js from their official website Or Install Node.js using command line. Go to the terminal or command prompt & run the below command.
$ install node
To verify the node version (Node version < 15)
$ node -v
- Install Selenium Dependencies
npm install selenium-webdriver
- LambdaTest Authentication Credentials: Make sure you have your LambdaTest credentials with you to run test automation scripts with Jest on LambdaTest Selenium Grid. You can obtain these credentials from the LambdaTest Automation Dashboard or through LambdaTest Profile.
Set LambdaTest Username and Access Key in environment variables.
-
For Linux/macOS:
export LT_USERNAME="YOUR_USERNAME" export LT_ACCESS_KEY="YOUR ACCESS KEY" -
For Windows:
set LT_USERNAME="YOUR_USERNAME" set LT_ACCESS_KEY="YOUR ACCESS KEY"
- Ensure that you have Webdriverio installed in your system, you can install it using the below command through npm.
$ npm install webdriverio
Select the button below to try this demo in Gitpod
After the gitpod session launches, navigate to the terminal and run the following commands to save your LambdaTest Credentials to gitpod as environment variables:
eval $(gp env -e LT_USERNAME=******) eval $(gp env -e LT_ACCESS_KEY=******)Click the following link if you're unsure how to access your LambdaTest credentials. Also, if you start a new terminal in gitpod, you have to run the following command to reset envrionment variables:
eval $(gp env -e)For more information consult the gitpod documentation
Step 1 : After installation of the Visual Studio IDE, create a folder in your local system to save all the projects.
Step 2 : Install the below extensions for JavaScript from ‘Extensions’ in VScode Editor.
- Code Runner
- JavaScript( ES6) code snippet
- ES Lint
Step 3 : Press ‘Ctrl+Shift+P’ and search for git:clone. Paste the URL of this repositoryhttps://github.com/LambdaTest/webdriverio-selenium-sample.git to clone.
Step 4 : Press ENTER and save the WebdriverIO project in the above created folder.
Step 5: Create a project directory named webdriverio-selenium-sample directory in the VS code (IDE).
Step 6: Initialize your project by hitting the command npm init. This will create a package.json file in an interactive way, which will contain all our required project configurations. It will be required to execute our test script. Here is that package.json.
{
"name": "webdriverio-lambdatest",
"version": "0.1.0",
"readme": "WendriverIO Integration with [LambdaTest](https://www.lambdatest.com)",
"description": "Selenium examples for WebdriverIO and LambdaTest Selenium Grid",
"scripts": {
"test": "npm run single && npm run parallel && npm run multiple",
"single": "./node_modules/.bin/wdio conf/single.conf.js",
"parallel": "./node_modules/.bin/wdio conf/parallel.conf.js",
"multiple": "./node_modules/.bin/wdio conf/multiple.conf.js",
"integration": "./node_modules/.bin/wdio conf/integration.conf.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/lambdatest/webdriverio-selenium-sample.git"
},
"keywords": [
"webdriverio",
"lambdatest",
"automation",
"selenium",
"tests"
],
"bugs": {
"url": "https://github.com/lambdatest/webdriverio-selenium-sample/issues"
},
"homepage": "https://github.com/lambdatest/webdriverio-selenium-sample#readme",
"dependencies": {
"chai": "*",
"mocha": "*",
"selenium-webdriver": "^4.3.1",
"webdriverio": "^8.3.3"
},
"devDependencies": {
"@wdio/cli": "*",
"@wdio/local-runner": "*",
"@wdio/mocha-framework": "*",
"@wdio/sync": "*",
"async-request": "^1.2.0",
"wdio-lambdatest-service": "*"
}
}Note: In case, you’re importing the sample, you would need to give the below command to install all dependencies mentioned in the package.json file in the sample code.
$ npm i or $ npm install
The test script will do the following actions:
- Invoke the browser launch.
- Go to www.google.com.
- Type test123 in the search box.
- Fetch the title of the web page.
- Close the browser and display the fetched title in the console.
That’s it. Before we deep dive into the test script, we need to declare our desired capabilities. These desired capabilities will help us define the testing environment such as browser version, operating system, and more. You can leverage LambdaTest Desired Capabilities Generator to specify the desired capabilities class.
Let us fetch the desired capabilities class from the LambdaTest Desired Capabilities Generator to run the script on LambdaTest cloud-based Selenium Grid.
With the capability generator, you can specify a variety of configurations in multiple programming languages.
We’ll create a JavaScript file single_test.js for running the test script using WebdriverIO, as per the test scenario.
const assert = require('assert');
describe('Google Search Function', () => {
it('can find search results', () => {
browser.url('https://www.google.com/ncr');
const input = $('[name="q"]');
input.setValue('test123');
const title = browser.getTitle();
assert.equal(title, 'Google');
});
});
Create configuration file:
To run the script, we would also need a configuration file to provide the capabilities, which can be generated using the capabilities generator. The configuration file will also contain the credentials of user i.e username and access key and the Hub URL. In case, the script requires tunnel connection, we can set the tunnel: true in the services. This will automatically download the tunnel binary to the project, start it before test execution and close after the test is executed.
Below is the snippet of the configuration file for single_test.js named by single.conf.js in the conf folder.
exports.config = {
services: [
[
"lambdatest",
{
tunnel: false,
lambdatestOpts: {
logFile: "tunnel.log"
}
}
]
],
user: process.env.LT_USERNAME,
key: process.env.LT_ACCESS_KEY,
buildName: process.env.LT_BUILD_NAME,
specs: ["../tests/specs/single_test.js"],
exclude: [],
capabilities: [
{
"LT:Options": {
browserName: "chrome",
version: "latest",
name: "Test WebdriverIO Single",
build: "WebDriver Selenium Sample"
}
}],
logLevel: "info",
coloredLogs: true,
screenshotPath: "./errorShots/",
waitforTimeout: 100000,
connectionRetryTimeout: 90000,
connectionRetryCount: 1,
path: "/wd/hub",
hostname: "hub.lambdatest.com",
port: 80,
framework: "mocha",
mochaOpts: {
ui: "bdd",
timeout: 50000,
}
};If you notice the package.json, you will find required dependencies added for the single.conf.js.
Open terminal or command prompt in the project directory where you cloned GitHub repository for WebdriverIO, then run the below command to execute your first WebdriverIO test script on LambdaTest Selenium Grid. As per our declared capabilities, this test should run over Google Chrome 64.
npm run single
The above command is defined in the package.json file, and can be provided with any name as per the user’s convenience. Following is the snippet of the same:
"scripts": {
"test": "npm run single,
single": "./node_modules/.bin/wdio conf/single.conf.js"
}
Once you run the command, you can notice whether the test passed or failed which can over LambdaTest Automation Dashboard. In the below snapshot, we can see the test got passed.
Also , if you look at your Output Console, you will find the title of the web page.
In case, the script requires tunnel connection, we can set the tunnel: true in the services. This will automatically download the tunnel binary to the project, start it before test execution and close after the test is executed. We did this in single conf.js if you didn’t notice.
exports.config = {
services: [
[
"lambdatest",
{
tunnel: true,
lambdatestOpts: {
logFile: "tunnel.log"
}
}
]
]- Set tunnel = true
- Set tunnelName = 'Identifier name' (recommended as a tunnel identifier in case of more than 1 tunnels being connected)
Curious to know more about Lambda Tunnel To Test Locally Hosted Pages?
Refer to our support documentation for more information on Lambda Tunnel.
Download the Underpass app for your operating system. Refer to our support documentation for more information on Lambda Underpass-tunnel-app
Webdriverio does support parallel execution of code, i.e. execution of same code simultaneously on multiple browsers/device combinations which not only saves efforts to test the code, but also reduces the total execution time of tests.
To perform parallel execution of the above WebdriverIO test script over LambdaTest Selenium Grid, you would only need to modify the configuration file with multiple capabilities. Following is the snippet for the same. You can find this file as parallel.conf.js.
exports.config = {
services: [
[
"lambdatest",
{
tunnel: true,
lambdatestOpts: {
logFile: "tunnel.log"
}
}
]
],
user: 'Your_LambdaTest_Username',
key: 'Your_LambdaTest_Access_Key',
specs: [
'../tests/specs/single_test.js'
],
exclude: [],
maxInstances: 10,
commonCapabilities: {
// name: 'Parallel Sample Test',
// build: 'WebDriver Selenium Sample'
},
capabilities: [
{
platform: "win10",
browserName: "chrome",
version: "64.0"
},
{
platform: "win10",
browserName: "firefox",
version: "64.0"
},
{
platform: "win10",
browserName: "internet explorer",
version: "11.0"
}
],
logLevel: "info",
coloredLogs: true,
screenshotPath: "./errorShots/",
baseUrl: "",
waitforTimeout: 10000,
connectionRetryTimeout: 90000,
connectionRetryCount: 3,
path: "/wd/hub",
hostname: "hub.lambdatest.com",
port: 80,
framework: "mocha",
mochaOpts: {
ui: "bdd",
timeout: 50000,
}
};
// Code to support common capabilities
exports.config.capabilities.forEach(function(caps) {
for (var i in exports.config.commonCapabilities)
caps[i] = caps[i] || exports.config.commonCapabilities[i];
});In the above code, we have provided multiple capabilities to execute the same code on Google Chrome 64, Mozilla Firefox 64 and IE 11 simultaneously on Windows 10. Note: To run parallel test, we also defined separate command: npm run parallel in our package.json file, like below:
"scripts": {
"test": "npm run single && npm run parallel",
"single": "./node_modules/.bin/wdio conf/single.conf.js",
"parallel": "./node_modules/.bin/wdio conf/parallel.conf.js",
}So, the above script will run on different browsers simultaneously with the below command as defined above in the package.json file.
npm run parallel
Below is the screenshot for the parallel test execution in the LambdaTest Automation Dashboard.
testRunId={test_run_id} testCaseId={test_case_id} apiToken={api_token} email={email} npm run integration
if you do not wish to pass above arguments via you can provide their values within test itself, they are declared in tests/specs/integration_test.js:L11-L15
LambdaTest is a cloud based selenium grid infrastructure that can help you run automated cross browser compatibility tests on 2000+ different browser and operating system environments. LambdaTest supports all programming languages and frameworks that are supported with Selenium, and have easy integrations with all popular CI/CD platforms. It's a perfect solution to bring your selenium automation testing to cloud based infrastructure that not only helps you increase your test coverage over multiple desktop and mobile browsers, but also allows you to cut down your test execution time by running tests on parallel.