WebdriverIO Tutorial With Examples For Selenium Testing

WebdriverIO is Javascript based test automation framework built over nodeJs. It is an open-source project developed for the automation testing community. WebdriverIO is extendible, compatible, feature-rich, and easy to install. This is considered a Next-gen test automation framework which supports both desktop browsers and mobile apps. Which makes WebDriverIO a favourable option for Selenium automation testing. It supports BDD and TDD test framework. The latest version of WebdriverIO is 5.X. In this for Selenium automation testing, I am going to show you how to start writing your first Selenium script of WebdriverIO. WebDriverIO tutorial WebdriverIO Architecture The first and foremost topic that you would learn in this WebdriverIO tutorial is going to be the WebdriverIO architecture. This is what happens when you run a WebDriverIO test script. NodeJS is an open-source project which helps to run the Javascript runtime environment. WebdriverIO built on top of NodeJS which communicates with NodeJS. The script is written by the user with the help of the WebdriverIO library. NodeJS: WebdriverIO: JavaScript: This flow gets executed when the user runs WebdriverIO test script: JavaScript written by the user sends a request by WebdriverIO via nodeJS to the Services which is in the form of HTTP command using JSON Wire Protocol. Now, services forward the request to browsers to perform user actions. Why WebdriverIO is a popular test Framework? is a widely used test automation framework in Javascript. It has various features like It supports many reports and services, Test Frameworks and WDIO CLI Test Runners The Following are the supported reporters’ examples: WebdriverIO Allure Reporter Concise Reporter Dot Reporter JUnit Reporter Spec Reporter Sumologic Reporter Report Portal Reporter Video Reporter HTML Reporter JSON Reporter Mochawesome Reporter Timeline Reporter CucumberJS JSON Reporter The following are an example of the supported services Appium Service Devtools Service Firefox Profile Service Selenium Standalone Service Shared Store Service Static Server Service ChromeDriver Service Report Portal Service Docker Service The followings are the test framework supports Mocha Jasmine Cucumber Additionally, It is very popular among the developers and testers. The daily download is around 84,957 and weekly download is around 414,847 and yearly 1,848,479. So far it has released 243 release versions. Also, there are active community and support for the issue and has 5.3K stars in the Github. Prerequisites For This WebDriverIO Tutorial Before we proceed further to executing Selenium automation testing scripts in this WebDriverIO tutorial, make sure to have the below things set up. Installing Node and npm In order to do the basic setup, you required to have node.js installed. To check node.js is installed or not just type command and run, you should see node.js version. node -v $ node -v If the node is installed correctly then you will see node installed version. When you install nodejs, node gives you a javascript runtime environment. Also, it installed by default npm which is nothing but node package manager. npm helps the user to install a third-party library. You can check npm version installed by typing following command on terminal. $ npm -v If you see any error then follow the instruction given on NodeJs official website. Creating A Project Workspace For WebDriverIO Setup the project folder by creating a workspace folder and we will keep all the files in that. As an example to the , we will call that folder as ‘ ’. Run the following command in the terminal. WebDriverIO tutorial for Selenium testing LambdaTestProject mkdir LambdaTestProject &amp;&amp; cd LambdaTestProject Initialize package.json Create package.json file by typing the following command: npm init -y With this command, we have created file where we can add dependencies that we required to run our automation. We have added -y option with the npm init command. When you add -y option then you are skipping all input asking for ‘Yes’ prompts and setup default package.json setting for you. Remember that, the parameter ‘-y’ is optional. package.json If you do not enter ‘-y’ option then the following option should provide Install WebdriverIO CLI Next step in this WebdriverIO tutorial would be the installation of the CLI dependency, we need to run the following command: npm i --save-dev @wdio/cli As a result of the above command, you can see dependency ( “@wdio/cli”: “^5.16.11”) get added in the package.json file. { : , : , : , : , : { : }, : , : , : { : } } "name" "lambdatestproject" "version" "1.0.0" "description" "Webdriver First Script" "main" "index.js" "scripts" "test" "echo \"Error: no test specified\" && exit 1" "author" "" "license" "ISC" "devDependencies" "@wdio/cli" "^5.16.11" Note: If you find any permission error then try to run with the sudo command. sudo npm i --save-dev @wdio/cli Once, the dependency is added in the package, you need to create a webdriverIO configuration file for executing Selenium scripts through WebdriverIO. WebdriverIO Configuration Enter the following command in order to create WebdriverIO config file: ./node_modules/.bin/wdio config -y By this command, the following packages are configured automatically, of course, you can change later if you want to. @wdio/local-runner @wdio/mocha-framework @wdio/spec-reporter @wdio-chromedriver-service @wdio/sync – chromedriver Here is the output of the command which says which file needs to run Again, here we have used ‘-y’ option so all default options get set up for you. And wdio.conf.js file gets created under your project root folder. We will use this file to configure our project. By default, this auto-configure set services as the chromedriver, framework as Mocha with BDD options. The last two lines tell you how to execute the written automation script. If you want to avoid ‘-y’ option then type the following command and you have to give input as shown below: ./node_modules/.bin/wdio config You can choose displayed options according to your requirements. And, this is the final output after entering the above options. Create A Test Folder In every test project, we required to create a folder that keeps all Selenium test cases in one place. Type the following command in the terminal to create a test folder for this WebDriverIO tutorial. if you are giving different specs path in above command then you need to make sure that mkdir -p ./test/specs Note: same folder path is mentioned in the wdio.config.js file under specs: Create A Test Script File The next prerequisite for WebdriverIO tutorial will be a Test Script, which is a JavaScript file where we are going to write our Selenium automation testing script. touch ./test/specs/myFirstScript.js Open this in any of your favorite editors and starts writing your first Selenium testing script. myFirstScript.js Verify The wdio Test Runner WebdriverIO provides a test runner called wdio where you can run your script. It is laid under the /node_modules/.bin directly. ./node_modules/.bin/wdio run wdio.conf.js It scans your file and prepares the Selenium testing suite according to the configuration mentioned in the file. Then it picks the specs file mentioned in the wdio.conf.js and starts executing the script. In our case, we have set so, it will start all js file present under the . wdio.conf.js specs: [ ‘./test/specs/**/*.js’] ‘./test/specs folder’ Executing First WebdriverIO Script On Local Selenium WebDriver Now, that we have all the prerequisites set up for this WebDriverIO tutorial. It is now time to get into the crux of the matter and run our first automation testing script using the WebDriverIO. As you have already set up your local environment to run your first script using chrome. You can use the below script to start off. Copy the below code and paste in the file. Selenium myFirstScript.js WebdriverIO Example Script const assert = require( ) describe( , function() { it( , function() { browser.url( ) $( ).click() $( ).click() $( ).setValue( ) assert.strictEqual( .getTitle(), ) }) }) "assert" ; "Lambdatest Demo Test" "Lambdatest Demo TestCase" "https://lambdatest.github.io/sample-todo-app/" ; "*[name='li1']" ; "*[name='li2']" ; "#sampletodotext" "Lambdatest\n" ; browser "Sample page - lambdatest.com" ; ; ; Let’s understand the given code. In the first line, You have imported the assert library so that we can use assert in our program. WebdriverIO Example Script Walkthrough describe() block allows you to keep all your tests under one describe functions. In this case, you have defined describes, “ ”. In another way, you can think of a suite block. Lambdatest Demo Test Each describe() can have multiple it(). it() is nothing but your test cases. You can write N number of test cases under describe function. Now, let’s understand the Selenium testing steps that we have written. First, browser is a globally defined object. You can use driver object as well instead of ‘browser’. browser.url() method opens the URL provided as a parameter. $() returns the web element to the user and then the user can perform click() operation. Syntax is $(selector). In this example, I have taken a selector as XPath and ID Below is the XPath example with a Name parameter. Another selector example is ID. if you want to select an element with the help of ID then just add # before id name. So, is ID selector. Also, You can see the click() method is used to click() on element and setValue() is used to enter a value in the textbox. #sampletodotext Lastly, we have used to Assert.strictEqual() methods to verify browser title. There are many assert methods that can help you to do more assertion in your script. Test Execution Using Selenium Webdriver On Local Machine Now, we will have a quick look at how the execution of these WebdriverIO tutorial test scripts that takes place across different operating systems. Mac Operating System If you are done with the setup and configuration on Mac Operating system then you do not have to worry about additional setup. Just type following command from your project root directory. Here is the complete execution result console log. In default log level is ‘Info’ so you can see info level details. ./node_modules/.bin/wdio run wdio.conf.js wdio.conf.js In order to run the same script on windows 10 operating system then perform the following steps Windows Operating system Open Specify Test Files what is wdio.conf.js under the project root folder Find the “capabilities” section Add “platformName: ‘Windows 10’” Kudos! You have successfully run your first script through this WebdriverIO tutorial. We are now going to look into a more of a practical problem around the automation testing with Selenium and WebdriverIO. When your project demands a wider automated browser testing coverage with fast execution results. In such a case, the local selenium setup will not really be an ideal approach to go ahead with. Let’s understand why? Selenium testing Challenges Of An In-house Selenium Setup We are in a world where agile SDLC is being adopted by a majority of the businesses. As a result, we are witnessing fast releases by major vendors for browser, mobile operating systems, desktop operating systems, and more. Be it WebdriverIO, or any other test automation framework, creating and maintaining a Selenium Grid infrastructure could be a challenging call if the market is bringing updates at such a rapid pace. Here are the disadvantages when you scale using an in-house Selenium testing setup. In the long run, a project demands more test case coverage and faster result. It takes a lot of time to execute locally with different browsers combinations and operating system and the team has to wait until execution gives the result. More test cases coverage, slow result! Nowadays, product demand more browser and operating coverage as the market user have many options to choose from. In such a case, If you have set up a selenium grid locally, it takes immense effort to maintain that including different browsers and think of setup for the different operating systems and its version. For longer runs, it’s nearly impossible to maintain locally. More browsers and Operating systems, along with their version coverage. As you know, the current market user has many browser options and Operating system. To manage the whole setup including script upgrade, execution and fixing will be costly as you need to have a dedicated team to do all these tasks, which would be costlier for a longer run. You would also have to invest a hefty amount in the hardware. Expensive call Last but not least, maintaining the whole setup is a big challenge. The dedicated team has to maintain script, local servers and set up up and environment upgradation. In such a case, the dedicated team would be spending more time behind the maintenance rather than actual QA work. Maintenance So what can you do to overcome these challenges? Overcoming Challenges Using An Online Selenium Grid This is where such as LambdaTest can be a handful. An online Selenium Grid for automation testing can help you scale faster, ship your products with speed, along with a robust pipeline. Here is how! cloud-based Selenium automation testing Running a script with different browsers and its version including various platform would be less costly than running locally setup environment. Nowadays, the cloud-based platform provides an on-demand test environment, session based and concurrent session which is cost-effective. Why? Because the infrastructure provided on the cloud is shared by a pool of users. So instead of making a device lab all for yourself. You can opt to go for a pre-built cloud-based Selenium Grid. Cost-effective With minimal configuration, cloud-based test automation provides many options to run your script simultaneously, you can cover many test cases on multiple browsers and platforms and get faster results. More coverage and fast result With the help of a cloud-based test automation platform, users can access the whole project from anywhere and at any time. You do not have to depend on dedicated access and lab to be accessed, just log in to the cloud-based platform and you are ready to access their resources and your project. Easy access It is very important to covers many platforms and browsers for the test coverage. Procuring these is very costly. Hence, the cloud-based platform has already set up so that you can take advantage of multiple platforms and environments for your project. More environments and platforms Many cloud-based platforms have a dedicated support team where they will help you to support an environment-related issue. Having a dedicated support team will really help you to save your lot of time behind environment maintenance. Support team A cloud-based test platform helps the team to work on a single project from any location. Hence tester can run the script from any geographical location and any time with zero changes. Team collaboration Using LambdaTest, you can perform Selenium automation testing with WebdriverIO and enjoy the convenience of multiple third-party integrations for project management, CI CD pipeline, codeless automation, bug tracking, instant messaging, and more. Numerous Integrations To Third-Party Tools WebdriverIO Test Execution On An Online Selenium Grid In this section of WebdriverIO tutorial for Selenium automation testing, we will perform the Selenium script execution over an online Selenium Grid of 2000+ real browsers provided by LambdaTest. Before running your test on LamdaTest, you need to install the dev Dependency. You can install by entering the following command Now, Suppose you want to run the same script which you have written for the local machine, on LamdaTest you just need to change the Specify Test File that is npm install @wdio/selenium-standalone-service --save-dev wdio.conf.js The below configuration runs on Chrome version 79.0 on windows 10 operating system. Note: Add actual user name and accessKey from the LamdaTest website. Most important is the service parameter. You need to set as selenium-standalone otherwise script will not run on LamdaTest. Additionally, you have to change path and baseUrl parameters as shown below. path: , : [ { : , : , user: , : , : , : , : , : , : , : , : } ], : , : , : , : , "/wd/hub" capabilities maxInstances 5 name "My First Script - Chrome-Window" // name of the test, " " accessKey " " build "FirstScript-Demo" platformName "Windows 10" browserName "Chrome" browserVersion "79.0" video true console true visual false coloredLogs true hostname "hub.lambdatest.com" port 80 baseUrl "" After running , you can find the test case being executed on your LambdaTest account. If you go to the LambdaTest , you can find all the relevant details around the WebdriverIO and Selenium testing script execution. Here is the local console log: ./node_modules/.bin/wdio wdio.conf.js automation dashboard What Details Would You Get On LamdaTest Dashboard? In the Dashboard view you can check summary where an overview of your total tests run and concurrent session details and others more information. Dashboard: In the timeline screen, you can see your automation script build version. You can give build version names in your capabilities. TimeLine: In the Automation Logs you can see each execution in detail including browser version, Operating system version, execution date and time, videos, screenshots and steps of execution. Automation Logs: If you would come across any exception while executing your Selenium and WebdriverIO script on LambdaTest, they would all be listed under the exception tab. Exceptions: In the command view, you can see each step element status. Command: You can view the Selenium log as well as the Console log. Logs: Metadata view gives you the supplied meta details and input configuration and browser configuration you passed. Metadata: In this tab, the user can see the build status by today, weekly and monthly with additional important information. Analytics: The intuitive dashboard is not the only feature for which you may choose LambdaTest. Another key feature of great importance is the ability to perform parallel testing with Selenium. WebdriverIO Example For Parallel Selenium Testing When your project test script grows and it takes a lot more time to execute and produce results. You need to find a solution to get a faster way to generate results also, many different types of browsers are coming into markets and we have to deal with that. In such a situation, the parallel execution will help us to find the correct solution. The advantages of using parallels browsers are: Speed up the execution Browsers and Operating system coverage In the WebdriverIO there is a property called which helps you to run parallel browsers. Change your current with multiple browsers’ capabilities and run the same script. maxInstances wdio.conf.js The following capabilities will run the Safari browser on the Mac Operating system and Chrome browser on the Windows Operating system. capabilities: [ { : , : , user: , : , : , : , browserName: , : , : , : , : }, { : , user: , : , : , : , browserName: , : , : , : , : } ], maxInstances 5 name "My First Script - Chrome-Window" // name of the test, " " accessKey " " build "MyFirstScript-Demo" platformName "Windows 10" // macOS High Sierra & Windows 10 "Chrome" browserVersion "79.0" video true console true visual false name "My First Script - Safari-Mac" // name of the test, " " accessKey " " build "MyFirstScript-Demo" platformName "macOS High Sierra" // macOS High Sierra & Windows 10 "Safari" browserVersion "11.0" video true console true visual false You can add multiple instances based on the target operating system CPU capacity. It advisable to create is as required in order to get stable results. maxInstances Let’s view the LamdaTest automation dashboard and see the execution details. You can see there are two tests ran under concurrent sessions and details are shown in the below screenshot. You can see the build name which we have set up in the capability section. Local console logs: That Is All I am sure this WebdriverIO tutorial has helped you become proficient in automation testers with Selenium and WebdriverIO examples. Remember, if you are planning to scale your Selenium automation testing suite then it is recommended to go for a Selenium Grid to help you perform parallel testing. However, maintaining a Selenium Grid can be an expensive and strenuous option. Consequently, an online Selenium Grid is a different story that can help you paddle faster through your release cycles. In case you have any questions, feel free to let me know in the comments sections below. I would be happy to answer.🙂