Draft - Refactoring work on Playwright tests

package.json

@@ -53,7 +53,7 @@
     "test:smoke:local": "webdriver-manager update --versions.chrome 2.40 && protractor ./test/e2e/config/smoke.conf.js --local",
     "test:crossbrowser": "protractor ./test/e2e/config/crossbrowser.conf.js",
     "test:fullfunctional": "yarn run test:xuiIntegration && yarn run test:functionalApiE2e",
-    "test:fullfunctional2": "yarn playwright install && npx playwright test --project MicrosoftEdge",
+    "test:fullfunctional2": "yarn playwright install && npx playwright test --project chromium",
     "test:fullfunctional:local": "webdriver-manager update --versions.chrome 2.40 && protractor ./test/e2e/config/fullfunctional.conf.js --local",
     "test:functional1": "yarn run test:xuiIntegration && yarn run test:functionalApiE2e",
     "test:functional_old": "yarn test:api && yarn run test:xuiIntegration && yarn run test:codeceptE2E",
@@ -183,6 +183,7 @@
     "@angular/cli": "^17.3.6",
     "@angular/compiler-cli": "^17.3.6",
     "@angular/language-service": "~17.3.6",
+    "@axe-core/playwright": "^4.9.1",
     "@ngrx/schematics": "^17.2.0",
     "@pact-foundation/pact": "^9.11.1",
     "@pact-foundation/pact-node": "^10.9.7",
@@ -210,6 +211,7 @@
     "@types/sinon": "^7.0.13",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
+    "axe-html-reporter": "^2.2.3",
     "base-64": "^0.1.0",
     "chai": "^4.3.10",
     "chai-as-promised": "7.1.1",

playwright_tests/E2E/TCCreateCase_1.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+import { signIn } from "../steps/login-steps"
+// import axeTest from "../helpers/accessibilityTestHelper";
+// import config from "../config"
+import { validateCaseEventNextStepTriggerActions, validateUpdateFormPageNextStepTriggerActions, validateInvalidDateErrorMessage } from '../steps/search-steps';
+
+test.beforeEach(async ({ page }) => {
+    await signIn(page, 'PROD_LIKE');
+    await expect(page.getByRole('heading', { name: 'Case list' })).toBeVisible();
+});
+
+test('Validate Case event next step trigger actions', async ({ page }) => {
+  await validateCaseEventNextStepTriggerActions(page);
+});
+
+test('Validate update form page click on next step trigger actions', async ({ page }) => {
+  await validateUpdateFormPageNextStepTriggerActions(page);
+});
+
+test('Validate invalid date error message @test', async ({ page }) => {
+  await validateInvalidDateErrorMessage(page);
+});

playwright_tests/E2E/login.test.ts → playwright_tests/E2E/login.spec.ts

@@ -1,22 +1,26 @@
 import { test, expect } from '@playwright/test';
-import { signIn } from "./steps/login-steps"
+import { signIn } from "../steps/login-steps"
+import axeTest from "../helpers/accessibilityTestHelper";
 import config from "../config"
 
