{"id":22362823,"url":"https://github.com/lambdatest/webdriverio-selenium-sample","last_synced_at":"2025-07-21T11:03:40.775Z","repository":{"id":44491111,"uuid":"173293770","full_name":"LambdaTest/webdriverio-selenium-sample","owner":"LambdaTest","description":"A sample test for LambdaTest distributed grid with webdriverio","archived":false,"fork":false,"pushed_at":"2024-08-13T10:24:08.000Z","size":134,"stargazers_count":14,"open_issues_count":0,"forks_count":36,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-08-13T13:27:48.741Z","etag":null,"topics":["automation","grid","selenium","webdriverio"],"latest_commit_sha":null,"homepage":"https://www.lambdatest.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LambdaTest.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-03-01T11:50:53.000Z","updated_at":"2024-08-13T10:24:12.000Z","dependencies_parsed_at":"2023-11-14T20:41:02.984Z","dependency_job_id":null,"html_url":"https://github.com/LambdaTest/webdriverio-selenium-sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LambdaTest%2Fwebdriverio-selenium-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LambdaTest%2Fwebdriverio-selenium-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LambdaTest%2Fwebdriverio-selenium-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LambdaTest%2Fwebdriverio-selenium-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LambdaTest","download_url":"https://codeload.github.com/LambdaTest/webdriverio-selenium-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228154024,"owners_count":17877704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automation","grid","selenium","webdriverio"],"created_at":"2024-12-04T17:11:55.463Z","updated_at":"2024-12-04T17:11:55.984Z","avatar_url":"https://github.com/LambdaTest.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebdriverIO Tutorial\n[WebdriverIO](http://webdriver.io/) Integration with LambdaTest\n\n\u003cimg src = \"https://miro.medium.com/max/2488/1*2ntKtVBowGdACso6Gcmy1A.jpeg\" height = \"400\"\u003e\n\nWebdriverIO is a custom implementation for selenium's W3C webdriver API. It is written in Javascript and packaged into 'npm' and runs on Node.js.\n\n## Prerequisites for  WebdriverIO \n\n1. Download Visual Studio (IDE) for your operating system.\n2. **Node.js and Package Manager (npm) :** Install Node.js from their [official website](https://nodejs.org/en/download/) Or Install Node.js using command line. Go to the terminal or command prompt \u0026 run the below command.\n\n`$   install node`\n\nTo verify the node version (Node version \u003c 18)\n\n` $  node -v `\n\n3. Install Selenium Dependencies\n\n`npm install selenium-webdriver `\n\n 4. **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](https://automation.lambdatest.com/) or through [LambdaTest Profile](https://accounts.lambdatest.com/detail/profile).\n\nSet LambdaTest Username and Access Key in environment variables.\n\n* For Linux/macOS:\n`export LT_USERNAME=\"YOUR_USERNAME\"\nexport LT_ACCESS_KEY=\"YOUR ACCESS KEY\"`\n\n* For Windows:\n`set LT_USERNAME=\"YOUR_USERNAME\"\nset LT_ACCESS_KEY=\"YOUR ACCESS KEY\"`\n\n5. Ensure that you have Webdriverio installed in your system, you can install it using the below command through npm. \t\n\n`$ npm install webdriverio`\n\n\u003e   #### Try Demo in Gitpod\n\u003e   Select the button below to try this demo in [Gitpod](https://www.gitpod.io/)\n\u003e\n\u003e  [![Open in Gitpod](open-in-gitpod.png)](https://gitpod.io/#https://github.com/LambdaTest/webdriverio-selenium-sample)\n\u003e\n\u003e   After the gitpod session launches, navigate to the terminal and run the following commands to save your [LambdaTest Credentials](https://accounts.lambdatest.com/detail/profile) to gitpod as environment variables:\n\u003e   ```\n\u003e   eval $(gp env -e LT_USERNAME=******)\n\u003e   eval $(gp env -e LT_ACCESS_KEY=******)\n\u003e   ```\n\u003e   Click the following link if you're unsure how to [access your LambdaTest credentials.](https://www.lambdatest.com/support/docs/using-environment-variables-for-authentication-credentials/)\n\u003e   Also, if you start a new terminal in gitpod, you have to run the following command to reset envrionment variables:\n\u003e   ```\n\u003e   eval $(gp env -e)\n\u003e   ```\n\u003e  \n\u003e   For more information consult the [gitpod documentation](https://www.gitpod.io/docs/47_environment_variables/)\n\n\u003cbr /\u003e\n\n## Setting Up The Project In Visual Studio IDE\n\n**Step 1 :** After installation of the Visual Studio IDE, create a folder in your local system to save all the projects.\n\n**Step 2 :** Install the below extensions for JavaScript from ‘Extensions’ in VScode Editor.  \n* Code Runner \n* JavaScript( ES6) code snippet\n* ES Lint\n\n**Step 3 :** Press ‘Ctrl+Shift+P’ and search for git:clone. Paste the URL of this repository[https://github.com/LambdaTest/webdriverio-selenium-sample.git](https://github.com/LambdaTest/webdriverio-selenium-sample.git) to clone.\n\n**Step 4 :** Press ENTER and save the WebdriverIO project in the above created folder.\n\n**Step 5:** Create a project directory named [webdriverio-selenium-sample](https://github.com/LambdaTest/webdriverio-selenium-sample)  directory in the VS code (IDE).\n\n**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.\n\n\n```json\n{\n  \"name\": \"webdriverio-lambdatest\",\n  \"version\": \"0.1.0\",\n  \"readme\": \"WebdriverIO Integration with [LambdaTest](https://www.lambdatest.com)\",\n  \"description\": \"Selenium examples for WebdriverIO and LambdaTest Selenium Grid\",\n  \"scripts\": {\n    \"test\": \"npm run single \u0026\u0026 npm run parallel \u0026\u0026 npm run multiple\",\n    \"single\": \"./node_modules/.bin/wdio conf/single.conf.js\",\n    \"parallel\": \"./node_modules/.bin/wdio conf/parallel.conf.js\",\n    \"multiple\": \"./node_modules/.bin/wdio conf/multiple.conf.js\",\n    \"integration\": \"./node_modules/.bin/wdio conf/integration.conf.js\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/lambdatest/webdriverio-selenium-sample.git\"\n  },\n  \"keywords\": [\n    \"webdriverio\",\n    \"lambdatest\",\n    \"automation\",\n    \"selenium\",\n    \"tests\"\n  ],\n  \"bugs\": {\n    \"url\": \"https://github.com/lambdatest/webdriverio-selenium-sample/issues\"\n  },\n  \"homepage\": \"https://github.com/lambdatest/webdriverio-selenium-sample#readme\",\n  \"dependencies\": {\n    \"chai\": \"*\",\n    \"mocha\": \"*\",\n    \"selenium-webdriver\": \"^4.23.0\",\n    \"webdriverio\": \"^9.0.7\"\n  },\n  \"devDependencies\": {\n    \"@wdio/cli\": \"*\",\n    \"@wdio/local-runner\": \"*\",\n    \"@wdio/mocha-framework\": \"*\",\n    \"@wdio/sync\": \"*\",\n    \"wdio-lambdatest-service\": \"*\"\n  }\n}\n```\n\n\n**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.\n\n\n`$ npm i or $ npm install`\n\n## Executing First Webdriverio Test Script\n\n\n### Test Scenario\n\nThe test script will do the following actions:\n1. Invoke the browser launch.\n2. Go to www.google.com. \n3. Type test123 in the search box.\n4. Fetch the title of the web page.\n5. Close the browser and display the fetched title in the console.\n\nThat’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](https://www.lambdatest.com/capabilities-generator/) to specify the desired capabilities class.\n\n### [LambdaTest Desired Capabilities Generator](https://www.lambdatest.com/capabilities-generator/) \n\nLet us fetch the desired capabilities class from the **LambdaTest Desired Capabilities Generator** to run the script on LambdaTest cloud-based Selenium Grid.\n\n![capability-generator](https://www.lambdatest.com/blog/wp-content/uploads/2020/05/pasted-image-0.png)\n\nWith the capability generator, you can specify a variety of configurations in multiple programming languages.\n\n### Test Scripts For Running WebdriverIO Test On A Single Configuration\n\nWe’ll create a JavaScript file [single_test.js](https://github.com/LambdaTest/webdriverio-selenium-sample/blob/master/tests/specs/single_test.js) for running the test script using WebdriverIO, as per the test scenario. \n\n```\n\nconst assert = require('assert');\n \ndescribe('Google Search Function', () =\u003e {\n  it('can find search results', () =\u003e {\n    browser.url('https://www.google.com/ncr');\n    const input = $('[name=\"q\"]');\n    input.setValue('test123');\n \n    const title = browser.getTitle();\n    assert.equal(title, 'Google');\n  });\n});\n\n```\n\n**Create configuration file:**\n\nTo 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.\n\nBelow is the snippet of the configuration file for single_test.js named by single.conf.js in the conf folder.\n\n```JavaScript\nexports.config = {\n  services: [\n    [\n      \"lambdatest\",\n      {\n        tunnel: false,\n        lambdatestOpts: {\n          logFile: \"tunnel.log\"\n        }\n      }\n    ]\n  ],\n  user: process.env.LT_USERNAME,\n  key: process.env.LT_ACCESS_KEY,\n  buildName: process.env.LT_BUILD_NAME,\n  specs: [\"../tests/specs/single_test.js\"],\n  exclude: [],\n\n  capabilities: [\n    {\n      \"LT:Options\": {\n      browserName: \"chrome\",\n      version: \"latest\",\n      name: \"Test WebdriverIO Single\",\n      build: \"WebDriver Selenium Sample\"\n    }\n    }],\n  logLevel: \"info\",\n  coloredLogs: true,\n  screenshotPath: \"./errorShots/\",\n  waitforTimeout: 100000,\n  connectionRetryTimeout: 90000,\n  connectionRetryCount: 1,\n  path: \"/wd/hub\",\n  hostname: \"hub.lambdatest.com\",\n  port: 80,\n  framework: \"mocha\",\n  mochaOpts: {\n    ui: \"bdd\",\n    timeout: 50000,\n  }\n};\n```\nIf you notice the package.json, you will find required dependencies added for the single.conf.js.\n\n## Running The First WebdriverIO Test Script\n\nOpen terminal or command prompt in the project directory where you cloned [GitHub repository for WebdriverIO](https://github.com/LambdaTest/webdriverio-selenium-sample), 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.\n\n`npm run single`\n\nThe 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:\n\n```\n\"scripts\": {\n    \"test\": \"npm run single,\n     single\": \"./node_modules/.bin/wdio conf/single.conf.js\"\n}\n\n```\n\nOnce 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.\n\n![](https://www.lambdatest.com/blog/wp-content/uploads/2020/05/automation-testing.png)\n\nAlso , if you look at your **Output Console**, you will find the **title of the web page**.\n\n![](https://www.lambdatest.com/blog/wp-content/uploads/2020/05/testing-script.png)\n\n## Testing Locally Hosted Web-Applications\n\nIn 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.\n\n```javascript\nexports.config = {\n  services: [\n    [\n      \"lambdatest\",\n      {\n        tunnel: true,\n        lambdatestOpts: {\n          logFile: \"tunnel.log\"\n        }\n      }\n    ]\n  ]\n\n```\n\n* Set **tunnel = true**\n* Set **tunnelName** = '**Identifier name**'  (recommended as a tunnel identifier  in case of  more than 1 tunnels being connected)\n\n**Curious to know more about Lambda Tunnel To Test Locally Hosted Pages?**\n\nRefer to our support documentation for more information on [Lambda Tunnel](https://www.lambdatest.com/support/docs/testing-locally-hosted-pages/). \n\n### Want To Run Lambda Tunnel Without Using Command Line?\n\nDownload the **Underpass** app for your operating system. Refer to our support documentation for more information on [Lambda Underpass-tunnel-app](https://www.lambdatest.com/support/docs/underpass-tunnel-application/)\n\n## Parallel Execution\n\nWebdriverio 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.\n\nTo perform parallel execution of the above WebdriverIO test script over LambdaTest [Selenium Grid](https://www.lambdatest.com/selenium-automation), 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](https://github.com/LambdaTest/webdriverio-selenium-sample/blob/master/conf/parallel.conf.js).\n\n```javascript\nexports.config = {\n  services: [\n    [\n      \"lambdatest\",\n      {\n        tunnel: true,\n        lambdatestOpts: {\n          logFile: \"tunnel.log\"\n        }\n      }\n    ]\n  ],\n  user: 'Your_LambdaTest_Username',\n  key: 'Your_LambdaTest_Access_Key',\n  specs: [\n    '../tests/specs/single_test.js'\n  ],\n  exclude: [],\n \n  maxInstances: 10,\n  commonCapabilities: {\n    // name: 'Parallel Sample Test',\n    // build: 'WebDriver Selenium Sample'\n  },\n \n  capabilities: [\n    {\n      platform: \"win10\",\n      browserName: \"chrome\",\n      version: \"64.0\"\n    },\n    {\n      platform: \"win10\",\n      browserName: \"firefox\",\n      version: \"64.0\"\n    },\n    {\n      platform: \"win10\",\n      browserName: \"internet explorer\",\n      version: \"11.0\"\n    }\n  ],\n \n  logLevel: \"info\",\n  coloredLogs: true,\n  screenshotPath: \"./errorShots/\",\n  baseUrl: \"\",\n  waitforTimeout: 10000,\n  connectionRetryTimeout: 90000,\n  connectionRetryCount: 3,\n  path: \"/wd/hub\",\n  hostname: \"hub.lambdatest.com\",\n  port: 80,\n  framework: \"mocha\",\n  mochaOpts: {\n    ui: \"bdd\",\n    timeout: 50000,\n  }\n};\n \n// Code to support common capabilities\nexports.config.capabilities.forEach(function(caps) {\n  for (var i in exports.config.commonCapabilities)\n    caps[i] = caps[i] || exports.config.commonCapabilities[i];\n});\n\n```\nIn 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**. \nNote: To run parallel test, we also defined separate command: **npm run parallel** in our package.json file, like below:\n\n\n```javascript\n\"scripts\": {\n    \"test\": \"npm run single \u0026\u0026 npm run parallel\",\n    \"single\": \"./node_modules/.bin/wdio conf/single.conf.js\",\n    \"parallel\": \"./node_modules/.bin/wdio conf/parallel.conf.js\",\n }\n```\n\nSo, the above script will run on different browsers simultaneously with the below command as defined above in the package.json file.\n\n`npm run parallel`\n\nBelow is the screenshot for the parallel test execution in the [LambdaTest Automation Dashboard](https://automation.lambdatest.com/).\n\n![](https://www.lambdatest.com/blog/wp-content/uploads/2020/05/seleniumwebdriverIO.png)\n\n## Running test with QA - Deputy integration\n`testRunId={test_run_id} testCaseId={test_case_id} apiToken={api_token} email={email} npm run integration`\nif 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\n\n## About LambdaTest\n\n[LambdaTest](https://www.lambdatest.com/) 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](https://www.lambdatest.com/selenium-automation) 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.\n\n\n## Resources\n### [SeleniumHQ Documentation](http://www.seleniumhq.org/docs/)\n### [WebdriverIO Documentation](https://webdriver.io/docs/gettingstarted.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flambdatest%2Fwebdriverio-selenium-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flambdatest%2Fwebdriverio-selenium-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flambdatest%2Fwebdriverio-selenium-sample/lists"}