Create Playwright end-to-end tests with TypeScript and GitHub Actions.
npx skills add https://github.com/vinceh/recipe --skill playwright-testing
Please help me install this Agent Skill. Skill: playwright-testing Source: https://github.com/vinceh/recipe/tree/main/.claude/skills/playwright-testing Command: npx skills add https://github.com/vinceh/recipe --skill playwright-testing
This Skill streamlines the creation and maintenance of robust, reliable tests for modern web applications. It tackles the challenges of flaky tests, complex setups, and inconsistent testing practices, allowing you to build high-quality software with confidence and speed.
import { test, expect } from '@playwright/test';
test('user can login successfully', async ({ page }) => { // Navigate to application await page.goto('https://app.example.com');
// Interact with elements using recommended locators await page.getByLabel('Email').fill('[email protected]'); await page.getByLabel('Password').fill('SecurePass123'); await page.getByRole('button', { name: 'Sign in' }).click();
// Assert expected outcomes await expect(page).toHaveURL('/dashboard'); await expect(page.getByRole('heading', { name: 'Welcome back' })).toBeVisible(); });
High-intent search queries and answers about installing and using this skill.
End-to-end testing with Playwright and TypeScript involves writing test cases that simulate user interactions across your entire application. Use Playwright's semantic locators (getByRole, getByLabel) to find elements, interact with them, and assert outcomes. The Skill provides setup guides, Page Object Model patterns, and TypeScript fixtures to structure maintainable test suites for SPAs and traditional web apps.
Yes, Playwright supports component testing for isolated UI verification and visual regression testing to catch unintended appearance changes. This Skill covers both approaches with examples for React, Vue, and Angular components, helping you validate not just functionality but also visual consistency across your application.
Automate Playwright tests in your CI/CD pipeline by configuring GitHub Actions workflows to run your test suite on every code push. This Skill provides step-by-step GitHub Actions integration patterns that trigger end-to-end and component tests automatically, catch failures early, and enforce quality gates before deployment.
Page Object Models (POM) abstract page structure into reusable classes that encapsulate selectors and interactions, reducing duplication and improving maintainability. This Skill teaches POM patterns and advanced variations for Playwright, making tests more readable and resilient to UI changes across React, Vue, Angular, and traditional applications.
Accessibility testing ensures your application meets inclusivity standards and works for all users. This Skill integrates accessibility testing patterns into Playwright test workflows, helping you catch WCAG violations and keyboard navigation issues alongside functional tests for a more complete quality strategy.
Playwright tests are less flaky because of built-in waiting mechanisms, better element locators, and TypeScript strict typing that catches issues early. This Skill leverages semantic locators and Playwright Test fixtures to eliminate timing issues and reduce false failures, ensuring consistent, reliable test results across runs.
open-haxSet up Ava test runner for TypeScript projects with minimal configuration.
semicolon-devteamExecutes Gradle builds and collects JVM-based project coverage with Surefire/Failsafe reports.
srz-zumixManage GitHub Actions secrets, deploy keys, and environments via CLI.
williamzujkowskiAutomate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.
