AIO Tests supports importing Playwright test results through 3 options, using the AIO Tests Playwright reporter, or using JUnit reports/Cucumber reports generated via Playwright or via the AIO Tests REST APIs, which can be invoked from the hooks available in Playwright.

Playwright is an open-source NodeJS-based framework by Microsoft used for web testing and automation. It supports end-to-end cross-browser testing through its high-level API, allowing the tester to control a wide variety of browsers and also headless browsers.

The choice of whether to use the reporter or results file or REST APIs depends on the level of customization that a team needs to achieve. Playwright reporter can report results to existing cases and provides features like cycle creation options. While with Playwright JUnit/Cucumber reports or REST APIs, custom flows can be developed as per team’s needs.

This document provides details on using Playwright reports or hooks to report results:

Generating the Junit report from Playwright tests and uploading it to AIO Tests.
Generating Cucumber reports with Playwright + Cucumber and uploading it in AIO Tests
Using AIO Tests REST APIs to report results and much more, using the Playwright framework hooks.

For details on the native reporter, please refer to AIO Tests Playwright reporter.

In this documentation, you’ll understand:

1 Playwright + JUnit
- 1.1 Required Playwright Setup
- 1.2 Mapping and Running Your Tests
- 1.3 Reporting Results via JUnit File
  - 1.3.1 Using the Native JUnit Reporter
  - 1.3.2 Uploading Results to AIO Tests
  - 1.3.3 Status Mapping JUnit → AIO Tests
- 1.4 Reporting Results via Playwright Hooks and AIO Tests REST APIs
  - 1.4.1 Playwright onTestEnd Method
  - 1.4.2 Establish a Convention for AIO Tests Case Keys
  - 1.4.3 Reporting Result via API
2 Playwright + Cucumber Setup
- 2.1 Mapping and Running Your Tests
  - 2.1.1 Uploading Results to AIO Tests
- 2.2 Reporting Results via Cucumber Hooks and AIO Tests REST APIs

Playwright + JUnit

The demo example is based on the Getting Started project of Playwright.

Required Playwright Setup

npm init playwright@latest. On the prompt, select the tests folder.
For reporting results:
1. For JUnit report : PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit
2. For reporting results via AIO Tests API : npm install axios (This can be replaced with any library to make API calls).

Mapping and Running Your Tests

The sample test generated by Playwright is as follows.

In AIO Tests, a unique key PROJKEY-TC-12 exists for each case. The unique key can be added to the test name to report results against it in AIO Tests.

The example below shows PROJ1-TC-23 added to the test name. On running the test, the reports will contain the case key.

const { test, expect } = require('@playwright/test');

test.beforeEach(async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
});

const TODO_ITEMS = [
  'feed the cat',
  'book a doctors appointment'
];

test.describe('New Todo', () => {
  test('PROJ1-TC-23 : should allow me to add todo items', async ({page}) => {
    // create a new todo locator
    const newTodo = page.getByPlaceholder('What needs to be done?');

    // Create 1st todo.
    await newTodo.fill(TODO_ITEMS[0]);
    await newTodo.press('Enter');

    // Make sure the list only has one todo item.
    await expect(page.getByTestId('todo-title')).toHaveText([
      TODO_ITEMS[0]
    ]);

    // Create 2nd todo.
    await newTodo.fill(TODO_ITEMS[1]);
    await newTodo.press('Enter');

    // Make sure the list now has two todo items.
    await expect(page.getByTestId('todo-title')).toHaveText([
      TODO_ITEMS[0],
      TODO_ITEMS[1]
    ]);

  });
});

To trigger the Playwright tests, use:

npx playwright test

Reporting Results via JUnit File

Using the Native JUnit Reporter

Playwright Test comes with a few built-in reporters for different needs and the ability to provide custom reporters. The easiest way to try out built-in reporters is to pass --reporter.

Running the tests generates the following Junit XML:

