home / skills / andrelandgraf / fullstackrecipes / playwright-tests

playwright-tests skill

safe

This skill helps you create and run browser tests with Playwright to verify user interactions, navigation, and visual feedback across pages.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill playwright-tests

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

550 B

---
name: playwright-tests
description: End-to-end browser testing with Playwright. Test user interactions, form validation, navigation, and visual feedback with full browser automation.
---

# Browser Tests with Playwright

To set up Browser Tests with Playwright, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/playwright-tests`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/playwright-tests
```

Overview

This skill provides end-to-end browser testing with Playwright for full-stack web AI apps, using production-ready patterns and step-by-step recipe guidance. It bundles practical test patterns for user interactions, form validation, navigation, and visual feedback across real browsers. The goal is fast, reliable browser automation that integrates with TypeScript projects and common UI component libraries.

How this skill works

The skill installs and configures Playwright test runners and recommended TypeScript settings, then applies curated test recipes that exercise UI flows and edge cases. It includes example test suites for clicks, form entry, routing, authentication flows, and visual snapshots. A centralized recipe resource provides structured guidance and commands to fetch the configuration and sample tests.

When to use it

Validate critical user flows across Chromium, WebKit, and Firefox before releases
Automate regression tests for form validations and error states
Verify navigation, routing, and client-side state transitions in complex SPAs
Capture visual regressions with snapshot testing for UI components
Integrate reliable e2e checks into CI pipelines for production readiness

Best practices

Write focused tests that assert one user journey or behavior per test
Use fixtures and page objects to reuse setup and reduce flakiness
Run headless tests in CI and optionally run headed locally for debugging
Keep test selectors stable by using data-test attributes instead of CSS classes
Limit external network dependencies with request interception or test doubles

Example use cases

End-to-end signup flow: fill form, validate errors, confirm email step, and land on dashboard
Shopping cart checkout: add items, update quantities, complete payment flow, and verify order summary
Auth guard checks: assert protected routes redirect to login and role-based UI changes
Visual regression: capture snapshots of critical pages and fail CI on layout drift
Accessibility smoke tests: ensure basic ARIA roles, labels, and keyboard navigation

FAQ

How do I get the recipe and configuration?

Fetch the recipe from the MCP server URI recipe://fullstackrecipes.com/playwright-tests or, if the MCP server is unavailable, use curl to retrieve it: curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/playwright-tests

Which browsers are supported?

Playwright runs Chromium, Firefox, and WebKit. Use the bundled configuration to test across all three in CI or a subset locally.