Gitlab CI/CD: TypeScript/Playwright

Updating aqua Test Case Execution based on Test Case run in GitLab

First, generate a new project in your workspace.

Then make sure that Node.js is installed.

Install Playwright (choose TypeScript during installation process):

“npm init playwright@latest”

Create a Playwright Test Case. In this example we will use basic steps to exercise https://playwright.dev website:

For automation purpose let's assume that the Test title is based on the actual aqua Test Case Id: e.g in the case above we will update aqua Test Case with Id=270.

Now we need to update Aqua Test Case Execution based on the result of the Playwright Test Case run. To make it general and executable for all cases in identical manner we will add “AfterEach” hook in TestBase class “testBase.ts”. Each new test will inherit it. TestBase class looks as follows:

import { test } from '@playwright/test';
import { EnvAquaRestConfig } from '../aquaAPI/envAquaRestConfig';
import { ApiTestExecutionNew,
        ApiTestStepExecutionStepType,
        ApiTestStepExecutionUpdateStatus,
        TestExecutionClient } from '../aquaAPI/src/api/aqua';




export class TestBase{}


test.afterEach(async ({ page }) => {
 console.log(`Finished ${test.info().title} with status ${test.info().status}`);


 if (test.info().status !== test.info().expectedStatus)
   console.log(`Did not run as expected, ended up at ${page.url()}`);


    const restConfig = new EnvAquaRestConfig();
   const client = new TestExecutionClient(restConfig.url, { fetch });
   const testCaseId = Number(test.info().title);


   let stepStatus = ApiTestStepExecutionUpdateStatus.Pass;
   if (test.info().status === 'failed') {
     stepStatus = ApiTestStepExecutionUpdateStatus.Failed;
   } else if (test.info().status != 'passed') {
     throw new Error('no such status for test case execution');
   }
  
   const executionData = {
     Guid: undefined,
     TestCaseId: testCaseId,
     TestCaseName: undefined,
     Finalize: false,
     ValueSetName: undefined,
     TestScenarioInfo: undefined,
     Steps: [
       {
         Index: 1,
         Name: 'Step 1',
         StepType: ApiTestStepExecutionStepType.Step,
         Status: stepStatus,
       },
     ],
     TestedVersion: undefined,
     ExecutionDuration: undefined,
     AttachedLabels: undefined,
     CustomFields: undefined,
     Attachments: undefined
   } as unknown as ApiTestExecutionNew;
    await client.create([executionData]);
  
});

For the above API request we need to know test case execution status from Playwright. This is being done by “test.info().status”.

To update aqua with Test Case Execution info we also need to provide aqua Test Case Id: in the above example test case id is extracted from “Number(test.info().title)”.

Classes we use for API calls can be generated from JSON schema available here: https://app.aqua-cloud.io/aquaWebNG/swagger/v1/swagger.json

After successful Playwright test execution we should see corresponding single Test Case execution in aqua

To be able to run the above Playwright Project using GitLab CI/CD we need to create workflow file .gitlab-ci.yml. An example of .gitlab-ci.yml script is shown below:

stages:
 - test


tests:
 stage: test
 image: mcr.microsoft.com/playwright:v1.42.0-jammy
 script:
   - npm ci
   - npx playwright test

Once a GitLab test runner is configured and connected to your GitLab projects we can Run GitLab Pipeline using the above workflow:

Link to GitLab Repository - https://gitlab.com/aqua3191704/playwright-typescript-gitlab.git