How to Get Started using WebdriverIO with Experitest

Webdriver.io is a mobile and browser test automation framework that has recently become quite popular in the software testing industry. This free and open-source framework is written in JavaScript and runs on Node.js. Packaged into npm, WebdriverIO is easy to install and use. This framework enables you to test web applications as well as native mobile apps.

Webdriver is popular because it is backed by Selenium which means you can run test scripts on all browsers. While it brings all the advantages of Selenium, it eliminates the pain of writing Java-based scripts. It allows you to easily integrate it with multiple testing frameworks such as Appium to bring the best out of both worlds. Learn more about transitioning from Selenium to Appium, and how to enable your web testers with Digital.ai Continuous Testing.

WebdriverIO tutorial commands are simple and concise. The syntax is pretty clear. The wdio setup wizard walks you through the process of setting up your project. Using the Testrunner you can synchronously write asynchronous commands. Moreover, you can add hooks to perform a specific action during the test process. For instance, you can take a screenshot of an error message. The availability of a big community helps you to quickly resolve issues when you run into errors.

Here is a step-by-step tutorial on how to install and run test scripts using WebriverIO.

Step 1: Install Node.JS

To use  this WebDriverIO tutorial, you should have Node.js and Node Package Manager (npm) installed on your machine. When you install Node.js, npm automatically gets installed.

Visit Node JS website and download the latest LTS version. The current LTS version is 12.18.0 and the npm version is 6.14.4

https://nodejs.org/en/download/

Download the .msi file and install it.

Click on Next and accept the license agreement.

Choose the nodejs folder on the next screen.

In the custom setup screen, you can customize the features to be installed.

If you need additional tools for native modules, you can install them by checking the box in the native modules screen.

Click next to begin the installation process.

Once the installation completes, click finish.

To check if Node.js and npm are correctly installed on the machine, open the command prompt and type the following commands:

• Node – v
• Npm – v

If Node.js and npm versions are displayed on the screen, it means the tools are ready to use.

Step 2: Create a Project Directory

Before beginning the project, create a project directory to organize all your project data into a single folder.

Open the command prompt and create a directory using the command mkdir.

• mkdir experitestdemo

Now, navigate to that directory using the cd command

• cd experitestdemo

Step 3: Create Package.JSON

Open the command prompt and type the following command:

• npm init –y

Note: The –y parameter will create a default package.

Step 4: Install WebDriverIO command-line interface

To install WebDriverIO CLI, type the following command in the command prompt

• npm install @wdio/cli

When the installation completes, it will display the details of the package added.

Step 5: Create a WebDriverIO Config File

To execute test scripts using WebDriverIO, create a config file that contains the details of the tests, capabilities, and settings. To do so, enter the following command in the command prompt:

• npx wdio config

The wdio config wizard opens up. Provide the required details such as the automation backend, framework, reporting tool, etc.

1. Where is your automation backend located? On my local machine ( When you want to run the tests in the cloud, you can specify the remote location here.)
2. Which framework do you want to use? Mocha
3. Synchronous or asynchronous? Sync
4. Where are test specs located? Choose the default
5. Which reporting tool to use? No
6. Want to add a test service to setup? Chromedriver
7. What is the base URL? https://experitest.com

It will display a message that the package is successfully installed and the configuration file is created successfully.

Step 6: Create specs

Before proceeding with test execution, it is important to store all your test scripts in one place. So, create a directory ‘test’ in the project folder, navigate to the test folder, and create a specs folder. Now create a javascript file in the specs folder and write your test script in that file and save it.

Here is an example javascript:

[javascript] describe(‘experitest.com page’, () => { it(‘should have the right title’, () => { browser.url(‘https://experitest.com.’) const title = browser.getTitle() expect(browser).toHaveTitle(‘Experitest: Mobile App & Cross-Browser Testing End-to-End’); }) }) [/javascript]

Step 7: Execute your tests

To execute the test script, type the following command:

• npx wdio wdio.conf.js

The test script successfully launched the chrome browser, checked the title, and closed the browser.

Now, the WebdriverIO is ready for use! So, write your scripts and run them instantly. Make sure to try a free trial of Experitest here.

Guy Arieli – CTO