@vuu-ui/vuu-playwright-helpers 3.5.10 → 3.5.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.10",
+  "version": "3.5.12",
   "author": "heswell",
   "license": "Apache-2.0",
   "main": "./src/index.js",
@@ -9,7 +9,7 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "dependencies": {
-    "@vuu-ui/vuu-protocol-types": "3.5.10"
+    "@vuu-ui/vuu-protocol-types": "3.5.12"
   },
   "peerDependencies": {
     "@playwright/test": "^1.62.1"

package/src/PwTable.js

@@ -7,6 +7,11 @@ const xpathStringLiteral = (value)=>{
     if (!value.includes('"')) return `"${value}"`;
     return `concat('${value.split("'").join("', \"'\", '")}')`;
 };
+const cssAttributeValue = (value)=>Array.from(value, (character)=>{
+        const code = character.charCodeAt(0);
+        return '"' === character || "\\" === character || code < 32 || 127 === code ? `\\${code.toString(16)} ` : character;
+    }).join("");
+const byDataIcon = (iconName)=>`[data-icon="${cssAttributeValue(iconName)}"]`;
 class PwTable extends PlaywrightPageObject {
     cssSelector;
     defaultCssSelector = ".vuuTable";
@@ -36,12 +41,25 @@ class PwTable extends PlaywrightPageObject {
         await expect(textbox).toHaveValue(value);
         await textbox.press("commit" === action ? "Enter" : "Escape");
     }
+    async columnNames() {
+        return this.#locator.locator(".vuuTableHeaderCell .vuuTableHeaderCell-label").allTextContents();
+    }
+    async rowCount() {
+        const ariaRowCount = await this.#locator.getByRole("table").getAttribute("aria-rowcount");
+        if (null === ariaRowCount) throw Error("PwTable, rowCount, table does not have an aria-rowcount");
+        return parseInt(ariaRowCount, 10);
+    }
+    async cellIcon(columnName, ariaRowIndex, iconName) {
+        const cell = await this.cell(columnName, ariaRowIndex);
+        return cell.locator(byDataIcon(iconName));
+    }
+    cellsWithIcon(iconName) {
+        return this.#locator.getByRole("cell").filter({
+            has: this.page.locator(byDataIcon(iconName))
+        });
+    }
     headerCell(columnName) {
-        const escapedColumnName = Array.from(columnName, (character)=>{
-            const code = character.charCodeAt(0);
-            return '"' === character || "\\" === character || code < 32 || 127 === code ? `\\${code.toString(16)} ` : character;
-        }).join("");
-        return new PwTableHeaderCell(this.page, `${this.cssSelector ?? this.defaultCssSelector} >> .vuuTableHeaderCell[data-column-name="${escapedColumnName}"]`);
+        return new PwTableHeaderCell(this.page, `${this.cssSelector ?? this.defaultCssSelector} >> .vuuTableHeaderCell[data-column-name="${cssAttributeValue(columnName)}"]`);
     }
     locateCell(rowOrText, column) {
         if ("number" == typeof rowOrText && "number" == typeof column) return this.#locator.locator(`[aria-rowindex="${rowOrText}"] > [aria-colindex="${column}"]`);

package/types/PwTable.d.ts

@@ -23,6 +23,49 @@ export declare class PwTable extends PlaywrightPageObject {
      */
     cell(colName: string, ariaRowIndex: number): Promise<Locator>;
     editCell(columnName: string, ariaRowIndex: number, value: string, action?: "commit" | "cancel"): Promise<void>;
+    /**
+     * The labels displayed in the column headers, in rendered order.
+     * Header cells without a label (e.g. the checkbox selection column) are omitted.
+     *
+     * @example
+     * test("renders expected columns", async ({ page }) => {
+     *   const table = new PwTable(page);
+     *   expect(await table.columnNames()).toEqual(["Ccy", "Exchange", "Price"]);
+     * });
+     */
+    columnNames(): Promise<string[]>;
+    /**
+     * The total row count, read from aria-rowcount on the element with role="table".
+     * This is the dataSource size, not the number of rendered rows.
+     *
+     * @example
+     * test("loads all instruments", async ({ page }) => {
+     *   const table = new PwTable(page);
+     *   expect(await table.rowCount()).toEqual(1000);
+     * });
+     */
+    rowCount(): Promise<number>;
+    /**
+     * Locate the icon with the given data-icon name within a cell.
+     *
+     * @example
+     * test("flags stale prices", async ({ page }) => {
+     *   const table = new PwTable(page);
+     *   await expect(await table.cellIcon("status", 3, "warning")).toBeVisible();
+     * });
+     */
+    cellIcon(columnName: string, ariaRowIndex: number, iconName: string): Promise<Locator>;
+    /**
+     * Locate all rendered (non header) cells containing an icon with the given
+     * data-icon name. Each matching cell is counted once, however many such icons it holds.
+     *
+     * @example
+     * test("flags stale prices", async ({ page }) => {
+     *   const table = new PwTable(page);
+     *   await expect(table.cellsWithIcon("warning")).toHaveCount(4);
+     * });
+     */
+    cellsWithIcon(iconName: string): Locator;
     headerCell(columnName: string): PwTableHeaderCell;
     /**
      * Locate cell by cell contents