<testsuites id="" name="" tests="1" failures="0" skipped="0" errors="0" time="4.201744999885559">
<testsuite name="example.spec.js" timestamp="1675073959913" hostname="" 
tests="1" failures="0" skipped="0" time="2.681" errors="0">
<testcase name="New Todo PROJ1-TC-23 : should allow me to add todo items" 
classname="[chromium] › example.spec.js › New Todo › PROJ1-TC-23 : should allow me to add todo items" time="2.681">
</testcase>
</testsuite>
</testsuites>

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 files
Cycle options in the Cycles Tab inside AIO Tests
via AIO Tests Jenkins Plugin

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 the name value from <testcase> tag of the JUnit report
- Automation key as classname.name from the JUnit report.
- Status as Published
- Automation status as Automated
- Automation owner as a user uploading the results
Add the newly created case to the cycle being uploaded.
Mark the details of the run.
1. Execution mode is set to Automated
2. The duration of the run is set to the Actual Effort
3. The status of the run is set based on the status mapping table below
4. 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.

Status Mapping JUnit → AIO Tests

JUnit XML	Description	AIO Tests Mapping

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>	`Indicates that the test failed. A failure is a test which the code has explicitly failed by using the mechanisms for that purpose. e.g., via an assertEquals.`	Failed
</error>	`Indicates that the test errored. An errored test is one that had an unanticipated problem. e.g., an unchecked throwable;`	Failed

Reporting Results via Playwright 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 the Playwright Reporter API can leverage the AIO Tests REST APIs to report results. onTestEnd method can be used to make an AIO API call.

Playwright onTestEnd Method

onTestEnd(test: TestCase, result: TestResult) {
    console.log(`Finished test ${test.title}: ${result.status}`);
}

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.

describe('My Login application', () => {
    it('NVPROJ-TC-11: 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('NVPROJ-TC-12: 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!');
    });
});

Reporting Result via API

The playwright provides a way to develop custom reporters.

In the example below, a new class AIOReporter (aio-reporter.js) uses the onTestEnd method to make a call to the AIO REST API.

const axios = require('axios');

class AIOReporter {

    promises = [];
    onTestEnd(test, result) {
        this.promises.push(this.postResults(test, result));
    }

