feat(registry): add playwright capability group (6 TS browser fns)
New domain `browser` under frontend/functions/ with 6 Playwright helpers: - pw_launch_browser: chromium + context + page bootstrap with storageState support and baseUrl navigation. - pw_kanban_login: authenticates a Page against /api/auth/login; sets the kanban_session cookie via shared storageState; verifies login page no longer visible after navigation. - pw_drag_drop: human-like pointer drag (mousedown + activateOffset + stepped move + mouseup) compatible with @dnd-kit/core's 8px activation threshold; supports hoverMs for time-based dropzones. - pw_keyboard_sequence: ordered focus/type/press/wait steps for scripting realistic input flows (typing then arrow-key navigating autocompletes). - pw_wait_predicate: thin wrapper over page.waitForFunction with friendlier defaults and custom error messages. - pw_assert_class: poll-based assertion that a Locator has/lacks a CSS class within a timeout; useful for visual-state checks. Each function ships with vitest tests (5-8 cases each) covering both happy and error paths, plus self-documenting .md (Ejemplo + Cuando usarla + Gotchas + frontmatter with params/output schema). Adds frontend/functions/package.json with `"type": "module"` so consumers can ESM-import the .ts files from anywhere in the registry (Playwright's tsx loader respects nearest package.json). Capability page docs/capabilities/playwright.md documents the group with a canonical end-to-end example, frontiers, prerequisites, and gotchas. Index updated. First consumer (issue 0088): apps/kanban requester-input.spec.ts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,106 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import type { Page } from "playwright";
|
||||
import { pw_keyboard_sequence, type KbStep } from "./pw_keyboard_sequence";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mock helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const mockFocus = vi.fn().mockResolvedValue(undefined);
|
||||
const mockFirst = vi.fn().mockReturnValue({ focus: mockFocus });
|
||||
const mockLocator = vi.fn().mockReturnValue({ first: mockFirst });
|
||||
const mockType = vi.fn().mockResolvedValue(undefined);
|
||||
const mockPress = vi.fn().mockResolvedValue(undefined);
|
||||
const mockWaitForTimeout = vi.fn().mockResolvedValue(undefined);
|
||||
|
||||
const mockPage = {
|
||||
locator: mockLocator,
|
||||
keyboard: {
|
||||
type: mockType,
|
||||
press: mockPress,
|
||||
},
|
||||
waitForTimeout: mockWaitForTimeout,
|
||||
} as unknown as Page;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockFirst.mockReturnValue({ focus: mockFocus });
|
||||
mockLocator.mockReturnValue({ first: mockFirst });
|
||||
mockFocus.mockResolvedValue(undefined);
|
||||
mockType.mockResolvedValue(undefined);
|
||||
mockPress.mockResolvedValue(undefined);
|
||||
mockWaitForTimeout.mockResolvedValue(undefined);
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe("pw_keyboard_sequence", () => {
|
||||
it("focus calls focus", async () => {
|
||||
const sequence: KbStep[] = [{ kind: "focus", selector: "input[name=requester]" }];
|
||||
await pw_keyboard_sequence(mockPage, sequence);
|
||||
|
||||
expect(mockLocator).toHaveBeenCalledWith("input[name=requester]");
|
||||
expect(mockFirst).toHaveBeenCalledOnce();
|
||||
expect(mockFocus).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it("type uses default delay", async () => {
|
||||
const sequence: KbStep[] = [{ kind: "type", text: "Enmanuel" }];
|
||||
await pw_keyboard_sequence(mockPage, sequence);
|
||||
|
||||
expect(mockType).toHaveBeenCalledWith("Enmanuel", { delay: 30 });
|
||||
});
|
||||
|
||||
it("type with explicit delayMs uses that value", async () => {
|
||||
const sequence: KbStep[] = [{ kind: "type", text: "hello", delayMs: 100 }];
|
||||
await pw_keyboard_sequence(mockPage, sequence);
|
||||
|
||||
expect(mockType).toHaveBeenCalledWith("hello", { delay: 100 });
|
||||
});
|
||||
|
||||
it("press routes correctly", async () => {
|
||||
const sequence: KbStep[] = [
|
||||
{ kind: "press", key: "ArrowDown" },
|
||||
{ kind: "press", key: "Enter" },
|
||||
];
|
||||
await pw_keyboard_sequence(mockPage, sequence);
|
||||
|
||||
expect(mockPress).toHaveBeenCalledTimes(2);
|
||||
expect(mockPress).toHaveBeenNthCalledWith(1, "ArrowDown");
|
||||
expect(mockPress).toHaveBeenNthCalledWith(2, "Enter");
|
||||
});
|
||||
|
||||
it("wait calls waitForTimeout", async () => {
|
||||
const sequence: KbStep[] = [{ kind: "wait", ms: 200 }];
|
||||
await pw_keyboard_sequence(mockPage, sequence);
|
||||
|
||||
expect(mockWaitForTimeout).toHaveBeenCalledWith(200);
|
||||
});
|
||||
|
||||
it("unknown kind throws", async () => {
|
||||
const sequence = [{ kind: "unknown_step" }] as unknown as KbStep[];
|
||||
await expect(pw_keyboard_sequence(mockPage, sequence)).rejects.toThrow(
|
||||
'pw_keyboard_sequence: unknown step kind "unknown_step"'
|
||||
);
|
||||
});
|
||||
|
||||
it("order preserved", async () => {
|
||||
const callOrder: string[] = [];
|
||||
|
||||
mockFocus.mockImplementationOnce(async () => { callOrder.push("focus"); });
|
||||
mockType.mockImplementationOnce(async () => { callOrder.push("type"); });
|
||||
mockWaitForTimeout.mockImplementationOnce(async () => { callOrder.push("wait"); });
|
||||
mockPress.mockImplementationOnce(async () => { callOrder.push("press"); });
|
||||
|
||||
const sequence: KbStep[] = [
|
||||
{ kind: "focus", selector: "input" },
|
||||
{ kind: "type", text: "abc" },
|
||||
{ kind: "wait", ms: 50 },
|
||||
{ kind: "press", key: "Enter" },
|
||||
];
|
||||
|
||||
await pw_keyboard_sequence(mockPage, sequence);
|
||||
|
||||
expect(callOrder).toEqual(["focus", "type", "wait", "press"]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user