DFPL-2289 - Upgrade Playwright and Introduce Linting for Tests

.yarnrc.yml

@@ -1,2 +1,3 @@
 nodeLinker: node-modules
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+
+yarnPath: .yarn/releases/yarn-3.8.2.cjs

eslint.config.js

@@ -0,0 +1,18 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    ignores: [
+      "e2e/*",
+      "codecept.conf.js",
+      ".eslintrc.js",
+      "typings/*",
+      "saucelabs.conf.js",
+    ],
+  },
+);

package.json

@@ -1,21 +1,23 @@
 {
   "name": "fpl-ccd-configuration",
   "version": "1.0.0",
+  "type": "module",
   "description": "FPL CCD e2e tests",
   "engines": {
     "node": ">=18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.0",
     "@babel/eslint-parser": "^7.17.0",
-    "@playwright/test": "^1.40.1",
+    "@eslint/js": "^9.0.0",
+    "@playwright/test": "^1.43.1",
     "@types/node": "^20.10.7",
     "@types/qs": "^6.9.11",
     "axios": "^1.6.7",
     "codeceptjs": "3.5.10",
     "dateformat": "^4.6.3",
     "debug": "4.3.4",
-    "eslint": "7.32.0",
+    "eslint": "^8.0.0",
     "eslint-plugin-codeceptjs": "^1.3.0",
     "glob": "^7.2.3",
     "html_codesniffer": "^2.5.1",
@@ -29,11 +31,13 @@
     "moment": "2.30.1",
     "node-fetch": "^2.6.9",
     "node-gyp": "^9.4.0",
+    "playwright-core": "^1.43.1",
     "qs": "^6.11.2",
+    "typescript": "^5.4.5",
     "webdriverio": "8.36.1"
   },
   "scripts": {
-    "lint": "eslint e2e",
+    "lint": "yarn eslint .",
     "typings": "codeceptjs def && mv steps.d.ts typings/codeceptjs.d.ts",
     "test": "codeceptjs run-multiple parallel",
     "test:functional": "NODE_TLS_REJECT_UNAUTHORIZED=0 MOCHAWESOME_REPORTFILENAME=functional codeceptjs run-multiple parallel --grep '(?=.*)^(?!.*(@smoke-tests|@flaky|@nightlyOnly))' --reporter mocha-multi --verbose",
@@ -56,7 +60,7 @@
   "resolutions": {
     "yargs-parser": "^20.2.9"
   },
-  "packageManager": "yarn@3.6.4",
+  "packageManager": "yarn@3.8.2",
   "license": "MIT",
   "dependencies": {
     "@axe-core/playwright": "^4.8.5",

playwright-e2e/fixtures/axe-fixture.ts

@@ -6,7 +6,7 @@ type AxeFixture = {
 };
 
 export const test = base.extend<AxeFixture>({
-  makeAxeBuilder: async ({ page }, use, testInfo) => {
+  makeAxeBuilder: async ({ page }, use) => {
     const makeAxeBuilder = () =>
       new AxeBuilder({ page })
         .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22a", "wcag22aa"])

playwright-e2e/pages/add-application-documents.ts

@@ -1,6 +1,5 @@
 import { type Page, type Locator, expect } from "@playwright/test";
 import config from "../settings/test-docs/config";
-import path from "path";
 
 export class AddApplicationDocuments {
 
@@ -10,7 +9,7 @@ export class AddApplicationDocuments {
     readonly typeOfDocument: Locator;
     readonly chooseFileButton: Locator;
     readonly giveDetailsText: Locator;
-  
+
     public constructor(page: Page) {
       this.page = page;
       this.applicationDocumentsHeading = page.getByRole('heading', { name: 'Application documents' });
@@ -27,12 +26,12 @@ export class AddApplicationDocuments {
         await this.typeOfDocument.selectOption('8: BIRTH_CERTIFICATE');
         await this.page.locator('input#temporaryApplicationDocuments_0_document').first().setInputFiles(config.testPdfFile);
         // Wait for the "Uploading..." process to finish otherwise step will fail
-        await this.page.locator('span.error-message:has-text("Uploading...")').isVisible();
-        await expect(this.page.locator('span.error-message:has-text("Uploading...")')).toBeHidden();
+        await this.page.locator('span.error-message:text("Uploading...")').isVisible();
+        await expect(this.page.locator('span.error-message:text("Uploading...")')).toBeHidden();
         await this.giveDetailsText.isVisible();
         await this.giveDetailsText.fill('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.');
         await this.page.getByRole('button', { name: 'Continue' }).click();
         await this.page.getByRole('heading', { name: 'Check your answers' }).click();
         await this.page.getByRole('button', { name: 'Save and continue' }).click();
       }
-}
+}

playwright-e2e/pages/additional-applications.ts

@@ -67,6 +67,14 @@ export class AdditionalApplications extends BasePage {
     await this.clickContinue();
   }
 
+
+  public async expectAllUploadsCompleted() {
+    const locs = await this.page.getByText('Cancel upload').all();
+    for (let i = 0; i < locs.length; i++) {
+      await expect(locs[i]).toBeDisabled();
+    }
+  }
+
   public async fillC2ApplicationDetails() {
     // upload application form
     await this.c2ApplicationForm.setInputFiles(config.testTextFile);

playwright-e2e/pages/allocation-proposal.ts

@@ -1,4 +1,4 @@
-import { type Page, type Locator, expect } from "@playwright/test";
+import { type Page, type Locator } from "@playwright/test";
 
 export class AllocationProposal {
 

playwright-e2e/pages/applicant-details.ts

@@ -1,4 +1,4 @@
-import { type Page, type Locator, expect } from "@playwright/test";
+import { type Page, type Locator } from "@playwright/test";
 import { BasePage } from "./base-page";
 
 export class ApplicantDetails extends BasePage{

playwright-e2e/pages/base-page.ts

@@ -53,7 +53,7 @@ export class BasePage {
   }
 
   async waitForAllUploadsToBeCompleted() {
-    let locs = await this.page.getByText('Cancel upload').all();
+    const locs = await this.page.getByText('Cancel upload').all();
     for (let i = 0; i < locs.length; i++) {
       await expect(locs[i]).toBeDisabled();
     }
@@ -69,7 +69,7 @@ export class BasePage {
     expect(await this.reloadAndCheckForText(userName, 10000, 3)).toBeTruthy();
   }
 
-  async reloadAndCheckForText(text: string, timeout?: number, maxAttempts?: number): Promise<Boolean> {
+  async reloadAndCheckForText(text: string, timeout?: number, maxAttempts?: number): Promise<boolean> {
     // reload the page, wait 5s, see if it's there
     for (let attempt = 0; attempt < (maxAttempts ?? 12); attempt++) {
       await this.page.reload();

playwright-e2e/pages/create-case.ts

@@ -8,7 +8,7 @@ export class CreateCase{
   readonly createCaseLink: Locator;
   readonly addApplicationTitle: Locator;
   readonly viewHistory: Locator;
-  generatedCaseName: any;
+  generatedCaseName: string;
 
   public constructor(page: Page) {
     this.page = page;
@@ -19,6 +19,7 @@ export class CreateCase{
       name: "Add application details",
     });
     this.viewHistory = page.getByText("History");
+    this.generatedCaseName = "";
   }
 
   async createCase() {
@@ -40,7 +41,7 @@ export class CreateCase{
   }
 
    caseName()  {
-    let formattedDate = CreateCaseName.getFormattedDate();
+    const formattedDate = CreateCaseName.getFormattedDate();
     this.generatedCaseName = `Smoke Test ${formattedDate}`;
   }
 
@@ -70,7 +71,7 @@ export class CreateCase{
     await this.page.getByLabel("Case name").fill(caseName);
     await this.page.getByLabel("Apply filter").click();
     await this.page.getByLabel("Day").click();
-    await expect(this.page.getByText(caseName)).toBeVisible;
+    expect(this.page.getByText(caseName).isVisible());
     await this.page.getByText(caseName).click();
   }
 }

playwright-e2e/pages/gatekeeping-listing.ts

@@ -1,6 +1,5 @@
 import {BasePage} from "./base-page";
 import {expect, Page} from "@playwright/test";
-import {ManageHearings} from "./manage-hearings";
 import {HearingDetailsMixin} from "./mixins/hearing-details-mixin";
 
 export class GatekeepingListing extends HearingDetailsMixin(BasePage)

playwright-e2e/pages/international-element.ts

@@ -1,4 +1,4 @@
-import { type Page, type Locator, expect } from "@playwright/test";
+import { type Page, type Locator } from "@playwright/test";
 import { BasePage } from "./base-page";
 
 export class InternationalElement extends BasePage {

playwright-e2e/pages/manage-hearings.ts

@@ -1,4 +1,4 @@
-import {type Page, type Locator, expect} from "@playwright/test";
+import {type Page, type Locator } from "@playwright/test";
 import {BasePage} from "./base-page";
 import {HearingDetailsMixin} from "./mixins/hearing-details-mixin";
 

playwright-e2e/pages/respondent-details.ts

@@ -1,4 +1,4 @@
-import { type Page, type Locator, expect } from "@playwright/test";
+import { type Page, type Locator } from "@playwright/test";
 
 export class RespondentDetails {
 

playwright-e2e/pages/start-application.ts

@@ -53,27 +53,15 @@ export class StartApplication {
     this.childDetailsUpdated = page.locator('p').filter({ hasText: 'Child\'s Details' }).getByRole('img', { name: 'Information added' });
     this.welshLanguageRequirements = page.getByRole('link', { name: 'Welsh language requirements' });
     this.welshLanguageReqFinished = page.locator('p:has(a[text="Welsh language requirements"]) > img[title="Finished"]');
+
     this.internationalElementsHeading = page.getByRole('link', { name: 'International element' });
     this.submitApplicationLink = page.getByRole('link', { name: 'Submit application' });
-    this.welshLanguageReqFinished = page.locator('p:has(a[text="Welsh language requirements"]) > img[title="Finished"]');
-    this.courtServicesNeeded = page.getByRole('link', { name: 'Court services needed' });
 
-  }
 
-  async addApplicationDetails() {
-    await expect(this.addApplicationDetailsHeading).toBeVisible();
-  }
+    this.courtServicesNeeded = page.getByRole('link', { name: 'Court services needed' });
 
-  async ordersAndDirectionsSought() {
-    await this.ordersAndDirectionsSoughtLink.isVisible();
-    await this.ordersAndDirectionsSoughtLink.click();
   }
 
-  async hearingUrgency() {
-    await this.hearingUrgencyLink.isVisible();
-    await this.hearingUrgencyLink.click();
-    await expect(this.hearingUrgencyHeader).toBeVisible();
-  }
 
   async groundsForTheApplication() {
     await this.groundsForTheApplicationLink.isVisible();
@@ -82,8 +70,7 @@ export class StartApplication {
   }
 
   async groundsForTheApplicationHasBeenUpdated() {
-    await expect(this.groundsForTheApplicationHasBeenUpdatedFinished)
-      .toBeVisible;
+    await this.groundsForTheApplicationHasBeenUpdatedFinished.isVisible;
   }
 
   async riskAndHarmToChildren() {

playwright-e2e/pages/welsh-lang-requirements.ts

@@ -1,4 +1,4 @@
-import { type Page, type Locator, expect } from "@playwright/test";
+import { type Page, type Locator } from "@playwright/test";
 import { BasePage } from "./base-page";
 
 export class WelshLangRequirements extends BasePage {
@@ -10,7 +10,7 @@ export class WelshLangRequirements extends BasePage {
     readonly englishLangRadio: Locator;
     readonly needToBeTranslatedQuestion: Locator;
     readonly needToBeInWelshYesRadio: Locator;
-    
+
     constructor(page: Page) {
         super(page);
         this.welshLangHeading = page.getByRole('heading', { name: 'Welsh language requirements' });
@@ -30,7 +30,7 @@ export class WelshLangRequirements extends BasePage {
         await this.needToBeTranslatedQuestion.isVisible();
         await this.needToBeInWelshYesRadio.click();
         await this.clickContinue();
-        await this.checkYourAnswersHeader.isVisible;
+        await this.checkYourAnswersHeader.isVisible();
         await this.checkYourAnsAndSubmit();
     }
 }

playwright-e2e/settings/test-docs/config.ts

@@ -1,21 +1,25 @@
-import path from "path";
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
 
-export interface testFiles {}
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+interface testFiles {}
 
 interface Config {
   [key: string]: testFiles | string;
 }
 
 const config: Config = {
-  testPdfFile: path.resolve(
+  testPdfFile: join(
     __dirname,
     "../test-docs/testPdf.pdf",
   ),
-  testWordFile: path.resolve(
+  testWordFile: join(
     __dirname,
     "../test-docs/testWordDoc.docx",
   ),
-  testTextFile: path.resolve(
+  testTextFile: join(
     __dirname,
     "../test-docs/testTextFile.txt",
   ),

playwright-e2e/settings/urls.ts

@@ -7,7 +7,7 @@ interface UrlConfig {
 
 export const urlConfig: UrlConfig = {
   idamUrl: process.env.AAT_IDAM_URL || `https://idam-api.${env}.platform.hmcts.net`,
-  serviceUrl: process.env.AAT_SERVICE_URL || `http://fpl-case-service-${env}.service.core-compute-${env}.internal`,
+  serviceUrl: process.env.AAT_SERVICE_URL || `http://fpl-case-service-${env}.service.core-compute-${env}.internal/`,
   frontEndBaseURL: process.env.FE_BASE_URL || `https://manage-case.${env}.platform.hmcts.net/`,
   // You can add other URLs as needed
 };

playwright-e2e/tests/additional-applications.spec.ts

@@ -1,24 +1,27 @@
 import { test } from '../fixtures/create-fixture';
-import { Apihelp } from '../utils/api-helper';
-import caseData from '../caseData/mandatorySubmissionFieldsWithoutAdditionalApp.json';
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
 import { newSwanseaLocalAuthorityUserOne, judgeWalesUser } from '../settings/user-credentials';
 import { expect } from "@playwright/test";
 import { testConfig } from '../settings/test-config';
+import {createCase, updateCase} from "../utils/api-helper";
 
 test.describe('Upload additional applications', () => {
-  let apiDataSetup = new Apihelp();
   const dateTime = new Date().toISOString();
   let caseNumber: string;
-  let casename: string;
+  let caseName: string;
+  const caseData = require('../caseData/mandatorySubmissionFieldsWithoutAdditionalApp.json');
 
-  test.beforeEach(async () => {
-    caseNumber = await apiDataSetup.createCase('e2e case', newSwanseaLocalAuthorityUserOne);
+
+
+    test.beforeEach(async () => {
+    caseNumber = await createCase('e2e case', newSwanseaLocalAuthorityUserOne);
   });
 
   test('LA uploads a C1 application',
     async ({ page, signInPage, additionalApplications }) => {
-      casename = 'LA uploads an other application ' + dateTime.slice(0, 10);
-      await apiDataSetup.updateCase(casename, caseNumber, caseData);
+      caseName = 'LA uploads an other application ' + dateTime.slice(0, 10);
+      await updateCase(caseName, caseNumber, caseData);
       await signInPage.visit();
       await signInPage.login(newSwanseaLocalAuthorityUserOne.email, newSwanseaLocalAuthorityUserOne.password);
       await signInPage.navigateTOCaseDetails(caseNumber);
@@ -64,8 +67,8 @@ test.describe('Upload additional applications', () => {
 
   test('LA uploads a C2 application with draft order',
     async ({ page, signInPage, additionalApplications }) => {
-      casename = 'LA uploads a C2 application with draft order ' + dateTime.slice(0, 10);
-      await apiDataSetup.updateCase(casename, caseNumber, caseData);
+      caseName = 'LA uploads a C2 application with draft order ' + dateTime.slice(0, 10);
+      await updateCase(caseName, caseNumber, caseData);
       await signInPage.visit();
       await signInPage.login(newSwanseaLocalAuthorityUserOne.email, newSwanseaLocalAuthorityUserOne.password);
       await signInPage.navigateTOCaseDetails(caseNumber);
@@ -94,8 +97,8 @@ test.describe('Upload additional applications', () => {
 
   test('LA uploads combined Other and C2 applications',
     async ({ page, signInPage, additionalApplications }) => {
-      casename = 'LA uploads additional application with both Other and C2 ' + dateTime.slice(0, 10);
-      await apiDataSetup.updateCase(casename, caseNumber, caseData);
+      caseName = 'LA uploads additional application with both Other and C2 ' + dateTime.slice(0, 10);
+      await updateCase(caseName, caseNumber, caseData);
       await signInPage.visit();
       await signInPage.login(newSwanseaLocalAuthorityUserOne.email, newSwanseaLocalAuthorityUserOne.password);
       await signInPage.navigateTOCaseDetails(caseNumber);