    postResults(test, result) {
        if(test.title.startsWith("NVTES-TC-")) {
            let tc = test.title.split(":")[0].trim()
            console.log("Reporting results ..." + tc)
            let resultData = {"testRunStatus": result.status === 'passed'? "Passed" :"Failed", "effort": result.duration/1000};
            if(result.status !== 'passed')
            {
                resultData["comments"] = [result.error];
            }
            return axios({
                method: 'post',
                url: `https://tcms.aiojiraaaps.com/aio-tcms/api/v1/project/NVTES/testcycle/NVTES-CY-434/testcase/${tc}/testrun`,
                headers: {'Authorization': 'AioAuth yourtokenhere'},
                data :resultData
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch((e) => console.log(e.response.data));
        }
    }
    
    //On End returns a promise and hence it is important, since onTestEnd is not async
    onEnd(result) {
        return Promise.all(this.promises);
        //On end can also be used to simply import the Junit file in AIO, using the
        //Import results API.  For code sample of Import Results API, please refer 
        //to Reporting results via Cucumber Hooks and AIO Tests REST APIs sample
    }
}

module.exports = AIOReporter;

Register the reporter in the playwright.config file as below:

reporter: './aio-reporter.js',

In the example above, the postResults method uses Axios to make an HTTP call.

It uses the test title to identify the case key [ based on the convention established]
Create a POST request
1. 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.
2. 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>'},
3. POST Body: The body consists of data from the test and result object provided by the Playwright. If the case has failed, the error is posted as comments.
4. If required, the basic example can be extended to upload attachments against the case using the upload attachment API.

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.

Playwright + Cucumber Setup

npm init playwright@latest. On prompt, select the tests folder
npm install @cucumber/cucumber.

Mapping and Running Your Tests

Cucumber generates a cucumber.json report which can be directly imported in AIO Tests.

In AIO Tests, a unique key PROJKEY-TC-12 exists for each case. The unique key can be added to the scenario tags to report results against it in AIO Tests. All scenarios that are not tagged, will be created as new cases, along with the steps from the JSON report.

The below example maps a scenario to an AIO Case.

@P0
Feature: Minimal Scenario

  @NVTES-TC-33
  Scenario: Justified reasoning
    Given If there is "here" and "there"
    Then I attain nirvana

To trigger the cucumber tests:

./node_modules/.bin/cucumber-js -f json:tmp/cucumber_report1.json --exit

This would generate the Cucumber JSON report as below:

[
  {
    "description": "",
    "elements": [
      {
        "description": "",
        "id": "minimal-scenario;justified-reasoning",
        "keyword": "Scenario",
        "line": 5,
        "name": "Justified reasoning",
        "steps": [
          {
            "arguments": [],
            "keyword": "Given ",
            "line": 6,
            "name": "If there is \"here\" and \"there\"",
            "match": {
              "location": "features/support/steps.js:9"
            },
            "result": {
              "status": "passed",
              "duration": 1546712
            }
          },
          {
            "arguments": [],
            "keyword": "Then ",
            "line": 7,
            "name": "I attain nirvana",
            "match": {
              "location": "features/support/steps.js:14"
            },
            "result": {
              "status": "passed",
              "duration": 154070
            }
          }
        ],
        "tags": [
          {
            "name": "@P0",
            "line": 1
          },
          {
            "name": "@NVTES-TC-33",
            "line": 4
          }
        ],
        "type": "scenario"
      }
    ],
    "id": "minimal-scenario",
    "line": 2,
    "keyword": "Feature",
    "name": "Minimal Scenario",
    "tags": [
      {
        "name": "@P0",
        "line": 1
      }
    ],
    "uri": "features/AIODemo.feature"
  }
]

Uploading Results to AIO Tests

Post execution of a suite, the cucumber.json file can be uploaded either via

AIO Tests REST API calls using multipart form data to upload file
Cycle options in Cycles Tab inside AIO Tests
via AIO Tests Jenkins Plugin

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 the scenario description
- Automation key as scenario.id from the JSON report.
- Steps
- Status as Published
- Automation status as Automated
- Automation owner as user uploading the results
Add the newly created case to the cycle being uploaded to
Mark the details of the run
1. Execution mode is set to Automated
2. The duration of a run is set to the Actual Effort
3. The status of a run is set based on the status mapping table below
4. Failures and errors are reported as Run Level comments
5. Step-level results and step-level actual results in case of failure

If the same file is uploaded again, the cases will be identified using the automation key (scenario.id)and would be updated, instead of creating new cases.

Reporting Results via Cucumber 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 Cucumber Hooks can leverage the AIO Tests REST APIs to report results.

//support/handlers.js
const {AfterAll } = require( "@cucumber/cucumber");
const fs = require('fs');
const axios = require('axios');
const FormData = require('form-data');

AfterAll(  function () {
  //Time out is necessary since the cucumber report is not generated otherwise
  setTimeout(() => {
    let promises = [];
    fs.readdirSync("./tmp/").forEach(file => {
        var bodyFormData = new FormData();
        bodyFormData.append('file', fs.createReadStream( file));
        bodyFormData.append('createCase', 'true');
        bodyFormData.append('bddForceUpdateCase','true');
        promises.push(axios.post(`https://tcms.aiojiraapps.com/aio-tcms/api/v1/project/{jiraProjectKey}/testcycle/{cyclekey}/import/results?type=Cucumber`,
            bodyFormData, {
                headers: {'Authorization': 'AioAuth yourtoken', 'Content-Type': 'multipart/form-data'}
            }).then(function (response) {
            console.log(response.data)
        }).catch((e) => console.log(e.response)))
    });
    return await Promise.all(promises);
   }, 2000);
})

To trigger the playwright tests with the above file, the reporting file needs to be provided to cucumber-js, using the following command:
./node_modules/.bin/cucumber-js -f json:./tmp/cucumber_report1.json --require features/support/handlers.js --require features/support/steps.js

For further queries and suggestions, feel free to reach out to our customer support via help@aiotests.com.

AIO Tests Knowledge Base

Playwright

Playwright + JUnit

Required Playwright Setup

Mapping and Running Your Tests

Reporting Results via JUnit File

Using the Native JUnit Reporter

Uploading Results to AIO Tests

Status Mapping JUnit → AIO Tests

Reporting Results via Playwright Hooks and AIO Tests REST APIs

Playwright onTestEnd Method

Establish a Convention for AIO Tests Case Keys

Reporting Result via API

Playwright + Cucumber Setup

Mapping and Running Your Tests

Uploading Results to AIO Tests

Reporting Results via Cucumber Hooks and AIO Tests REST APIs

Related content