testing-web-applications-end-to-end
Skill1 starsChanged 3 months agoMITView on GitHub
Use when a web application's assembled browser experience, critical user journeys, routing, forms, authentication, client state, or network behavior must be verified beyond component and integration tests.
In this repository65 other files it gives its agents.
- analyzing-change-blast-radiusSkill
- analyzing-developer-career-opportunitiesSkill
- art-directing-web-interfacesSkill
- assessing-developer-proficiencySkill
- auditing-dependency-riskSkill
- auditing-pixel-perfect-frontendSkill
- bootstrapping-modern-web-appsSkill
- brag-slimSkill
- building-brand-guidelinesSkill
- building-conversion-product-pagesSkill
- building-developer-career-roadmapsSkill
- building-hybrid-game-assetsSkill
- building-premium-nextjs-interfacesSkill
- building-project-showcasesSkill
- building-regression-testsSkill
- building-reliable-node-api-boundariesSkill
- choosing-application-architectureSkill
- craft-premium-motionSkill
- creating-character-sprite-pipelinesSkill
- defining-brand-strategySkill
- designing-action-combatSkill
- designing-developer-portfolio-evidenceSkill
- designing-relational-data-modelsSkill
- designing-software-boundariesSkill
- designing-test-strategiesSkill
- designing-ui-systemsSkill
- designing-visual-identitiesSkill
- documenting-architecture-decisionsSkill
- editing-for-clarity-and-toneSkill
- engineering-gsap-animationsSkill
- evaluating-developer-proficiencySkill
- evolving-postgres-schemas-safelySkill
- humanizing-generated-proseSkill
- implementing-reference-faithful-uiSkill
- investigating-codebase-semanticallySkill
- managing-implementation-slicesSkill
- mapping-existing-codebase-structureSkill
- naming-brands-and-productsSkill
- optimizing-frontend-motion-performanceSkill
- orchestrating-cinematic-web-motionSkill
- planning-codebase-changes-with-evidenceSkill
- planning-engineering-workSkill
- planning-launch-distributionSkill
- planning-safe-refactorsSkill
- planning-written-communicationSkill
- preparing-project-launchSkill
- profiling-postgres-query-performanceSkill
- reconstructing-images-as-threejsSkill
- reviewing-api-securitySkill
- reviewing-apple-platform-interfacesSkill
- reviewing-pull-requestsSkill
- reviewing-web-securitySkill
- selecting-working-methodsSkill
- shipping-github-vercel-changesSkill
- teaching-developer-conceptsSkill
- testing-integration-boundariesSkill
- testing-playable-gamesSkill
- threat-modeling-applicationsSkill
- tracing-code-execution-pathsSkill
- translating-figma-to-nextjsSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
8 rules. About 0 are common, 8 are distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈8
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 9
Use end-to-end tests to prove a small set of critical user journeys through the assembled product.
- Distinctive: line 13
Keep the journey focused. Cover the minimum sequence of features that must work together to achieve the goal.
- Distinctive: line 14
Start from controlled state: deterministic data, explicit authentication state, known feature flags, and an isolated browser context.
- Distinctive: line 17
When a failure occurs, inspect the browser before patching code: visible UI, URL, console errors, failed requests, response status/body, …
- Distinctive: line 18
Test negative or recovery paths only when they are critical to the journey: rejected auth, validation, failed request, retry, expired …
- Distinctive: line 19
Keep tests independent. No journey should require another test to have run first.
- Distinctive: line 32
Do not move every edge case into the browser.
- Distinctive: line 34
Do not make Playwright, Cypress, or another runner part of the method itself.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Testing Web Applications End to End
Core principle
Use end-to-end tests to prove a small set of critical user journeys through the assembled product. Interact with the application as a user would and inspect browser evidence when the journey fails.
Journey workflow
- Define the user goal, starting state, and completion condition before writing selectors or actions.
- Keep the journey focused. Cover the minimum sequence of features that must work together to achieve the goal.
- Start from controlled state: deterministic data, explicit authentication state, known feature flags, and an isolated browser context.
- Navigate and interact through user-facing contracts such as roles, labels, text, URLs, and visible state. Avoid selectors coupled to styling or implementation internals.
- Assert meaningful outcomes rather than every intermediate DOM mutation.
- When a failure occurs, inspect the browser before patching code: visible UI, URL, console errors, failed requests, response status/body, storage/state, and screenshots when visual evidence matters.
- Test negative or recovery paths only when they are critical to the journey: rejected auth, validation, failed request, retry, expired state, or interrupted navigation.
- Keep tests independent. No journey should require another test to have run first.
Browser evidence
Capture the evidence needed to distinguish product defects from test defects:
- the final visible state and URL;
- console exceptions;
- relevant request/response failures;
- screenshot or trace for visual/timing failures;
- exact reproduction steps and test data.
A screenshot alone is not root-cause evidence when console, network, or state explains the failure.
Scope discipline
Do not move every edge case into the browser. If a failure can be proven at a narrower layer with equal confidence, test it there and keep only enough end-to-end coverage to prove the assembled journey.
Do not make Playwright, Cypress, or another runner part of the method itself. Use the browser tooling available in the environment; when Playwright is available, prefer its user-facing locators, isolation model, traces, console/network inspection, and auto-waiting rather than arbitrary sleeps.
Verification
A good E2E suite answers two questions quickly: “Can users complete the critical journey?” and, when not, “What observable browser evidence narrows the failure?” If it cannot do both, reduce scope or improve observability.
References
- Playwright, Best Practices: https://playwright.dev/docs/best-practices
- Google Testing Blog, How Much Testing is Enough?: https://testing.googleblog.com/2021/06/how-much-testing-is-enough.html
- Google Testing Blog, Just Say No to More End-to-End Tests: https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

