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

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,84 @@ 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);
+// exact match, in order - a partial list is false
+expect(
+  await menu.hasMenuItems(["Copy text", "Filter", "Sort", "Delete row"]),
+).toBe(true);
+expect(await menu.menuItemLabels()).toEqual([
+  "Copy text",
+  "Filter",
+  "Sort",
+  "Delete row",
+]);
+
+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
+```
+
+To assert that right clicking a cell does not show a context menu, use
+`assertNoContextMenu`. It waits for the page to render after the right click
+before asserting, so it cannot pass before a menu would have appeared.
+
+```ts
+await table.assertNoContextMenu("ccy", 2);
+```
+
+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.
+
+## PwChart, PwChartDataPoint
+
+`PwChart` wraps a Vuu `Chart` (ECharts, svg renderer). Data points are located by
+series name (the Vuu column name) and 0 based data index, or category (x axis)
+value, mirroring `PwTable.cell(colName, ariaRowIndex)`.
+
+```ts
+const chart = await new PwChart(page).isReady();
+expect(await chart.seriesNames()).toEqual(["price", "volume"]);
+expect(await chart.categories()).toHaveLength(25);
+
+const point = await chart.dataPoint("price", 3); // or chart.dataPoint("price", "2026-04-05")
+expect(point.value).toEqual(103);
+expect(point.isExcluded).toBe(false);
+await point.hover();
+await point.click(); // selects, with a chart selectionModel
+await expect(point.symbol).toHaveAttribute("fill", "purple");
+
+const menu = await chart.showContextMenu("price", 3); // or point.showContextMenu()
+await menu.menuItem("Exclude Item").click();
+await chart.assertNoContextMenu("price", 3); // when no menu is configured
+```
+
+The data point properties (`value`, `x`, `y`, `isExcluded`) are a snapshot, taken
+when the data point is obtained. Mouse actions resolve the position again and wait
+until it is stable, so they work while the chart is resizing. To assert a change to
+the data, obtain the data point again, e.g.
+`await expect.poll(async () => (await chart.dataPoint("price", 3)).isExcluded).toBe(true)`.
+
+The Vuu `Chart` exposes its ECharts instance on the chart canvas element
+(`echartsInstance`), which `PwChart` uses to map data points to pixel positions.

package/package.json

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

package/src/PwChart.js

@@ -0,0 +1,77 @@
+import { expect } from "@playwright/test";
+import { PwComponent } from "./PwComponent.js";
+import { PwContextMenu } from "./PwContextMenu.js";
+import { PwChartDataPoint } from "./PwChartDataPoint.js";
+class PwChart extends PwComponent {
+    defaultCssSelector = ".vuuChart";
+    get canvas() {
+        return this.locator.locator("[_echarts_instance_]");
+    }
+    async isReady(options) {
+        await super.isReady(options);
+        await expect.poll(()=>this.canvas.evaluate((element)=>(element.echartsInstance?.getOption().series ?? []).some((series)=>series.data.length > 0)), options).toBe(true);
+        return this;
+    }
+    async seriesNames() {
+        await this.isReady();
+        return this.canvas.evaluate((element)=>{
+            const series = element.echartsInstance?.getOption().series ?? [];
+            return Array.from(new Set(series.map(({ name })=>name)));
+        });
+    }
+    async categories() {
+        await this.isReady();
+        return this.canvas.evaluate((element)=>element.echartsInstance?.getOption().xAxis?.[0]?.data ?? []);
+    }
+    async dataPoint(seriesName, dataIndexOrCategory) {
+        await this.isReady();
+        const resolve = ()=>this.resolveDataPoint(seriesName, dataIndexOrCategory);
+        return new PwChartDataPoint(this.page, this.canvas, await resolve(), resolve);
+    }
+    async resolveDataPoint(seriesName, dataIndexOrCategory) {
+        const info = await this.canvas.evaluate((element, [seriesName, dataIndexOrCategory])=>{
+            const chart = element.echartsInstance;
+            if (!chart) return "chart has no echartsInstance";
+            const { series = [], xAxis = [] } = chart.getOption();
+            const categories = xAxis[0]?.data ?? [];
+            const dataIndex = "number" == typeof dataIndexOrCategory ? dataIndexOrCategory : categories.indexOf(dataIndexOrCategory);
+            if (-1 === dataIndex) return `no category "${dataIndexOrCategory}"`;
+            const namedSeries = series.filter(({ name })=>name === seriesName);
+            if (0 === namedSeries.length) return `no series "${seriesName}"`;
+            const valueSeries = namedSeries.find(({ data })=>"number" == typeof data[dataIndex]?.value);
+            if (!valueSeries) return `series "${seriesName}" has no value at data index ${dataIndex}`;
+            const value = valueSeries.data[dataIndex].value;
+            const [x, y] = chart.convertToPixel({
+                seriesId: valueSeries.id
+            }, [
+                dataIndex,
+                value
+            ]);
+            return {
+                seriesName,
+                dataIndex,
+                category: categories[dataIndex],
+                value,
+                isExcluded: valueSeries.id !== seriesName,
+                x,
+                y
+            };
+        }, [
+            seriesName,
+            dataIndexOrCategory
+        ]);
+        if ("string" == typeof info) throw Error(`PwChart, dataPoint, ${info}`);
+        return info;
+    }
+    async showContextMenu(seriesName, dataIndexOrCategory) {
+        const dataPoint = await this.dataPoint(seriesName, dataIndexOrCategory);
+        return dataPoint.showContextMenu();
+    }
+    async assertNoContextMenu(seriesName, dataIndexOrCategory) {
+        const dataPoint = await this.dataPoint(seriesName, dataIndexOrCategory);
+        await PwContextMenu.assertNotOpened(this.page, ()=>dataPoint.click({
+                button: "right"
+            }));
+    }
+}
+export { PwChart };

package/src/PwChartDataPoint.js

@@ -0,0 +1,61 @@
+import { PlaywrightPageObject } from "./PlaywrightPageObject.js";
+import { PwContextMenu } from "./PwContextMenu.js";
+class PwChartDataPoint extends PlaywrightPageObject {
+    canvas;
+    resolve;
+    seriesName;
+    dataIndex;
+    category;
+    value;
+    isExcluded;
+    x;
+    y;
+    constructor(page, canvas, info, resolve){
+        super(page), this.canvas = canvas, this.resolve = resolve;
+        this.seriesName = info.seriesName;
+        this.dataIndex = info.dataIndex;
+        this.category = info.category;
+        this.value = info.value;
+        this.isExcluded = info.isExcluded;
+        this.x = info.x;
+        this.y = info.y;
+    }
+    get symbol() {
+        const position = `,${round(this.x)},${round(this.y)})`;
+        return this.canvas.locator(`svg path[transform$="${position}"]`);
+    }
+    async click(options) {
+        const position = await this.stablePosition();
+        await this.canvas.click({
+            ...options,
+            position
+        });
+    }
+    async hover() {
+        await this.canvas.hover({
+            position: await this.stablePosition()
+        });
+    }
+    showContextMenu() {
+        return PwContextMenu.open(this.page, ()=>this.click({
+                button: "right"
+            }));
+    }
+    async stablePosition() {
+        let { x, y } = await this.resolve();
+        for(let attempt = 0; attempt < MAX_STABLE_ATTEMPTS; attempt++){
+            await nextAnimationFrames(this.page);
+            const current = await this.resolve();
+            if (current.x === x && current.y === y) return {
+                x,
+                y
+            };
+            ({ x, y } = current);
+        }
+        throw Error(`PwChartDataPoint, ${this.seriesName}[${this.dataIndex}] position is not stable`);
+    }
+}
+const MAX_STABLE_ATTEMPTS = 50;
+const round = (value)=>parseFloat(value.toFixed(4));
+const nextAnimationFrames = (page)=>page.evaluate(()=>new Promise((resolve)=>requestAnimationFrame(()=>requestAnimationFrame(()=>resolve()))));
+export { PwChartDataPoint };

package/src/PwColumnPicker.js

@@ -0,0 +1,44 @@
+import { expect } from "@playwright/test";
+import { PwComponent } from "./PwComponent.js";
+import { cssAttributeValue } from "./selector-utils.js";
+class PwColumnPicker extends PwComponent {
+    defaultCssSelector = ".vuuColumnPicker";
+    get selectedOptions() {
+        return this.locator.locator(".vuuItemPicker-selectedList [role='option']");
+    }
+    get availableOptions() {
+        return this.locator.locator(".vuuItemPicker-availableList [role='option']");
+    }
+    selectedColumns() {
+        return this.optionNames(this.selectedOptions);
+    }
+    availableColumns() {
+        return this.optionNames(this.availableOptions);
+    }
+    async addColumn(columnName) {
+        await this.clickAction(this.option(this.availableOptions, columnName));
+    }
+    async removeColumn(columnName) {
+        await this.clickAction(this.option(this.selectedOptions, columnName));
+    }
+    async search(text) {
+        await this.locator.getByRole("search").getByRole("textbox").fill(text);
+    }
+    async assertSelectedColumns(columnNames) {
+        await expect.poll(()=>this.selectedColumns()).toEqual(columnNames);
+    }
+    async assertAvailableColumns(columnNames) {
+        await expect.poll(()=>this.availableColumns()).toEqual(expect.arrayContaining(columnNames));
+    }
+    async clickAction(option) {
+        await option.hover();
+        await option.locator(".vuuItemPickerListItem-action").click();
+    }
+    option(options, columnName) {
+        return options.and(this.page.locator(`[data-name="${cssAttributeValue(columnName)}"]`));
+    }
+    optionNames(options) {
+        return options.evaluateAll((elements)=>elements.map((element)=>element.getAttribute("data-name") ?? ""));
+    }
+}
+export { PwColumnPicker };

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,53 @@
+import { expect } from "@playwright/test";
+import { PwComponent } from "./PwComponent.js";
+import { PwMenuItem } from "./PwMenuItem.js";
+import { byId } from "./selector-utils.js";
+class PwContextMenu extends PwComponent {
+    defaultCssSelector = '.vuuContextMenuPanel[role="menu"]';
+    static async open(page, openAction) {
+        await openAction();
+        const menu = await new PwContextMenu(page).isReady();
+        const menuId = await menu.locator.getAttribute("id");
+        const contextMenu = menuId ? new PwContextMenu(page, byId(menuId)) : menu;
+        await expect(contextMenu.locator.and(page.locator(":focus-within"))).toHaveCount(1);
+        return contextMenu;
+    }
+    static async assertNotOpened(page, openAction) {
+        await openAction();
+        await page.evaluate(()=>new Promise((resolve)=>requestAnimationFrame(()=>requestAnimationFrame(()=>resolve()))));
+        await new PwContextMenu(page).assertNotAttached();
+    }
+    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,75 @@
 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, cssAttributeValue } from "./selector-utils.js";
+const SCROLL_TOLERANCE = 1;
 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");
+    }
+    scrollPosition() {
+        return this.scrollbarContainer.evaluate(({ scrollLeft, scrollTop })=>({
+                scrollLeft,
+                scrollTop
+            }));
+    }
+    scrollUp(distance) {
+        return this.scroll("vertical", -1, distance);
+    }
+    scrollDown(distance) {
+        return this.scroll("vertical", 1, distance);
+    }
+    scrollLeft(distance) {
+        return this.scroll("horizontal", -1, distance);
+    }
+    scrollRight(distance) {
+        return this.scroll("horizontal", 1, distance);
+    }
+    async scroll(axis, direction, distance) {
+        if ("number" == typeof distance && distance < 0) throw Error("PwTable, scroll, distance must not be negative, use the opposite direction");
+        await this.scrollbarContainer.evaluate((el, { axis, direction, distance })=>{
+            const vertical = "vertical" === axis;
+            const current = vertical ? el.scrollTop : el.scrollLeft;
+            const max = vertical ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+            const pos = "start" === distance ? 0 : "end" === distance ? max : current + direction * ("page" === distance ? el.clientHeight : distance);
+            el.scrollTo({
+                [vertical ? "top" : "left"]: Math.min(max, Math.max(0, pos)),
+                behavior: "instant"
+            });
+        }, {
+            axis,
+            direction,
+            distance
+        });
+        await expect.poll(()=>this.isContentScrollSynced(), {
+            message: "PwTable, content container scroll position not synced"
+        }).toBe(true);
+    }
+    isContentScrollSynced() {
+        return this.locator.evaluate((table, tolerance)=>{
+            const scrollbar = table.querySelector(".vuuTable-scrollbarContainer");
+            const content = table.querySelector(".vuuTable-contentContainer");
+            if (!scrollbar || !content) return false;
+            const isSynced = (sourcePos, sourceMax, targetPos, targetMax)=>{
+                const expected = sourceMax > 0 ? sourcePos / sourceMax * targetMax : 0;
+                return Math.abs(targetPos - expected) <= tolerance;
+            };
+            return isSynced(scrollbar.scrollTop, scrollbar.scrollHeight - scrollbar.clientHeight, content.scrollTop, content.scrollHeight - content.clientHeight) && isSynced(scrollbar.scrollLeft, scrollbar.scrollWidth - scrollbar.clientWidth, content.scrollLeft, content.scrollWidth - content.clientWidth);
+        }, SCROLL_TOLERANCE);
     }
     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,35 +83,68 @@ 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();
+    }
+    headerColumnNames() {
+        return this.locator.locator(".vuuTableHeaderCell[data-column-name]").evaluateAll((elements)=>elements.map((element)=>element.getAttribute("data-column-name") ?? ""));
+    }
+    async assertColumns(columnNames) {
+        await expect.poll(()=>this.headerColumnNames()).toEqual(columnNames);
     }
     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);
     }
+    get dataLoaded() {
+        return expect.poll(()=>this.rowCount()).toBeGreaterThan(0);
+    }
+    async columnValues(columnName) {
+        const headerCell = this.locator.locator(`xpath=.//*[@role='columnheader' and @data-column-name=${xpathStringLiteral(columnName)}]`).first();
+        const ariaColIndex = await headerCell.getAttribute("aria-colindex");
+        if (null === ariaColIndex) throw Error(`PwTable, columnValues, column "${columnName}" does not have an aria-colindex`);
+        const cells = this.locator.locator(`[role="row"] > [role="cell"][aria-colindex="${ariaColIndex}"]`);
+        const values = await cells.evaluateAll((elements)=>elements.map((cell)=>({
+                    rowIndex: Number(cell.parentElement?.getAttribute("aria-rowindex")),
+                    text: cell.textContent ?? ""
+                })));
+        return values.sort((v1, v2)=>v1.rowIndex - v2.rowIndex).map(({ text })=>text);
+    }
     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({
+        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);
+        return PwContextMenu.open(this.page, ()=>cell.click({
+                button: "right"
+            }));
+    }
+    async assertNoContextMenu(columnName, ariaRowIndex) {
+        const cell = await this.cell(columnName, ariaRowIndex);
+        await PwContextMenu.assertNotOpened(this.page, ()=>cell.click({
+                button: "right"
+            }));
+        await expect(cell).not.toContainClass("ContextOpen");
     }
     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 +162,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 +217,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/PwTableFooter.js

@@ -0,0 +1,16 @@
+import { PwColumnPicker } from "./PwColumnPicker.js";
+import { PwComponent } from "./PwComponent.js";
+class PwTableFooter extends PwComponent {
+    defaultCssSelector = ".vuuTableFooter";
+    action(name) {
+        return this.locator.getByRole("button", {
+            name,
+            exact: true
+        });
+    }
+    async showColumnPicker(name = "Show column picker") {
+        await this.action(name).click();
+        return new PwColumnPicker(this.page).isReady();
+    }
+}
+export { PwTableFooter };