@vuu-ui/vuu-playwright-helpers 4.0.0-beta.6 → 4.0.0-beta.7

package/README.md

@@ -3,8 +3,16 @@
 Playwright helpers for Vuu components.
 
 All helpers extend `PlaywrightPageObject` and are instantiated from the Playwright `page`.
-`PwTable` locates its target element using a default CSS selector, which can be
-overridden at runtime. `PwTableHeaderCell` requires an explicit CSS selector.
+Component helpers extend `PwComponent`, which locates the component root element using
+a default CSS selector. This can be overridden at runtime by passing a CSS selector or a
+`Locator`. `PwComponent` provides common helpers:
+
+- `locator` - the component root `Locator`, for web-first assertions not covered by a helper
+- `isReady()` - waits until the component is visible, resolves with the component
+- `isVisible()` - is the component currently visible (no waiting)
+- `assertVisible()`, `assertNotAttached()`
+
+## PwTable
 
 ```ts
 // uses the default selector (.vuuTable)
@@ -23,3 +31,36 @@ await table.editCell("currency", 2, "EUR", "cancel");
 Prefer `cell(colName, ariaRowIndex)` for new usage. `ariaRowIndex` is the 1-based
 ARIA row index, including header rows (with one header, the first data row is 2).
 The existing `locateCell` overloads remain available for gradual migration.
+
+## PwContextMenu, PwMenuItem
+
+`PwTable.showContextMenu(colName, ariaRowIndex)` right clicks a cell and resolves with a
+`PwContextMenu` once the menu is visible.
+
+```ts
+const menu = await table.showContextMenu("ric", 2);
+
+expect(await menu.hasMenuItems()).toBe(true);
+expect(await menu.hasMenuItems(["Copy text", "Filter"])).toBe(true); // exact, in order
+expect(await menu.menuItemLabels()).toEqual(["Copy text", "Filter"]);
+
+const copy = menu.menuItem("Copy text"); // or by 0 based index, menu.menuItem(0)
+expect(await copy.hasIcon("edit")).toBe(true);
+expect(await copy.isEnabled()).toBe(true);
+expect(await menu.menuItem("Filter").hasChildren()).toBe(true);
+
+// sub menus, opened with mouse (default) or keyboard
+const filterMenu = await menu.menuItem("Filter").openSubMenu();
+await filterMenu.menuItem("Include value").click();
+await menu.assertNotAttached();
+
+// keyboard
+await menu.press("ArrowDown");
+await menu.assertFocusedMenuItem("Copy text");
+await menu.press("Enter");
+await menu.close(); // Escape
+```
+
+When a key press depends on the focus change made by the previous key, call
+`assertFocusedMenuItem` in between. Keys pressed before the menu has processed a
+focus change may be delivered to the previously focused item.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-beta.6",
+  "version": "4.0.0-beta.7",
   "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": "4.0.0-beta.6"
+    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.7"
   },
   "peerDependencies": {
     "@playwright/test": "^1.62.1"

package/src/PwComponent.js

@@ -0,0 +1,29 @@
+import { expect } from "@playwright/test";
+import { PlaywrightPageObject } from "./PlaywrightPageObject.js";
+class PwComponent extends PlaywrightPageObject {
+    target;
+    constructor(page, target){
+        super(page), this.target = target;
+    }
+    get locator() {
+        if ("string" == typeof this.target || void 0 === this.target) return this.page.locator(this.target ?? this.defaultCssSelector);
+        return this.target;
+    }
+    async isReady(options) {
+        await this.locator.waitFor({
+            state: "visible",
+            ...options
+        });
+        return this;
+    }
+    isVisible() {
+        return this.locator.isVisible();
+    }
+    async assertVisible() {
+        await expect(this.locator).toBeVisible();
+    }
+    async assertNotAttached() {
+        await expect(this.locator).not.toBeAttached();
+    }
+}
+export { PwComponent };

package/src/PwContextMenu.js

@@ -0,0 +1,39 @@
+import { expect } from "@playwright/test";
+import { PwComponent } from "./PwComponent.js";
+import { PwMenuItem } from "./PwMenuItem.js";
+class PwContextMenu extends PwComponent {
+    defaultCssSelector = '.vuuContextMenuPanel[role="menu"]';
+    get menuItems() {
+        return this.locator.getByRole("menuitem");
+    }
+    async menuItemLabels() {
+        return (await this.menuItems.allInnerTexts()).map((text)=>text.trim());
+    }
+    async hasMenuItems(labels) {
+        if (void 0 === labels) return await this.menuItems.count() > 0;
+        const menuItemLabels = await this.menuItemLabels();
+        return menuItemLabels.length === labels.length && menuItemLabels.every((label, i)=>label === labels[i]);
+    }
+    menuItem(labelOrIndex) {
+        const locator = "number" == typeof labelOrIndex ? this.menuItems.nth(labelOrIndex) : this.menuItems.filter({
+            has: this.page.getByText(labelOrIndex, {
+                exact: true
+            })
+        });
+        return new PwMenuItem(this.page, locator);
+    }
+    get focusedMenuItem() {
+        return new PwMenuItem(this.page, this.menuItems.and(this.page.locator(':focus[tabindex="0"]')));
+    }
+    async assertFocusedMenuItem(label) {
+        await expect(this.focusedMenuItem.locator).toHaveText(label);
+    }
+    async press(...keys) {
+        for (const key of keys)await this.page.keyboard.press(key);
+    }
+    async close() {
+        await this.press("Escape");
+        await this.assertNotAttached();
+    }
+}
+export { PwContextMenu };

package/src/PwMenuItem.js

@@ -0,0 +1,58 @@
+import { expect } from "@playwright/test";
+import { PwComponent } from "./PwComponent.js";
+import { PwContextMenu } from "./PwContextMenu.js";
+import { byId } from "./selector-utils.js";
+class PwMenuItem extends PwComponent {
+    defaultCssSelector = '[role="menuitem"]';
+    async label() {
+        return (await this.locator.innerText()).trim();
+    }
+    async hasChildren() {
+        return await this.locator.getAttribute("aria-haspopup") === "menu";
+    }
+    async isDisabled() {
+        return await this.locator.getAttribute("aria-disabled") === "true";
+    }
+    async isEnabled() {
+        return !await this.isDisabled();
+    }
+    async isExpanded() {
+        return await this.locator.getAttribute("aria-expanded") === "true";
+    }
+    isFocused() {
+        return this.locator.evaluate((element)=>element === element.ownerDocument.activeElement);
+    }
+    async hasIcon(iconName) {
+        return await this.locator.getAttribute("data-icon") === iconName;
+    }
+    async click(options) {
+        await this.locator.click(options);
+    }
+    async hover() {
+        await this.locator.hover();
+    }
+    async focus() {
+        await this.locator.focus();
+    }
+    async press(key) {
+        await this.locator.press(key);
+    }
+    async subMenu() {
+        const subMenuId = await this.locator.getAttribute("aria-controls");
+        if (null === subMenuId) throw Error(`PwMenuItem, subMenu, menu item "${await this.label()}" has no open sub menu`);
+        return new PwContextMenu(this.page, byId(subMenuId)).isReady();
+    }
+    async openSubMenu(using = "mouse") {
+        if (!await this.hasChildren()) throw Error(`PwMenuItem, openSubMenu, menu item "${await this.label()}" has no sub menu`);
+        if ("mouse" === using) await this.hover();
+        else {
+            await this.focus();
+            await this.press("ArrowRight");
+        }
+        await this.locator.and(this.page.locator('[aria-expanded="true"]')).waitFor();
+        const subMenu = await this.subMenu();
+        if ("keyboard" === using) await expect(subMenu.focusedMenuItem.locator).toHaveCount(1);
+        return subMenu;
+    }
+}
+export { PwMenuItem };

package/src/PwTable.js

@@ -1,34 +1,24 @@
 import { expect } from "@playwright/test";
-import { PlaywrightPageObject } from "./PlaywrightPageObject.js";
+import { PwComponent } from "./PwComponent.js";
+import { PwContextMenu } from "./PwContextMenu.js";
 import { PwTableHeaderCell } from "./PwTableHeaderCell.js";
+import { byDataIcon, byId, cssAttributeValue } from "./selector-utils.js";
 const byAriaRowIndex = (ariaRowIndex)=>`[aria-rowindex="${ariaRowIndex}"]:scope`;
 const xpathStringLiteral = (value)=>{
     if (!value.includes("'")) return `'${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;
