Gitlab CI/CD: TypeScript/Cypress

This guide demonstrates integrating automated testing into your GitLab CI/CD pipeline, specifically using Typescript/Cypress. However, the steps can be adapted for any test automation tool or framework to submit results to aqua.

Prerequisites

• a GitLab project with CI/CD enabled

• an aqua account to submit test results

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

1. Generate new project in your workspace

2. Make sure that Node.js is installed

3. Install Cypress with TypeScript: “npm install --save-dev typescript” it will result in the following structure:

Write a test case in Cypress. For this demonstration example we will use a UI test which exercises the “https://example.cypress.io” website. The following e2e test is created under /Cypress/e2e/ project folder:

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 updated aqua Test Case with Id=270.

Now we need to update aqua Test Case Execution based on the result of the Cypress Test run. To make it general and executable for all cases we will add “AfterEach” hook block in support file: …/cypress/support/e2e.ts:

import { EnvAquaRestConfig } from '../../aquaClient/envAquaRestConfig';
import { ApiTestExecutionNew, ApiTestStepExecutionStepType, ApiTestStepExecutionUpdateStatus, TestExecutionClient } from '../../aquaClient/src/api/aqua';
import './commands'
import fetch from "node-fetch";


// Alternatively you can use CommonJS syntax:
// require('./commands')


beforeEach (() => {
   // before each test block
})


afterEach(async function () {


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


   cy.log(Cypress.currentTest.title);
   let stepStatus = ApiTestStepExecutionUpdateStatus.Pass;
   if (this.currentTest.state === 'failed') {
     stepStatus = ApiTestStepExecutionUpdateStatus.Failed;
   } else if (this.currentTest.state != '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 Cypress. This is being done by “cy.currentTest.state”.

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(this.currentTest.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 JUnit test execution we should see corresponding single Test Case execution in aqua

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

stages:
 - test


test:
 image: cypress/browsers
 stage: test
 script:
   # install dependencies
   - npm ci
   # run Cypress tests
   - npx cypress run --browser chrome

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/cypress-typescript-gitlab.git