// Execute a user flow step-by-step in Cursor's built-in browser while documenting each action, then emit a Playwright test that replays the same flow using stable selectors derived from the accessibility tree.
| name | recording-browser-flow-as-test |
| description | Execute a user flow step-by-step in Cursor's built-in browser while documenting each action, then emit a Playwright test that replays the same flow using stable selectors derived from the accessibility tree. |
| user-invocable | true |
Use the browser MCP as a recorder: every navigation, click, fill, and keypress becomes a row in a script. The agent then translates that trace into a Playwright test file in the repo (or a snippet to paste into an existing spec).
This is Cursor-native because it combines browser_snapshot (refs + roles + names) with structured actions — not a separate recorder extension.
finding-dev-server-url if needed.@playwright/test). If not, add it with adding-e2e-tests or the project’s standard setup.One sentence scope, e.g. “Log in, open Settings, toggle dark mode, save.”
browser_snapshot — get the accessibility tree and element refs.
Choose the smallest interaction:
browser_click with ref from snapshot (not coordinate clicks unless required).browser_fill or browser_type for inputs.browser_select_option for selects.browser_navigate for full URL changes.Log the step in a structured list the main agent keeps:
navigate, click, fill, press, select)getByRole('button', { name: '...' })getByLabel('...')getByPlaceholder('...')getByTestId('...') if the app uses test IDs/settings”)After actions that change the DOM or navigate, take a new browser_snapshot before the next interaction.
If the flow must wait for async content, use browser_wait_for or short incremental waits per cursor-ide-browser guidance — then snapshot again.
From the final snapshot and URL, add at least:
expect(page).toHaveURL(...) or URL fragment checkEmit a test file, e.g. tests/recorded/<flow-name>.spec.ts, containing:
test.describe and test('...', async ({ page }) => { ... })await page.goto(...), await page.getByRole(...).click(), etc.npx playwright test tests/recorded/<flow-name>.spec.ts
Fix flakiness: prefer expect(locator).toBeVisible() before clicks, use toPass() retries for async lists, avoid arbitrary waitForTimeout except as last resort.
data-testid in app code if names are ambiguous.storageState — never commit secrets.Generate or edit images using the OpenAI Image API (gpt-image-2). Use when the user asks to generate, create, draw, render, illustrate, mock up, or edit an image, icon, logo, mockup, illustration, OG image, blog hero, marketing asset, or similar visual. Also use when the user supplies a reference image and asks to modify, restyle, or remix it. Triggers on: "generate an image", "create an image", "make a picture of", "edit this image", "restyle this", "make a mockup of", "draw a", "render a", "illustration of".
When the same multi-step workflow repeats in Cursor (user corrections or agent redos), capture it as a new SKILL.md under .cursor/skills/ so future sessions load it automatically.
After navigating and interacting in Cursor's built-in browser, use browser_network_requests to audit every fetch/XHR for failures, slowness, duplicate calls, and suspicious payloads. Use for API-heavy pages and after backend or client networking changes.
When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel. Use for multi-job CI failures where jobs are independent.
Run four parallel read-only subagents that each review the same diff from a different lens — security, performance, correctness, and readability — then merge findings into one report. Use before merging large or risky PRs.
Automatically persist useful context — research, decisions, learnings, templates — to workspace files so knowledge survives across conversations.