-test('login and log out from EUI with valid user', async ({ page }) => {
+test('login and log out from EUI with valid user @login', async ({ page }) => {
   await signIn(page, 'PROD_LIKE');
   await expect(page.getByRole('heading', { name: 'Case list' })).toBeVisible();
   await page.getByText('Sign out').click();
   await expect(page.getByRole('heading', { name: 'Sign in or create an account' })).toBeVisible();
+  await axeTest(page);
 });
 
 test('login Verify the direct link navigate to login page', async ({ page }) => {
     await page.goto(config.CaseBaseURL);
+    await axeTest(page);
     await expect(page.getByRole('heading', { name: 'Sign in or create an account' })).toBeVisible();
     await expect(page.url()).toContain('idam-web-public');
   });
 
   test('login un-authenticated user login', async ({ page }) => {
     await page.goto(config.CaseBaseURL);
+    await axeTest(page);
     await page.getByLabel('Email address').fill('[email protected]');
     await page.getByLabel('Password').click();
     await page.getByLabel('Password').fill('123');

playwright_tests/E2E/staff-search.test.ts → playwright_tests/E2E/staff-search.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
-import { signIn, signOut } from "./steps/login-steps";
-import { clickToStaffPage } from "./steps/staff-steps";
+import { signIn, signOut } from "../steps/login-steps";
+import { clickToStaffPage } from "../steps/staff-steps";
 
 test('Simplified search results', async ({ page }) => {
     await signIn(page, "STAFF_ADMIN");

playwright_tests/E2E/staff.test.ts → playwright_tests/E2E/staff.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
-import { signIn, signOut } from "./steps/login-steps";
-import { clickToStaffPage } from "./steps/staff-steps";
+import { signIn, signOut } from "../steps/login-steps";
+import { clickToStaffPage } from "../steps/staff-steps";
 
 
 test("staff user details", async ({ page }) => {

playwright_tests/helpers/accessibilityTestHelper.ts

@@ -0,0 +1,37 @@
+import { expect, Page } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+import { createHtmlReport } from 'axe-html-reporter';
+const fs = require('fs');
+
+async function axeTest(page: Page): Promise<void> {
+  // accessibility testing function
+  const accessibilityScanResults = await new AxeBuilder({ page })
+    .withTags([
+      "wcag2a",
+      "wcag2aa",
+      "wcag21a",
+      "wcag21aa",
+      "wcag22a",
+      "wcag22aa",
+    ])
+    .analyze();
+  const reportHTML = createHtmlReport({
+    results: accessibilityScanResults,
+    options: {
+      projectKey: "PlaywrightHomepage"
+    },
+  });
+
+  if (!fs.existsSync("build/reports/accessibility-report.html")) {
+    fs.mkdirSync("build/reports", {
+      recursive: true,
+    });
+  }
+  fs.writeFileSync("build/reports/accessibility-report.html", reportHTML);
+
+  expect(accessibilityScanResults.violations).toEqual([]);
+}
+
+export default axeTest;
+
+

playwright_tests/pageObjects/SearchPage.ts

@@ -0,0 +1,58 @@
+import { Page, expect } from '@playwright/test';
+
+export class SearchPage {
+  private page: Page;
+  private header = '.govuk-heading-xl';
+  private jurisdiction = '#s-jurisdiction';
+  private caseType = '#s-case-type';
+  private applyButton = 'ccd-search-filters button:not(.button-secondary),ccd-workbasket-filters button:not(.button-secondary)';
+  private resetButton = '#reset';
+  private searchResultsTopPagination = 'ccd-search-result .pagination-top';
+  private noResultsNotification = 'ccd-search-result .notification';
+  private firstResultCaseLink = 'ccd-search-result>table>tbody>tr:nth-of-type(1)>td:nth-of-type(1)>a';
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async selectJurisdiction(jurisdiction: string) {
+    await this.page.waitForSelector(this.jurisdiction);
+    await this.page.selectOption(this.jurisdiction, { label: jurisdiction });
+  }
+
+  async selectCaseType(caseType: string) {
+    await this.page.waitForSelector(this.caseType);
+    await this.page.selectOption(this.caseType, { label: caseType });
+  }
+
+  async clickApplyButton() {
+    await this.page.waitForSelector(this.applyButton);
+    await this.page.click(this.applyButton);
+  }
+
+  async clickResetButton() {
+    await this.page.waitForSelector(this.resetButton);
+    await this.page.click(this.resetButton);
+  }
+
+  async openFirstCaseInResults() {
+    await this.page.waitForSelector(this.firstResultCaseLink);
+    await this.page.click(this.firstResultCaseLink);
+  }
+
+  async amOnPage() {
+    await expect(this.page.getByRole('heading', { name: 'Search' })).toBeVisible();
+  }
+
+  async hasSearchReturnedResults(): Promise<boolean> {
+    return await this.page.isVisible(this.searchResultsTopPagination);
+  }
+
+  async waitForAtleastOneSearchResult() {
+    await this.page.waitForSelector(this.searchResultsTopPagination);
+  }
+
+  async waitForSearchWithNoResults() {
+    await this.page.waitForSelector(this.noResultsNotification);
+  }
+}

playwright_tests/steps/search-steps.ts

@@ -0,0 +1,77 @@
+import { Page, expect } from '@playwright/test';
+import { SearchPage } from '../pageObjects/SearchPage';
+
+export async function clickToSearchPage(page: Page) {
+  console.log("Going to Search Page");
+  const numberOfTries = 5;
+  for (let i = 0; i < numberOfTries; i++) {
+    try {
+      await page.click('.hmcts-primary-navigation__link.transparent-background.hmcts-search-toggle__button'); 
+      await page.waitForSelector('text=Search', { state: 'visible', timeout: 1000 });
+      break;
+    } catch (error) {
+      console.log(`Click to search page failed, retrying (${i + 1}/${numberOfTries})...`);
+      if (i !== numberOfTries - 1) await page.waitForTimeout(1000); // Wait 1 second before the next attempt
+      else throw error;
+    }
+  }
+}
+
+export async function validateCaseEventNextStepTriggerActions(page: Page) {
+  const searchPage = new SearchPage(page);
+
+  await clickToSearchPage(page);
+  await searchPage.amOnPage();
+  await searchPage.selectJurisdiction('Family Divorce');
+  await searchPage.selectCaseType('XUI Case PoC');
+  await searchPage.clickApplyButton();
+
+  await searchPage.waitForAtleastOneSearchResult();
+  expect(await searchPage.hasSearchReturnedResults()).toBe(true);
+
+  await searchPage.openFirstCaseInResults();
+
+  await expect(page).toHaveURL(/.*case-details.*/);
+
+  // Implement the necessary steps for validation
+}
+
+export async function validateUpdateFormPageNextStepTriggerActions(page: Page) {
+  const searchPage = new SearchPage(page);
+
+  await clickToSearchPage(page);
+
+  await searchPage.amOnPage();
+
+  await searchPage.selectJurisdiction('Family Divorce');
+  await searchPage.selectCaseType('XUI Case PoC');
+  await searchPage.clickApplyButton();
+
+  await searchPage.waitForAtleastOneSearchResult();
+  expect(await searchPage.hasSearchReturnedResults()).toBe(true);
+
+  await searchPage.openFirstCaseInResults();
+
+  await expect(page).toHaveURL(/.*case-details.*/);
+
+  await page.click('button#updateCase'); // Replace with new selector
+  // Implement the necessary steps for validation
+}
+
+export async function validateInvalidDateErrorMessage(page: Page) {
+  const searchPage = new SearchPage(page);
+
+  await page.click('#createCaseTab'); // Replace with new selector
+
+  await searchPage.amOnPage();
+
+  await searchPage.selectJurisdiction('Family Divorce');
+  await searchPage.selectCaseType('XUI Test Case type dev');
+  await page.click('button#createCase'); // Replace with new selector
+  await expect(page).toHaveURL(/.*case-form.*/);
+
+  await page.fill('#generatedDOB-day', 'invalid date'); // Replace with new selector
+  await page.click('button#submitCase'); // Replace with new selector
+
+  await expect(page.locator('.error-message')).toHaveText('Date is not valid'); // Replace with new selector
+}