A manual Playwright alternative where the video is watchable

Most articles on this topic recommend swapping the library: Cypress instead of Playwright, Selenium instead of Playwright, Puppeteer, TestCafe, WebDriverIO. Assrt does not swap the library. The browser engine is still Playwright (we call @playwright/mcp under the hood, see /Users/matthewdi/assrt-mcp/src/core/browser.ts lines 274-377). What Assrt replaces is two things that have nothing to do with the library: the authoring layer (you write plain-English scenarios instead of .spec.ts files) and the replay layer (every action is painted onto the page as a visible cursor and toast so the Playwright video is watchable by someone who has never seen the code).

Playwright records what the headless Chromium shows, and headless Chromium has no real pointer. The default video captures page transitions and DOM changes, but not where the test clicked, what keys it pressed, or how long it waited. A developer can read it against the .spec.ts file or load it into the Trace Viewer. A product manager, designer, or support engineer cannot. That is why bug evidence from a manual Playwright suite typically stays inside engineering. Assrt fixes this at the source: a 66-line script called CURSOR_INJECT_SCRIPT (browser.ts lines 33-98) attaches four DOM elements to every page at z-index 2147483647, so the compositor paints them into the exact same video Playwright was already recording. The artifact becomes a shareable link instead of a trace you have to translate.

Four elements. __pias_cursor is a 20px red dot with a 2px white border, positioned via fixed left/top and animated with a 0.3s ease CSS transition so it glides between targets instead of snapping. __pias_ripple is a 40px ring that expands from scale 0.5 to scale 2 and fades out over a 50ms + transition cycle, triggered on every click. __pias_toast is a black-pill label at the bottom of the viewport that reads '⌨ typing: "..."' with the first 40 characters of whatever was typed (browser.ts line 578). __pias_heartbeat is a 6px green dot in the bottom-right corner that alternates opacity and scale on an 800ms Infinity-iteration animation; it exists not as decoration but to force CDP to emit continuous compositor frames even on pages that would otherwise pause repainting.

Before every click, Assrt calls showClickAt (browser.ts lines 451-501). That method runs browser_evaluate in the page, tries document.querySelector(sel) first, and if that fails walks every anchor, button, input, [role=button], select, textarea, label, [onclick], and [href] on the page and scores them by text match against the target string (exact match wins, substring match scores 3, reverse-substring scores 2, word overlap scores fractionally). It reads the best candidate's bounding rect, computes the center, and calls window.__pias_showClick(x, y). The cursor glides to that center via the CSS transition. The runner then sleeps for 400ms (browser.ts line 568), and only then does the real browser_click tool fire against Playwright. The motion lands in the video because the recording captures those 400ms of transition before the click happens.

It adds roughly 400ms of wait per click and per type (the cursor-glide settle time) plus one small browser_evaluate per interaction for the overlay injection. On a scenario with 20 actions, that is about 8 extra seconds. The real bottleneck on an Assrt run is the LLM decision loop, not the overlay: typical end-to-end scenario duration is around 60 seconds (agent inference plus navigation plus the 400ms glides). A hand-written Playwright test of the same flow runs in 5 to 30 seconds with no visible cursor. If pure wall-clock speed is the priority, keep manual Playwright. If the video needs to be watchable by a non-engineer, the 400ms per click is the price.

Yes. Install with npx assrt-mcp and add it as an MCP server to Claude Code, Cursor, or Claude Desktop. Point your coding agent at a URL and ask it to run assrt_test with a plan written like '#Case 1: Sign in works. Go to /login. Type x into email. Click Sign in. Assert dashboard heading appears.' The video, including the cursor, ripple, and keystroke toast, ends up at /tmp/assrt/<runId>/video/recording.webm on your disk. The scenario is stored by UUID at the central API and mirrored to ~/.assrt/scenarios/<uuid>.json, so you can share the link without signup on the recipient side. There is no login flow on the public data plane.

Yes to both. The injection is idempotent: the script starts with `if (!window.__pias_cursor_injected) { window.__pias_cursor_injected = true; ... }` (browser.ts line 34), and injectOverlay is called after every navigate (browser.ts line 518) and before every click or type. On a full-page navigation the DOM is rebuilt, so the flag is cleared and the overlay is reattached. On an SPA route change the flag stays set, so the script no-ops and the existing DOM elements are reused. The cursor position is tracked server-side (cursorX, cursorY on the manager) and restored without animation immediately after re-injection, so it never pops back to off-screen.

The Trace Viewer is an engineer tool: you open a .zip, scrub a DOM timeline, and inspect network activity and console logs against the source code of the test. It answers 'why did my assertion fail?' for someone who wrote the test. Assrt's overlay plus video answers 'what did the run actually look like?' for someone who did not write the test. They solve different problems. Trace Viewer needs a local checkout of your test suite to be useful; the Assrt artifact is a webm the recipient watches in any browser. A team can and should use both. But if the goal is to send bug evidence to product, QA, or a client, the trace viewer does not work and the overlay-painted video does.

The MCP package @assrt-ai/assrt is MIT licensed. CURSOR_INJECT_SCRIPT is a template literal constant exported from the same module as the McpBrowserManager class. If you want to change the cursor color from red to blue, edit the rgba values on line 54. If you want bigger click ripples, change the width/height on line 64. If you want the keystroke toast to show 80 characters instead of 40, change the slice length on line 578. To disable the overlay entirely for a speed-first run, comment out the injectOverlay calls in navigate, click, type, and selectOption. There is no feature flag wall or plan gate; the overlay is literally eight function calls in browser.ts.