New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Recording Browser Flow As Test

by spencerpauly in spencerpauly/awesome-cursor-skills

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…

CC0-1.0Auto-check passedFrontend & Design

Install Recording Browser Flow As Test

skills CLI
$ npx skills add spencerpauly/awesome-cursor-skills --skill recording-browser-flow-as-test -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install spencerpauly/awesome-cursor-skills recording-browser-flow-as-test --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/resources/recording-browser-flow-as-test .claude/skills/recording-browser-flow-as-test && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
recording-browser-flow-as-test
GitHub stars
844
Token cost
~857 tokens
SKILL.md length
402 words
Files
1
Skills in repo
60
Repo updated
First seen
Licence
CC0-1.0

At a glance

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…

  • Works in 5 steps: Define the flow → For each step, in order → Add assertions → …
  • Tasks that involve UX design
  • SKILL.md covers Prerequisites, Recording workflow, Tips and When not to use
  • Calls npx

What it does

Recording Browser Flow As Test is an agent skill from spencerpauly/awesome-cursor-skills. 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.

Its SKILL.md is about 860 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UX design and Accessibility. It works with Playwright. The repository describes itself as: A curated list of awesome skills for Cursor. The licence is CC0-1.0.

When your agent uses it

  • Tasks that involve UX design
  • Tasks that involve Accessibility

Example prompts

  • “/recording-browser-flow-as-test”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Define the flow
  2. For each step, in order
  3. Add assertions
  4. Generate Playwright output
  5. Run and harden

What it can do on your machine

Read from SKILL.md and the folder at commit 99cd265. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Recording Browser Flow As Test loads about 857 tokens when it runs. Until then it costs about 60 tokens; SKILL.md has 402 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~857

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from spencerpauly/awesome-cursor-skills at commit 99cd265, republished under its CC0-1.0 licence (© spencerpauly). 402 words, ~857 tokens.