+class PwTable extends PwComponent {
     defaultCssSelector = ".vuuTable";
-    constructor(page, cssSelector){
-        super(page), this.cssSelector = cssSelector;
-    }
-    get #locator() {
-        return this.page.locator(this.cssSelector ?? this.defaultCssSelector);
-    }
     get contentContainer() {
-        return this.#locator.locator(".vuuTable-contentContainer");
+        return this.locator.locator(".vuuTable-contentContainer");
     }
     get scrollbarContainer() {
-        return this.#locator.locator(".vuuTable-scrollbarContainer");
+        return this.locator.locator(".vuuTable-scrollbarContainer");
     }
     row(row) {
-        return this.#locator.locator(`[aria-rowindex="${row}"]`);
+        return this.locator.locator(`[aria-rowindex="${row}"]`);
     }
     cell(colName, ariaRowIndex) {
         return this.locateCell(ariaRowIndex, colName);
@@ -42,10 +32,10 @@ class PwTable extends PlaywrightPageObject {
         await textbox.press("commit" === action ? "Enter" : "Escape");
     }
     async columnNames() {
-        return this.#locator.locator(".vuuTableHeaderCell .vuuTableHeaderCell-label").allTextContents();
+        return this.locator.locator(".vuuTableHeaderCell .vuuTableHeaderCell-label").allTextContents();
     }
     async rowCount() {
-        const ariaRowCount = await this.#locator.getByRole("table").getAttribute("aria-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);
     }
@@ -54,23 +44,32 @@ class PwTable extends PlaywrightPageObject {
         return cell.locator(byDataIcon(iconName));
     }
     cellsWithIcon(iconName) {
-        return this.#locator.getByRole("cell").filter({
+        return this.locator.getByRole("cell").filter({
             has: this.page.locator(byDataIcon(iconName))
         });
     }
     headerCell(columnName) {
-        return new PwTableHeaderCell(this.page, `${this.cssSelector ?? this.defaultCssSelector} >> .vuuTableHeaderCell[data-column-name="${cssAttributeValue(columnName)}"]`);
+        return new PwTableHeaderCell(this.page, this.locator.locator(`.vuuTableHeaderCell[data-column-name="${cssAttributeValue(columnName)}"]`));
+    }
+    async showContextMenu(columnName, ariaRowIndex) {
+        const cell = await this.cell(columnName, ariaRowIndex);
+        await cell.click({
+            button: "right"
+        });
+        const menu = await new PwContextMenu(this.page).isReady();
+        const menuId = await menu.locator.getAttribute("id");
+        return menuId ? new PwContextMenu(this.page, byId(menuId)) : menu;
     }
     locateCell(rowOrText, column) {
-        if ("number" == typeof rowOrText && "number" == typeof column) return this.#locator.locator(`[aria-rowindex="${rowOrText}"] > [aria-colindex="${column}"]`);
+        if ("number" == typeof rowOrText && "number" == typeof column) return this.locator.locator(`[aria-rowindex="${rowOrText}"] > [aria-colindex="${column}"]`);
         if ("number" == typeof rowOrText && "string" == typeof column) {
-            const columnHeader = this.#locator.locator(`xpath=.//*[@data-column-name=${xpathStringLiteral(column)}]`).first();
+            const columnHeader = this.locator.locator(`xpath=.//*[@data-column-name=${xpathStringLiteral(column)}]`).first();
             return columnHeader.getAttribute("aria-colindex").then((ariaColIndex)=>{
                 if (null === ariaColIndex) throw Error(`PwTable, locateCell, column "${column}" does not have an aria-colindex`);
-                return this.#locator.locator(`[aria-rowindex="${rowOrText}"] > [aria-colindex="${ariaColIndex}"]`);
+                return this.locator.locator(`[aria-rowindex="${rowOrText}"] > [aria-colindex="${ariaColIndex}"]`);
             });
         }
-        if ("string" == typeof rowOrText) return this.#locator.getByRole("cell", {
+        if ("string" == typeof rowOrText) return this.locator.getByRole("cell", {
             name: rowOrText
         });
     }
@@ -88,9 +87,6 @@ class PwTable extends PlaywrightPageObject {
             }
         }
     }
