---
title: "Testing web applications using Mocha and WebdriverIO"
canonical: "https://docs.getxray.app/space/XRAY/301676475/Testing%20web%20applications%20using%20Mocha%20and%20WebdriverIO"
format: markdown
---
> ℹ️ **What you'll learn**
> ℹ️
> ℹ️ - Define tests using Mocha
> ℹ️ - Run the test and push the test report to Xray
> ℹ️ - Validate that the test results are available in Jira
> ⚠️ **Source-code for this tutorial**
> ⚠️
> ⚠️ - code is available in [GiHub](https://github.com/Xray-App/tutorial-nodejs-mocha-webdriverio)
# Overview
WebdriverIO is the next-gen browser and mobile automation test framework for Node.js.
---
# Prerequisites
Expand
For this example we will use the[ WebdriverIO](https://webdriver.io/) framework with the default assertion library provided by WebdriverIO and Junit as the reporter.
In the official documentation we can find the following description:
> Macro (legacy-content)
If we want, we can use other runners or reporters.
We will need:
- Access to [heroku demo site](https://the-internet.herokuapp.com/) that we aim to test
- Node.js environment with WebDriverIO
To start using WebDriverIO please follow the [Get Started](https://webdriver.io/docs/gettingstarted) documentation.
WebDriverIO provides a client that after being installed will guide you through bootstraping a *Hello World* test suite into your project. For this tutorial we will use the code generated by this tool for simplicity (with page objects).The test consists in validating the login feature (with valid and invalid credentials) of the [demo site](https://the-internet.herokuapp.com/login), for that we have created a base page object that will contain all methods and functionality that is shared across all page objects, a login page, that will extend the base page, that will have all the methods for interacting with the login page and a result page that will have the methods to interact in the page that is loaded after the login operation.
./pageobjects/Page.js
```javascript
/**
* main page object containing all methods, selectors and functionality
* that is shared across all page objects
*/
module.exports = class Page {
/**
* Opens a sub page of the page
* @param path path of the sub page (e.g. /path/to/page.html)
*/
open (path) {
return browser.url(`https://the-internet.herokuapp.com/${path}`)
}
}
```
./pageobjects/login.page.js
```javascript
const Page = require('./page');
/**
* sub page containing specific selectors and methods for a specific page
*/
class LoginPage extends Page {
/**
* define selectors using getter methods
*/
get inputUsername () { return $('#username') }
get inputPassword () { return $('#password') }
get btnSubmit () { return $('button[type="submit"]') }
/**
* a method to encapsule automation code to interact with the page
* e.g. to login using username and password
*/
async login (username, password) {
await (await this.inputUsername).setValue(username);
await (await this.inputPassword).setValue(password);
await (await this.btnSubmit).click();
}
/**
* overwrite specifc options to adapt it to page object
*/
open () {
return super.open('login');
}
}
module.exports = new LoginPage();
```
./pageobjects/secure.page.js
```javascript
const Page = require('./page');
/**
* sub page containing specific selectors and methods for a specific page
*/
class SecurePage extends Page {
/**
* define selectors using getter methods
*/
get flashAlert () { return $('#flash') }
}
module.exports = new SecurePage();
```
Define the test that will assert if the operation is successful or not
./example.e2e.js
```javascript
const LoginPage = require('../pageobjects/login.page');
const SecurePage = require('../pageobjects/secure.page');
describe('My Login application', () => {
it('should login with valid credentials', async () => {
await LoginPage.open();
await LoginPage.login('tomsmith', 'SuperSecretPassword!');
await expect(SecurePage.flashAlert).toBeExisting();
await expect(SecurePage.flashAlert).toHaveTextContaining(
'You logged into a secure area!');
});
});
describe('My Login application', () => {
it('should not login with invalid credentials', async () => {
await LoginPage.open();
await LoginPage.login('tom', 'SuperPassword!');
await expect(SecurePage.flashAlert).toBeExisting();
await expect(SecurePage.flashAlert).toHaveTextContaining(
'Your username is invalid!');
});
});
```
All of the above were created by the tool provided by WebDriverIO, to create those we followed the [documentation](https://webdriver.io/docs/gettingstarted) and executed first the command to install the WebDriverIO test runner:
```shell
npm install @wdio/cli
```
Then we answer a series of questions that will define the code to be generated using:
```shell
npx wdio config
```
The output of the questionnaire will look like this:
The last two steps to have everything configured is to define that we will use the Junit framework, for that we execute the following command:
```shell
npm install @wdio/junit-reporter --save-dev
```
In wdio.conf.js , we have added, in the reporters area, the following Junit definition:
##### **./wdio.conf.js**
```javascript
...
reporters: ['spec',
['junit', {
outputDir: './',
outputFileFormat: function(options) { // optional
return `results.xml`
}
}]
],
...
```
Once the code is implemented (and we will make it fail on purpose on one test, to show the failure reports), it can be executed with the following command:
```shell
npx wdio run ./wdio.conf.js
```
The results are immediately available in the terminal.
In this example, one test has failed and the other one has succeed, the output generated in the terminal is the above one and the correspondent Junit report is as below:
Junit Report
```
(/Users/cristianocunha/Documents/Projects/webdriverio/test/specs/example.e2e.js:21:45)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Context.executeAsync (/Users/cristianocunha/Documents/Projects/webdriverio/node_modules/@wdio/utils/build/shim.js:136:16)
at async Context.testFrameworkFnWrapper (/Users/cristianocunha/Documents/Projects/webdriverio/node_modules/@wdio/utils/build/test-framework/testFnWrapper.js:52:18)
]]>
```
Notes:
- There are a lot of other options on how to use WebDriverIO, please check their [documentation](https://webdriver.io/docs/gettingstarted) for more information.
---
# Integrating with Xray
As we saw in the example above where we produced Junit reports with the result of the tests, it is now a matter of importing those results to your Jira instance. This can be done by simply submitting automation results to Xray through the REST API, by using one of the available CI/CD plugins (e.g. for Jenkins) or using the Jira interface to do so.
> Macro (ui-tabs)
>
> > Macro (legacy-content)
>
> > Macro (legacy-content)
>
> > Macro (legacy-content)
# Tips
- after results are imported in Jira, Tests can be linked to existing requirements/user stories, so you can track the impact of their coverage.
- results from multiple builds can be linked to an existing Test Plan, to facilitate the analysis of test result trends across builds.
- results can be associated with a Test Environment, in case you want to analyze coverage and test results by that environment later on. A Test Environment can be a testing stage (e.g. dev, staging, preprod, prod) or an identifier of the device/application used to interact with the system (e.g. browser, mobile OS).
---
# References
- [https://webdriver.io/](https://webdriver.io/)
- [https://webdriver.io/docs/gettingstarted](https://webdriver.io/docs/gettingstarted)
> Macro (toc)
> Macro (style)