Playwright End-to-End Browser Testing

What it does

Playwright End-to-End Browser Testing is a Cursor skill: a SKILL.md playbook that AgenticKit installs at .cursor/skills/playwright-e2e. Cursor's agent loads it when the task matches the skill description, instead of stuffing the same rules into every chat.

End-to-end browser automation with Playwright covering critical user purchase funnels, authentication flows, and accessibility checks.

User journey tests, cross-browser suites, visual regression, and auth state. The file is domain knowledge, not a slash macro. You do not type it. The agent reads it when the job is playwright e2e.

Why it exists

Default Cursor has no memory of how your team ships code, schema, and tests. Founders paste the same conventions into chat, then watch the model drift on the next turn. This skill exists so those conventions live on disk and load only when relevant.

It ships in the Engineering Kit. It is wired to the Test Automation Engineer (test-automator) and React 19 & Next.js Specialist (react-specialist) agents. It is wired to the /e2e-suite: Playwright End-to-End Test Suite Generator and /ship: End-to-End Feature Pipeline Shipper commands. That graph is the point: the skill is the standard, the agent is the role, the command is the trigger.

When to use it

• Use Playwright End-to-End Browser Testing when the work is specifically about user journey tests, cross-browser suites, visual regression, and auth state.
• Load it before a long session that will touch this surface more than once. A one-line edit does not need the full playbook.
• Use it on production SaaS work (multi-tenant apps, paid features, anything that will be reviewed) rather than a throwaway prototype.

When not to use it

• Do not treat the skill as a replacement for a slash command. Skills teach. Commands run a pipeline.
• Do not paste the whole SKILL.md into chat. If Cursor is not loading it, fix the description or invoke the matching command.
• Do not use it as a generic 'write better code' rule. Scope is this domain only.

Example workflow

1. Install the Engineering Kit so .cursor/skills/playwright-e2e lands in the repo.
2. Open a new Cursor agent chat pointed at the files this skill governs.
3. Ask the Test Automation Engineer (test-automator) to read the skill, or run /e2e-suite: Playwright End-to-End Test Suite Generator.
4. Review the first artifact against the practices below. If it violates one, stop and correct the file. Do not prompt 'just finish it'.
5. Commit the skill-guided files with the rest of the slice so the next session inherits the same standard.

Example usage

Example prompt: "Read .cursor/skills/playwright-e2e and apply it to this change. Do not invent extra conventions."

Or trigger the pipeline: /e2e-suite: Playwright End-to-End Test Suite Generator. That command is written to load this skill.

Check the output against: Save authenticated storageState to bypass repetitive login UI across tests

Example output

• The skill itself does not write a single output file. It changes what the agent is allowed to produce in code, schema, and tests.
• When you run /e2e-suite: Playwright End-to-End Test Suite Generator, expect repo files plus notes under docs/, not a chat-only answer.

Best practices

• Save authenticated storageState to bypass repetitive login UI across tests
• Target UI elements using accessible locators (getByRole, getByLabel) instead of CSS classes
• Run tests against multiple viewport sizes (desktop, tablet, mobile)
• Capture trace artifacts, screenshots, and video recordings on test failures

Common mistakes

• Ignoring "Save authenticated storageState to bypass repetitive login UI across tests" and hoping a later prompt will clean it up.
• Copying the skill into .cursor/rules as always-on. That burns context and fights Cursor's load-on-match design.
• Running two overlapping skills that contradict each other in the same turn.
• Letting the agent skip tests or types because 'the skill is about architecture'.