-    async assertVisible() {
-        return expect(this.#locator).toBeVisible();
-    }
     getCellText(arg1, arg2, arg3, arg4) {
         if ("number" == typeof arg1 && "number" == typeof arg2) return [
             this.locateCell(arg1, arg2),
@@ -146,16 +142,16 @@ class PwTable extends PlaywrightPageObject {
         const offsetFromEnd = totalRowCount - to;
         const trailingBufferedRows = offsetFromEnd < renderBufferSize ? Math.min(0, offsetFromEnd) : renderBufferSize;
         const renderedRowCount = to - from + leadingBufferedRows + trailingBufferedRows;
-        await expect(this.#locator.getByRole("row")).toHaveCount(renderedRowCount + headerCount);
+        await expect(this.locator.getByRole("row")).toHaveCount(renderedRowCount + headerCount);
         const firstRenderedRow = from - leadingBufferedRows + headerCount + 1;
         const lastVisibleRow = to + headerCount;
         const lastRenderedRow = to + headerCount + trailingBufferedRows;
-        await expect(this.#locator.getByRole("row").locator(byAriaRowIndex(firstRenderedRow))).toBeVisible();
-        await expect(this.#locator.getByRole("row").locator(byAriaRowIndex(lastVisibleRow))).toBeVisible();
+        await expect(this.locator.getByRole("row").locator(byAriaRowIndex(firstRenderedRow))).toBeVisible();
+        await expect(this.locator.getByRole("row").locator(byAriaRowIndex(lastVisibleRow))).toBeVisible();
         if (trailingBufferedRows > 0) {
-            await expect(this.#locator.getByRole("row").locator(byAriaRowIndex(lastVisibleRow + 1))).not.toBeInViewport();
-            await expect(this.#locator.getByRole("row").locator(byAriaRowIndex(lastRenderedRow))).not.toBeInViewport();
-            await expect(this.#locator.getByRole("row").locator(byAriaRowIndex(lastRenderedRow + 1))).not.toBeAttached();
+            await expect(this.locator.getByRole("row").locator(byAriaRowIndex(lastVisibleRow + 1))).not.toBeInViewport();
+            await expect(this.locator.getByRole("row").locator(byAriaRowIndex(lastRenderedRow))).not.toBeInViewport();
+            await expect(this.locator.getByRole("row").locator(byAriaRowIndex(lastRenderedRow + 1))).not.toBeAttached();
         }
     }
     async assertRenderedColumns({ rendered, visible }) {

package/src/PwTableHeaderCell.js

@@ -1,15 +1,15 @@
 import { expect } from "@playwright/test";
-import { PlaywrightPageObject } from "./PlaywrightPageObject.js";
-class PwTableHeaderCell extends PlaywrightPageObject {
-    cssSelector;
-    constructor(page, cssSelector){
-        super(page), this.cssSelector = cssSelector;
+import { PwComponent } from "./PwComponent.js";
+class PwTableHeaderCell extends PwComponent {
+    defaultCssSelector = ".vuuTableHeaderCell";
+    constructor(page, target){
+        super(page, target);
     }
     get isSelected() {
-        return this.page.locator(this.cssSelector).evaluate((element)=>element.classList.contains("vuuTableHeaderCell-selected"));
+        return this.locator.evaluate((element)=>element.classList.contains("vuuTableHeaderCell-selected"));
     }
     async assertSelected() {
-        await expect(this.page.locator(this.cssSelector)).toContainClass("vuuTableHeaderCell-selected");
+        await expect(this.locator).toContainClass("vuuTableHeaderCell-selected");
     }
 }
 export { PwTableHeaderCell };

package/src/index.js

@@ -1,3 +1,6 @@
 export { PlaywrightPageObject } from "./PlaywrightPageObject.js";
+export { PwComponent } from "./PwComponent.js";
+export { PwContextMenu } from "./PwContextMenu.js";
+export { PwMenuItem } from "./PwMenuItem.js";
 export { PwTable } from "./PwTable.js";
 export { PwTableHeaderCell } from "./PwTableHeaderCell.js";

package/src/selector-utils.js

@@ -0,0 +1,7 @@
+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)}"]`;
+const byId = (id)=>`[id="${cssAttributeValue(id)}"]`;
+export { byDataIcon, byId, cssAttributeValue };

package/types/PwComponent.d.ts

@@ -0,0 +1,43 @@
+import { type Locator, type Page } from "@playwright/test";
+import { PlaywrightPageObject } from "./PlaywrightPageObject";
+/**
+ * Identifies the element a component helper operates on. Either a css selector,
+ * resolved against the page, or a Locator.
+ */
+export type PwComponentTarget = string | Locator;
+/**
+ * Base class for helpers that wrap a single component instance. Subclasses
+ * provide a defaultCssSelector, which can be overridden at runtime by passing
+ * a css selector or Locator to the constructor.
+ */
+export declare abstract class PwComponent extends PlaywrightPageObject {
+    protected readonly target?: PwComponentTarget | undefined;
+    protected abstract readonly defaultCssSelector: string;
+    /**
+     * @param page the Playwright page
+     * @param target optional css selector or Locator for the component, overrides defaultCssSelector
+     */
+    constructor(page: Page, target?: PwComponentTarget | undefined);
+    /**
+     * Locator for the component root element. Use this for web-first assertions
+     * that are not covered by a helper method.
+     */
+    get locator(): Locator;
+    /**
+     * Wait until the component is attached and visible. Resolves with the
+     * component, so it can be chained.
+     *
+     * @example
+     * const menu = await new PwContextMenu(page).isReady();
+     */
+    isReady(options?: {
+        timeout?: number;
+    }): Promise<this>;
+    /**
+     * Is the component currently visible. Does not wait or retry, prefer
+     * assertVisible within tests unless the component is known to be stable.
+     */
+    isVisible(): Promise<boolean>;
+    assertVisible(): Promise<void>;
+    assertNotAttached(): Promise<void>;
+}

package/types/PwContextMenu.d.ts

@@ -0,0 +1,65 @@
+import { type Locator } from "@playwright/test";
+import { PwComponent } from "./PwComponent";
+import { PwMenuItem } from "./PwMenuItem";
+/**
+ * A context menu (or one of its sub menus). Usually obtained from
+ * PwTable.showContextMenu.
+ *
+ * @example
+ * test("cell menu", async ({ page }) => {
+ *   const table = new PwTable(page);
+ *   const menu = await table.showContextMenu("ric", 2);
+ *   expect(await menu.hasMenuItems(["Copy text", "Filter"])).toBe(true);
+ *   const filterMenu = await menu.menuItem("Filter").openSubMenu();
+ *   await filterMenu.menuItem("Include value").click();
+ *   await menu.assertNotAttached();
+ * });
+ */
+export declare class PwContextMenu extends PwComponent {
+    protected readonly defaultCssSelector = ".vuuContextMenuPanel[role=\"menu\"]";
+    /**
+     * Locator for the menu items of this menu. Sub menus are rendered in their
+     * own (portalled) panels, so their items are not included.
+     */
+    get menuItems(): Locator;
+    /**
+     * The labels of the menu items, in rendered order.
+     */
+    menuItemLabels(): Promise<string[]>;
+    /**
+     * With no argument, does the menu have any menu items. With labels, does
+     * the menu have exactly these menu items, in this order.
+     */
+    hasMenuItems(labels?: string[]): Promise<boolean>;
+    /**
+     * Menu item by label, or by 0 based index.
+     */
+    menuItem(labelOrIndex: string | number): PwMenuItem;
+    /**
+     * The menu item that currently has keyboard focus. The item must also be the
+     * menu's active item (tabindex="0"), which confirms the menu has processed the
+     * focus change and is ready for the next key press.
+     */
+    get focusedMenuItem(): PwMenuItem;
+    /**
+     * Assert the focused menu item. Wait on this between key presses, keys
+     * pressed before the menu has processed a focus change may be misdirected.
+     */
+    assertFocusedMenuItem(label: string): Promise<void>;
+    /**
+     * Press key(s) within the menu. Keys are sent to the focused element, which
+     * is assumed to be within the menu. Multiple keys are pressed without waiting
+     * for the menu to respond, use assertFocusedMenuItem between key presses where
+     * a key depends on the focus change of the previous key.
+     *
+     * @example
+     * await menu.press("ArrowDown");
+     * await menu.assertFocusedMenuItem("Filter");
+     * await menu.press("Enter");
+     */
+    press(...keys: string[]): Promise<void>;
+    /**
+     * Close the menu by pressing Escape.
+     */
+    close(): Promise<void>;
+}

package/types/PwMenuItem.d.ts

@@ -0,0 +1,48 @@
+import { type Locator } from "@playwright/test";
+import { PwComponent } from "./PwComponent";
+import { PwContextMenu } from "./PwContextMenu";
+/**
+ * A single item within a PwContextMenu. Usually obtained from
+ * PwContextMenu.menuItem rather than constructed directly.
+ */
+export declare class PwMenuItem extends PwComponent {
+    protected readonly defaultCssSelector = "[role=\"menuitem\"]";
+    /**
+     * The text label of the menu item.
+     */
+    label(): Promise<string>;
+    /**
+     * Does this menu item open a sub menu.
+     */
+    hasChildren(): Promise<boolean>;
+    isDisabled(): Promise<boolean>;
+    isEnabled(): Promise<boolean>;
+    /**
+     * Is the sub menu of this menu item open. Always false for leaf items.
+     */
+    isExpanded(): Promise<boolean>;
+    isFocused(): Promise<boolean>;
+    /**
+     * Is the menu item decorated with the given icon (data-icon attribute).
+     */
+    hasIcon(iconName: string): Promise<boolean>;
+    /**
+     * Click the menu item. Playwright will not click a disabled item unless
+     * { force: true } is passed.
+     */
+    click(options?: Parameters<Locator["click"]>[0]): Promise<void>;
+    hover(): Promise<void>;
+    focus(): Promise<void>;
+    press(key: string): Promise<void>;
+    /**
+     * The sub menu opened by this menu item. The sub menu must already be open,
+     * use openSubMenu to open it.
+     */
+    subMenu(): Promise<PwContextMenu>;
+    /**
+     * Open the sub menu of this menu item, using the mouse (hover) or keyboard
+     * (ArrowRight). Resolves once the sub menu is visible and, when opened with
+     * the keyboard, once focus has moved into the sub menu.
+     */
+    openSubMenu(using?: "mouse" | "keyboard"): Promise<PwContextMenu>;
+}

package/types/PwTable.d.ts

@@ -1,17 +1,11 @@
-import { type Locator, type Page } from "@playwright/test";
+import { type Locator } from "@playwright/test";
 import type { VuuRange } from "@vuu-ui/vuu-protocol-types";
-import { PlaywrightPageObject } from "./PlaywrightPageObject";
+import { PwComponent } from "./PwComponent";
+import { PwContextMenu } from "./PwContextMenu";
 import { PwTableHeaderCell } from "./PwTableHeaderCell";
 type AriaRole = "cell" | "textbox" | "combobox";
-export declare class PwTable extends PlaywrightPageObject {
-    #private;
-    private readonly cssSelector?;
+export declare class PwTable extends PwComponent {
     protected readonly defaultCssSelector = ".vuuTable";
-    /**
-     * @param page the Playwright page
-     * @param cssSelector optional selector for the Table, overrides defaultCssSelector
-     */
-    constructor(page: Page, cssSelector?: string | undefined);
     get contentContainer(): Locator;
     get scrollbarContainer(): Locator;
     /**
@@ -67,6 +61,21 @@ export declare class PwTable extends PlaywrightPageObject {
      */
     cellsWithIcon(iconName: string): Locator;
     headerCell(columnName: string): PwTableHeaderCell;
+    /**
+     * Right click a cell to invoke the context menu. Resolves once the menu is
+     * visible. Rejects if no context menu is shown.
+     *
+     * @param columnName name of the column
+     * @param ariaRowIndex 1-based aria row index, including headers (with one header, the first data row is 2)
+     *
+     * @example
+     * test("shows cell menu", async ({ page }) => {
+     *   const table = new PwTable(page);
+     *   const menu = await table.showContextMenu("ric", 2);
+     *   expect(await menu.menuItem("Copy text").isEnabled()).toBe(true);
+     * });
+     */
+    showContextMenu(columnName: string, ariaRowIndex: number): Promise<PwContextMenu>;
     /**
      * Locate cell by cell contents
      * @param text
@@ -83,7 +92,6 @@ export declare class PwTable extends PlaywrightPageObject {
     locateCell(row: number, columnName: string): Promise<Locator>;
     locateColumnHeader(column: number): Locator;
     assertCellIsEditable(row: number, column: number, isEditable: boolean | undefined, value?: string): Promise<void>;
-    assertVisible(): Promise<void>;
     private getCellText;
     assertCellValue(cell: Locator, text: string, role?: AriaRole): Promise<void>;
     assertCellValue(row: number, column: number, text: string, role?: AriaRole): Promise<void>;

package/types/PwTableHeaderCell.d.ts

@@ -1,8 +1,12 @@
 import { type Page } from "@playwright/test";
-import { PlaywrightPageObject } from "./PlaywrightPageObject";
-export declare class PwTableHeaderCell extends PlaywrightPageObject {
-    private readonly cssSelector;
-    constructor(page: Page, cssSelector: string);
+import { PwComponent, type PwComponentTarget } from "./PwComponent";
+export declare class PwTableHeaderCell extends PwComponent {
+    protected readonly defaultCssSelector = ".vuuTableHeaderCell";
+    /**
+     * @param page the Playwright page
+     * @param target css selector or Locator for the header cell
+     */
+    constructor(page: Page, target: PwComponentTarget);
     get isSelected(): Promise<boolean>;
     assertSelected(): Promise<void>;
 }

package/types/index.d.ts

@@ -1,3 +1,6 @@
 export { PlaywrightPageObject } from "./PlaywrightPageObject";
+export { PwComponent, type PwComponentTarget } from "./PwComponent";
+export { PwContextMenu } from "./PwContextMenu";
+export { PwMenuItem } from "./PwMenuItem";
 export { PwTable } from "./PwTable";
 export { PwTableHeaderCell } from "./PwTableHeaderCell";

package/types/selector-utils.d.ts

@@ -0,0 +1,3 @@
+export declare const cssAttributeValue: (value: string) => string;
+export declare const byDataIcon: (iconName: string) => string;
+export declare const byId: (id: string) => string;