Download SKILL.mdSave it as .claude/skills/recording-browser-flow-as-test/SKILL.md (or your agent's skills folder).
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

Recording Browser Flow as Playwright Test

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.

Prerequisites

  • Target app reachable (e.g. dev server running); use finding-dev-server-url if needed.
  • Repo has or will have Playwright installed (@playwright/test). If not, add it with adding-e2e-tests or the project’s standard setup.

Recording workflow

1. Define the flow

One sentence scope, e.g. “Log in, open Settings, toggle dark mode, save.”

2. For each step, in order

  1. browser_snapshot — get the accessibility tree and element refs.

  2. 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.

  3. Log the step in a structured list the main agent keeps:

    • Step number
    • Action verb (navigate, click, fill, press, select)
    • Locator strategy for Playwright — prefer:
      • getByRole('button', { name: '...' })
      • getByLabel('...')
      • getByPlaceholder('...')
      • getByTestId('...') if the app uses test IDs
    • Value (for fills), URL (for navigates)
    • Optional: short assertion (“expect URL to contain /settings”)

  4. After actions that change the DOM or navigate, take a new browser_snapshot before the next interaction.

  5. If the flow must wait for async content, use browser_wait_for or short incremental waits per cursor-ide-browser guidance — then snapshot again.

Show full SKILL.md (155 more words)Show less
3. Add assertions

From the final snapshot and URL, add at least:

  • expect(page).toHaveURL(...) or URL fragment check
  • One visible outcome: text, role, or test id
4. Generate Playwright output

Emit a test file, e.g. tests/recorded/<flow-name>.spec.ts, containing:

  • test.describe and test('...', async ({ page }) => { ... })
  • Steps as await page.goto(...), await page.getByRole(...).click(), etc.
  • No raw snapshot refs in the final file — they are session-specific.
5. Run and harden
bash
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.

Tips

  • Stable selectors: roles and accessible names beat CSS from devtools. Add data-testid in app code if names are ambiguous.
  • Auth: if the flow needs login, use env vars for test credentials or Playwright storageState — never commit secrets.
  • Parallel runs: ensure test data does not collide with other tests.

When not to use

  • Flows that require manual 2FA, captchas, or email links — stop and ask the user for a test bypass or mock.

© spencerpauly, CC0-1.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in resources/recording-browser-flow-as-test of spencerpauly/awesome-cursor-skills.

Open the folder on GitHubat commit 99cd265

Compare with similar skills

Recording Browser Flow As Test next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Recording Browser Flow As Test compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Recording Browser Flow As Test this skillspencerpauly/awesome-cursor-skills844—~857Automated safety check: PassCC0-1.0
Ibm A11y Route Scanlangflow-ai/langflow155k—~1.6kAutomated safety check: PassMIT
Color Auditrome-os/rome743—~2.7kAutomated safety check: PassMIT
Ibm A11y Testing Guidelangflow-ai/langflow155k—~4.6kAutomated safety check: PassMIT
Control UIcursor/plugins11k2 repos~1.2kAutomated safety check: PassNone
Scout UI Testingelastic/kibana21k—~3.1kAutomated safety check: PassCustom licence

Similar skills

  • Ibm A11y Route Scan

    langflow-ai/langflow

    Batch-scan Langflow frontend routes for accessibility issues using the Python IBM Equal Access scanner (scripts/a11y/a11yscan.py) and produce JSON/Markdown/HTML reports.

    155k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Color Audit

    rome-os/rome

    Audit a design system's color palette against measurable color-science disciplines — WCAG/APCA contrast of declared token pairs, perceptual (OKLCH) ramp uniformity, color-blindness safety of…

    743 GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Ibm A11y Testing Guide

    langflow-ai/langflow

    Reference guide for writing and running Langflow frontend accessibility tests with axe (Jest) and IBM Equal Access (Playwright page.runA11yScan).

    155k GitHub stars~4.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Control UI

    cursor/plugins

    Official

    Build or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI.

    11k GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Scout UI Testing

    elastic/kibana

    Official

    A skill your agent uses when creating, updating, debugging, or reviewing Scout UI tests in Kibana (Playwright + Scout fixtures), including page objects, browser authentication, parallel UI tests…

    21k GitHub stars~3.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Accessibility Testing

    petrkindlmann/qa-skills

    Test for WCAG 2.2 AA compliance with axe-core + Playwright, keyboard navigation audits, screen reader testing, ARIA pattern validation, and legal compliance mapping (ADA, EAA, Section 508).

    170 GitHub stars~4.5k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

More from spencerpauly/awesome-cursor-skills

All 60 skills in this repo

  • Generating Images

    spencerpauly/awesome-cursor-skills

    Generate or edit images using the OpenAI Image API (gpt-image-2).

    844 GitHub stars~3.7k tokensUpdated 2 mo ago
    Auto-check: notes

  • Babysitting PR

    spencerpauly/awesome-cursor-skills

    Monitor a pull request for CI failures, review comments, and merge conflicts — then fix them automatically.

    844 GitHub stars~930 tokensUpdated 2 mo ago
    Auto-check passed

  • Best Of N Solving

    spencerpauly/awesome-cursor-skills

    Solve a hard problem by trying multiple approaches in parallel using isolated git worktrees.

    844 GitHub stars~698 tokensUpdated 2 mo ago
    Auto-check passed

  • Grinding Until Pass

    spencerpauly/awesome-cursor-skills

    Keep iterating on code changes until the tests pass, the build succeeds, or linting is clean.

    844 GitHub stars~796 tokensUpdated 2 mo ago
    Auto-check passed

  • Parallel CI Triage

    spencerpauly/awesome-cursor-skills

    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.

    844 GitHub stars~793 tokensUpdated 2 mo ago
    Auto-check passed

  • Parallel Exploring

    spencerpauly/awesome-cursor-skills

    Explore a large codebase in parallel by launching multiple explore subagents that each investigate a different area simultaneously.

    844 GitHub stars~787 tokensUpdated 2 mo ago
    Auto-check: notes

Works with

Categories

Questions about Recording Browser Flow As Test

What does Recording Browser Flow As Test do?

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…. Recording Browser Flow As Test is an agent skill from spencerpauly/awesome-cursor-skills. 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.

When should I use Recording Browser Flow As Test?

Recording Browser Flow As Test fits situations like: tasks that involve UX design; tasks that involve Accessibility.

How do I install Recording Browser Flow As Test in Claude Code?

Run `npx skills add spencerpauly/awesome-cursor-skills --skill recording-browser-flow-as-test -a claude-code`. Or copy the skill folder (resources/recording-browser-flow-as-test in spencerpauly/awesome-cursor-skills) into .claude/skills/recording-browser-flow-as-test in your project. Claude Code loads it when a task matches its description.

How do I install Recording Browser Flow As Test in Codex?

Run `npx skills add spencerpauly/awesome-cursor-skills --skill recording-browser-flow-as-test -a codex`. Or copy the skill folder (resources/recording-browser-flow-as-test in spencerpauly/awesome-cursor-skills) into .agents/skills/recording-browser-flow-as-test in your project. Codex loads it when a task matches its description.

Can I use Recording Browser Flow As Test in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add spencerpauly/awesome-cursor-skills --skill recording-browser-flow-as-test -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/recording-browser-flow-as-test, .gemini/skills/recording-browser-flow-as-test, .github/skills/recording-browser-flow-as-test and .opencode/skills/recording-browser-flow-as-test in your project.

What does Recording Browser Flow As Test need to run?

Going by SKILL.md and its folder, Recording Browser Flow As Test needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Recording Browser Flow As Test access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Recording Browser Flow As Test safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Recording Browser Flow As Test use?

Recording Browser Flow As Test is published under the CC0-1.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Recording Browser Flow As Test use?

About 857 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Recording Browser Flow As Test?

Skills that share tags, products or a category with Recording Browser Flow As Test: Ibm A11y Route Scan (langflow-ai/langflow, 155k stars), Color Audit (rome-os/rome, 743 stars), Ibm A11y Testing Guide (langflow-ai/langflow, 155k stars) and Control UI (cursor/plugins, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Recording Browser Flow As Test?

spencerpauly (a GitHub user) maintains it in spencerpauly/awesome-cursor-skills, which has 844 GitHub stars. The repository holds 60 skills in this directory. The repository was last updated on August 2, 2026.

Source: spencerpauly/awesome-cursor-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.