WebdriverIO + Mocha
- APPWRK Writer
AIO Tests supports importing WebdriverIO (WDIO) results through its support for JUnit reports or via the hooks available in WebdriverIO.
WebdriverIO is an automation framework which leverages the power of the Webdriver protocol and is built to automate web and mobile applications. It is an open-source project that is run with open governance and owned by a non-profit entity called OpenJS Foundation. The WDIO runner currently supports Mocha, Jasmine, and Cucumber frameworks and is capable of generating a host of reports including a JUnit report.
There are two ways to integrate AIO Tests with Webdriver IO either via the JUnit report or via AIO REST API calls in afterTest hooks of Webdriver IO. This document provides an overview on :
Generating the Junit report from WebdriverIO tests and uploading it to AIO Tests.
Using AIO Tests REST APIs to report results and much more, using the WDIO framework hooks.
The demo example is based on the Getting Started project of Webdriver IO.
In this documentation, you’ll understand:
Required WDIO Setup
npm init wdio ./path/to/new/project. On the prompt to select framework, select Mocha.For reporting results:
For JUnit Report:
npm install @wdio/junit-reporter --save-devFor Reporting Results via AIO Tests API:
npm install axios(This can be replaced with any library to make API calls).
Running Your Tests
The sample test generated by Webdriver IO is as follows. One more test has been added to demo an error case.
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!');
});
it('should login with invalid credentials : ', async () => {
await LoginPage.open();
await LoginPage.login('tomsmith', 'SuperSecretPassword1');
await expect(SecurePage.flashAlert).toBeExisting();
await expect(SecurePage.flashAlert).toHaveTextContaining(
'You logged into a secure area!');
});
});To trigger the WDIO tests, use:
npx wdio run wdio.conf.js
Or
npm run wdio
Reporting Results via JUnit File
Setting up WDIO JUnit Reporter
The WDIO JUnit reporter requires a configuration in the wdio.conf.js which is the configuration file for Webdriver IO. JUnit reporter along with any other reporter can be setup as follows :
framework: 'mocha',
// Test reporter for stdout.
// The only one supported by default is 'dot'
// see also: https://webdriver.io/docs/dot-reporter
reporters: ['spec',['junit', {
outputDir: './',outputFileFormat: function(options) {
return `wdio-junit-results.xml`
}}]],Running the tests generates the following Junit XML:
Uploading Results to AIO Tests
Post execution of a suite, the TEST-<xxx>.xml file can be uploaded either via
AIO Tests REST API calls using multipart form data to upload file
Please follow the above links to continue to import results using either of the options.
Uploading the above file for the first time will
Create new cases in the system. The new case is created with
- Title as thenamevalue from <testcase> tag of the JUnit report
- Automation key asclassname.namefrom the JUnit report.
- Status as Published
- Automation status as Automated
- Automation owner as a user uploading the resultsAdd the newly created case to the cycle being uploaded.
Mark the details of the run
Execution mode is set to Automated
The duration of A run is set to the Actual Effort
The status of a run is set based on the status mapping table below
Failures and errors are reported as Run Level comments
If the same file is uploaded again, the cases will be identified using the automation key (
classname.name )and would be updated, instead of creating new cases.
There is no way to map case keys to WDIO cases for the JUnit report since the WDIO JUnit reporter strips off all non-alphanumeric characters while generating the JUnit report.
e.g. If the test name is “describe('My Login application SCRUM-TC-11'" the Junit report strips of the hyphens and reports it as <testcase classname="chrome.103_0_5060_114.macosx.My_Login_application" name="should login with valid credentials SCRUM TC 11" time="14.112">
Status Mapping JUnit → AIO Tests
JUnit XML | Description | AIO Tests Mapping |
|---|---|---|
No tag inside <testcase> means Passed | Passed case | Passed |
</skipped> | Skipped case either by @Ignore or others | Not Run |
</failure> |
| Failed |
</error> |
| Failed |
Reporting Results via WebdriverIO Mocha Hooks and AIO Tests REST APIs
AIO Tests provides a rich set of APIs for Execution Management, using which users can not only report execution status, but also add effort, actual results, comments, defects and attachments to runs as well as steps.
AIO Tests also provides APIs to create cycles and to add cases to cycles for execution planning.
The basic sample below will show how Mocha Hooks in WebdriverIO can leverage the AIO Tests REST APIs to report results. In the wdio.conf.js, the afterTest method can be used to make an AIO API call.
Mocha aftestTest Method
The afterTest call is defined as below: [ref Configuration File | WebdriverIO ]
Establish a Convention for AIO Tests Case Keys
For the purpose of the example, we have established a convention to map cases - the AIO Tests case key is the prefix to the case title e.g. it('NVPROJ-TC-11: should login with valid credentials' contains NVPROJ-TC-11, which is the AIO Tests Case key.
Any convention can be established and the code consuming it can cater to the convention. In our case, we are using startsWith to identify the case key.
Reporting Result via API
In the example below, the postResults method uses Axios to make an HTTP call.
It uses the test title to identify the case key [ based on the convention we established]
Create a POST request
URL: For cloud the URL host would be
https://tcms.aiojiraapps.com/aio-tcms/api/v1. For the Jira server, it would be the native Jira server hostname.Authorization: Please refer to Rest API Authentication to understand how to authorize users. The authentication information goes in the
headers: {'Authorization': '<Auth based on Jira Cloud/Jira Server>'},POST Body: The body consists of data from the test object provided by Webdriver IO. If the case has failed, the error is posted as comments.
If required, the basic example can be extended to upload attachments against the case using the upload attachment API.
Running the above in the afterTest method will result in 2 cases being added to cycle NVPROJ-CY-48.
NVPROJ-TC-11: should login with valid credentials- NVPROJ-TC-11 will be added to the cycle with status as passed and duration.NVPROJ-TC-12: should login with invalid credentials- NVPROJ-TC-12 will be added to the cycle with the status as Failed and comments would hold the error messages.
The above is a basic example of what can be done with the hooks and AIO Tests APIs. It is recommended to add appropriate error handling and enhance it based on your automation requirements.
For further queries and suggestions, feel free to reach out to our customer support via help@aiotests.com.