Example parameterized test (#47)

playwright-e2e/page-objects/components/exui/exui-case-list.component.ts

@@ -4,8 +4,10 @@ import { ExuiSpinnerComponent } from "./exui-spinner.component";
 
 export class ExuiCaseListComponent extends Base {
   readonly caseList = this.root.locator("exui-case-list");
+  readonly caseListTable = this.root.locator("#search-result table");
   readonly filters = {
     caseNameFilter: this.root.locator("#applicantCaseName"),
+    caseStateFilter: this.root.locator("select#wb-case-state"),
     applyFilterBtn: this.root.getByTitle("Apply filter"),
   };
   readonly resultLinks = this.root.locator("ccd-search-result .govuk-link");
@@ -21,6 +23,12 @@ export class ExuiCaseListComponent extends Base {
     await this.spinnerComponent.wait();
   }
 
+  public async searchByCaseState(state: string) {
+    await this.filters.caseStateFilter.selectOption(state);
+    await this.filters.applyFilterBtn.click();
+    await this.spinnerComponent.wait();
+  }
+
   public async selectCaseByIndex(index: number) {
     await this.resultLinks.nth(index).click();
     await this.spinnerComponent.wait();

playwright-e2e/page-objects/components/exui/exui-spinner.component.ts

@@ -1,18 +1,24 @@
-import { Page } from "@playwright/test";
-import { WaitUtils } from "../../../utils";
+import { Page, expect } from "@playwright/test";
 import { Base } from "../../base";
 
 export class ExuiSpinnerComponent extends Base {
   readonly spinner = this.page.locator("xuilib-loading-spinner");
-  private waitUtils = new WaitUtils();
 
   constructor(page: Page) {
     super(page);
   }
 
   async wait() {
-    await this.waitUtils.waitForLocatorVisibility(this.spinner, {
-      visibility: false,
-    });
+    await expect
+      .poll(
+        async () => {
+          const spinnerCount = await this.spinner.count();
+          return spinnerCount;
+        },
+        {
+          timeout: 30_000,
+        }
+      )
+      .toBe(0);
   }
 }

playwright-e2e/page-objects/pages/exui/exui-case-list.po.ts

@@ -17,5 +17,6 @@ export class ExuiCaseListPage extends Base {
 
   async goto() {
     await this.page.goto(config.urls.manageCaseBaseUrl);
+    await this.exuiHeader.checkIsVisible();
   }
 }

playwright-e2e/tests/case-list-professional.spec.ts

@@ -20,10 +20,9 @@ test.describe("Case List Tests - Professional @exui", () => {
     exuiCaseListPage,
     exuiCaseDetailsPage,
   }) => {
-    await exuiCaseListPage.exuiHeader.checkIsVisible();
-
     const caseName = "test";
     await exuiCaseListPage.exuiCaseListComponent.searchByCaseName(caseName);
+
     await exuiCaseListPage.exuiCaseListComponent.selectCaseByIndex(0);
     await expect(
       exuiCaseDetailsPage.exuiCaseDetailsComponent.caseHeader
@@ -33,3 +32,21 @@ test.describe("Case List Tests - Professional @exui", () => {
     ).toContainText(caseName, { ignoreCase: true });
   });
 });
+
+// Data driven parameterized tests
+[{ state: "Draft" }, { state: "Submitted" }, { state: "Pending" }].forEach(
+  ({ state }) => {
+    test(`Search for a case with state: ${state}`, async ({
+      exuiCaseListPage,
+      tableUtils,
+    }) => {
+      await exuiCaseListPage.exuiCaseListComponent.searchByCaseState(state);
+      const table = await tableUtils.mapTable(
+        exuiCaseListPage.exuiCaseListComponent.caseListTable
+      );
+      table.forEach((row) => {
+        expect(row["State"]).toEqual(state);
+      });
+    });
+  }
+);

playwright-e2e/utils/table.utils.ts

@@ -1,17 +1,19 @@
 import { Locator } from "@playwright/test";
 
 export class TableUtils {
+  private sortIcon = "▼";
   /**
    * Maps a given table as an object using table headers
    *
    * @param locator {@link Locator} - The table locator
    *
    */
   public async mapTable(table: Locator): Promise<Record<string, string>[]> {
-    await table.scrollIntoViewIfNeeded({ timeout: 5000 });
+    await table.scrollIntoViewIfNeeded({ timeout: 30_000 });
 
     const tableData: Record<string, string>[] = [];
-    const headers = await table.locator("thead th").allInnerTexts();
+    let headers = await table.locator("thead th").allInnerTexts();
+    headers = headers.map((header) => header.replace(`\t${this.sortIcon}`, ""));
     const rows = table.locator("tbody tr");
     const rowCount = await rows.count();
 
@@ -23,7 +25,7 @@ export class TableUtils {
       for (let j = 0; j < cellCount; j++) {
         const header = headers[j];
         const cell = cells.nth(j);
-        rowData[header] = await cell.innerText();
+        rowData[header] = (await cell.innerText()).trim();
       }
       tableData.push(rowData);
     }

playwright-e2e/utils/wait.utils.ts

@@ -7,8 +7,8 @@ interface WaitOptions {
 }
 
 export class WaitUtils {
-  private DEFAULT_DELAY = 1000;
-  private DEFAULT_TIMEOUT = 60000;
+  private DEFAULT_DELAY = 1_000;
+  private DEFAULT_TIMEOUT = 60_000;
 
   private async wait(ms: number): Promise<void> {
     return new Promise((resolve) => {