DTSSE-4979 Playwright refactor

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,23 @@
+import { test, expect } from '@playwright/test';
+import { signIn } from "../steps/login-steps"
+// import axeTest from "../helpers/accessibilityTestHelper";
+// import config from "../config"
+import { validateCaseEventNextStepTriggerActions, validateUpdateFormPageNextStepTriggerActions } from '../steps/search-steps';
+import { validateInvalidDateErrorMessage } from '../steps/createCase-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 @test', async ({ page }) => {
+  await validateCaseEventNextStepTriggerActions(page);
+});
+
+test('Validate update form page click on next step trigger actions @test', 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/CaseView.ts

@@ -0,0 +1,16 @@
+import { Page, expect } from '@playwright/test';
+
+export class CaseView {
+  private page: Page;
+  private nextStep = '#next-step';
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async clickNextStep(event: string) {
+    await this.page.waitForSelector(this.nextStep);
+    await this.page.selectOption(this.nextStep, { label: event });
+    await this.page.click("button[type='submit']");
+  }
+}

playwright_tests/pageObjects/CreateCase.ts

@@ -0,0 +1,57 @@
+import { Page, expect } from '@playwright/test';
+
+export class CreateCase {
+  private page: Page;
+  private jurisdiction = '#cc-jurisdiction';
+  private caseType = '#cc-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(header: string){
+    await expect(this.page.getByRole('heading', { name: header })).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/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(header: string){
+    await expect(this.page.getByRole('heading', { name: header })).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/pageObjects/UpdateCase.ts

@@ -0,0 +1,59 @@
+import { Page, expect } from '@playwright/test';
+import { SearchPage } from './SearchPage';
+
+export class UpdateCase {
+  private page: Page;
+  private header = '.govuk-heading-xl';
+  private jurisdiction = '#cc-jurisdiction';
+  private caseType = '#cc-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(header: string){
+    await expect(this.page.getByRole('heading', { name: header })).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/createCase-steps.ts

@@ -0,0 +1,32 @@
+import { Page, expect } from '@playwright/test';
+import { CreateCase } from '../pageObjects/CreateCase';
+
+
+export async function validateInvalidDateErrorMessage(page: Page) {
+    const createCase = new CreateCase(page);
+
+    await page.click("(//a[normalize-space()='Create case'])[1]"); 
+
+    await createCase.amOnPage("Create Case");
+
+    await createCase.selectJurisdiction('Family Divorce');
+    await createCase.selectCaseType('XUI Test Case type dev');
+    await page.click("button[type='submit']"); 
+    await expect(page).toHaveURL(/.*case-create.*/);
+
+    await page.fill('#TextField','Text Test')
+
+    await page.click("button[type='submit']");
+
+    await page.fill('#DateField-day','11');
+    //await expect(page.locator('.error-message')).toHaveText('The data entered is not valid for Date');
+    await page.fill('#DateField-month','11');
+    //await expect(page.locator('.error-message')).toHaveText('The data entered is not valid for Date');
+    await page.fill('#DateField-year','1111');
+    await expect(page.locator('.error-message')).toHaveText('The data entered is not valid for Date');
+
+    await page.click("button[type='submit']");
+
+    await page.isVisible("//a[normalize-space()='Date is not valid']");
+
+  }

playwright_tests/steps/login-steps.ts

@@ -0,0 +1,27 @@
+import config from "../config";
+const testConfig = require("../../test_codecept/e2e/config/appTestConfig");
+
+export async function signIn(page: any, userIdentifier: string) {
+  const matchingUsers = testConfig.users[testConfig.testEnv].filter(
+    (user: any) => user.userIdentifier === userIdentifier
+  );
+  const email = matchingUsers[0].email;
+  await page.goto(config.CaseBaseURL);
+  await page.getByLabel("Email address").click();
+  await page.getByLabel("Email address").fill(email);
+  await page.getByLabel("Password").click();
+  await page.getByLabel("Password").fill(matchingUsers[0].key);
+  await page.getByRole("button", { name: "Sign in" }).click();
+  console.log("Signed in as " + email);
+
+}
+
+export async function signOut(page) {
+  try {
+    await page.getByText("Sign out").click();
+    console.log("Signed out");
+  } catch (error) {
+    console.log(`Sign out failed: ${error}`);
+  }
+
+}