How to resolve “Error: TypeScript compilation failed.” issue in Gitlab CI?

I’m trying to learn to create a pipeline in Gitlab. All my tests fail because of the compilation issue. My code is included below along with the error message.

import loginPage from “../PageObjects/loginPage”;

fixture(‘Login Tests’)
.page(‘https://www.saucedemo.com/’);

test(‘User Login to the website’, async (t) => {
await loginPage.loginWebsite(‘performance_glitch_user’,’secret_sauce’);
});

import { Selector, t } from “testcafe”;

class loginPage{
userName: Selector;
password: Selector;
loginBtn: Selector;
pageName: Selector;

constructor(){
this.userName = Selector(‘#user-name’);
this.password = Selector(‘#password’);
this.loginBtn = Selector(‘#login-button’);
this.pageName = Selector(‘.title’);
}

async loginWebsite(username, password){
await t
.typeText(this.userName, username)
.typeText(this.password, password)
.click(this.loginBtn)
.expect(Selector(this.pageName).innerText).eql(‘Products’);
}
}

export default new loginPage;

package.json

{
“name”: “testcafeproj”,
“version”: “1.0.0”,
“description”: “Assignment”,
“main”: “index.js”,
“scripts”: {
“test”: “testcafe chrome tests/**/*”,
“test2”: “testcafe edge tests/**/*”,
“test:chrome:headless”: “testcafe chrome:headless tests/**/*”,
“test:chrome:reports”: “testcafe chrome tests/* –reporter html:reports/report.html”,
“test:chrome:reports:ss”: “testcafe chrome tests/*.ts -s takeOnFails=true –reporter html:reports/report.html”
},
“author”: “test”,
“license”: “ISC”,
“devDependencies”: {
“faker”: “^5.5.3”,
“faker-js”: “^1.0.0”,
“testcafe”: “^2.4.0”,
“typescript”: “^4.9.5”
},
“dependencies”: {
“@faker-js/faker”: “^7.6.0”,
“testcafe-reporter-html”: “^1.4.6”
}
}

.gitlab-ci.yml

stages:
– test

test_job:
image: cypress/browsers:node18.12.0-chrome107
stage: test
script:
– npm ci
– npm run test:chrome:headless

This is the error message in CI

Source: Read More