release: v2.1.1 — skill optimization, agents, commands, reference splits (#297)
This commit is contained in:
Alireza Rezvani
GitHub
@@ -9,17 +9,5 @@
|
||||
"homepage": "https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro",
|
||||
"repository": "https://github.com/alirezarezvani/claude-skills",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"playwright",
|
||||
"testing",
|
||||
"e2e",
|
||||
"qa",
|
||||
"browserstack",
|
||||
"testrail",
|
||||
"test-automation",
|
||||
"cross-browser",
|
||||
"migration",
|
||||
"cypress",
|
||||
"selenium"
|
||||
]
|
||||
"skills": "./"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: playwright-pro
|
||||
description: "Production-grade Playwright testing toolkit. Generate tests, fix flaky failures, migrate from Cypress/Selenium, sync with TestRail, run on BrowserStack. 55 templates, 3 agents, smart reporting."
|
||||
name: "playwright-pro"
|
||||
description: "Production-grade Playwright testing toolkit. Use when the user mentions Playwright tests, end-to-end testing, browser automation, fixing flaky tests, test migration, CI/CD testing, or test suites. Generate tests, fix flaky failures, migrate from Cypress/Selenium, sync with TestRail, run on BrowserStack. 55 templates, 3 agents, smart reporting."
|
||||
---
|
||||
|
||||
# Playwright Pro
|
||||
@@ -23,6 +23,45 @@ When installed as a Claude Code plugin, these are available as `/pw:` commands:
|
||||
| `/pw:browserstack` | Run on BrowserStack, pull cross-browser reports |
|
||||
| `/pw:report` | Generate test report in your preferred format |
|
||||
|
||||
## Quick Start Workflow
|
||||
|
||||
The recommended sequence for most projects:
|
||||
|
||||
```
|
||||
1. /pw:init → scaffolds config, CI pipeline, and a first smoke test
|
||||
2. /pw:generate → generates tests from your spec or URL
|
||||
3. /pw:review → validates quality and flags anti-patterns ← always run after generate
|
||||
4. /pw:fix <test> → diagnoses and repairs any failing/flaky tests ← run when CI turns red
|
||||
```
|
||||
|
||||
**Validation checkpoints:**
|
||||
- After `/pw:generate` — always run `/pw:review` before committing; it catches locator anti-patterns and missing assertions automatically.
|
||||
- After `/pw:fix` — re-run the full suite locally (`npx playwright test`) to confirm the fix doesn't introduce regressions.
|
||||
- After `/pw:migrate` — run `/pw:coverage` to confirm parity with the old suite before decommissioning Cypress/Selenium tests.
|
||||
|
||||
### Example: Generate → Review → Fix
|
||||
|
||||
```bash
|
||||
# 1. Generate tests from a user story
|
||||
/pw:generate "As a user I can log in with email and password"
|
||||
|
||||
# Generated: tests/auth/login.spec.ts
|
||||
# → Playwright Pro creates the file using the auth template.
|
||||
|
||||
# 2. Review the generated tests
|
||||
/pw:review tests/auth/login.spec.ts
|
||||
|
||||
# → Flags: one test used page.locator('input[type=password]') — suggests getByLabel('Password')
|
||||
# → Fix applied automatically.
|
||||
|
||||
# 3. Run locally to confirm
|
||||
npx playwright test tests/auth/login.spec.ts --headed
|
||||
|
||||
# 4. If a test is flaky in CI, diagnose it
|
||||
/pw:fix tests/auth/login.spec.ts
|
||||
# → Identifies missing web-first assertion; replaces waitForTimeout(2000) with expect(locator).toBeVisible()
|
||||
```
|
||||
|
||||
## Golden Rules
|
||||
|
||||
1. `getByRole()` over CSS/XPath — resilient to markup changes
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: browserstack
|
||||
name: "browserstack"
|
||||
description: >-
|
||||
Run tests on BrowserStack. Use when user mentions "browserstack",
|
||||
"cross-browser", "cloud testing", "browser matrix", "test on safari",
|
||||
@@ -40,7 +40,7 @@ export default defineConfig({
|
||||
// ... existing config
|
||||
projects: isBS ? [
|
||||
{
|
||||
name: 'chrome@latest:Windows 11',
|
||||
name: "chromelatestwindows-11",
|
||||
use: {
|
||||
connectOptions: {
|
||||
wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({
|
||||
@@ -55,7 +55,7 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'firefox@latest:Windows 11',
|
||||
name: "firefoxlatestwindows-11",
|
||||
use: {
|
||||
connectOptions: {
|
||||
wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({
|
||||
@@ -70,7 +70,7 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'webkit@latest:OS X Ventura',
|
||||
name: "webkitlatestos-x-ventura",
|
||||
use: {
|
||||
connectOptions: {
|
||||
wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: coverage
|
||||
name: "coverage"
|
||||
description: >-
|
||||
Analyze test coverage gaps. Use when user says "test coverage",
|
||||
"what's not tested", "coverage gaps", "missing tests", "coverage report",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: fix
|
||||
name: "fix"
|
||||
description: >-
|
||||
Fix failing or flaky Playwright tests. Use when user says "fix test",
|
||||
"flaky test", "test failing", "debug test", "test broken", "test passes
|
||||
@@ -14,7 +14,7 @@ Diagnose and fix a Playwright test that fails or passes intermittently using a s
|
||||
|
||||
`$ARGUMENTS` contains:
|
||||
- A test file path: `e2e/login.spec.ts`
|
||||
- A test name: `"should redirect after login"`
|
||||
- A test name: ""should redirect after login"`
|
||||
- A description: `"the checkout test fails in CI but passes locally"`
|
||||
|
||||
## Steps
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: generate
|
||||
name: "generate"
|
||||
description: >-
|
||||
Generate Playwright tests. Use when user says "write tests", "generate tests",
|
||||
"add tests for", "test this component", "e2e test", "create test for",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: init
|
||||
name: "init"
|
||||
description: >-
|
||||
Set up Playwright in a project. Use when user says "set up playwright",
|
||||
"add e2e tests", "configure playwright", "testing setup", "init playwright",
|
||||
@@ -61,9 +61,9 @@ export default defineConfig({
|
||||
screenshot: 'only-on-failure',
|
||||
},
|
||||
projects: [
|
||||
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
|
||||
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
|
||||
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
|
||||
{ name: "chromium", use: { ...devices['Desktop Chrome'] } },
|
||||
{ name: "firefox", use: { ...devices['Desktop Firefox'] } },
|
||||
{ name: "webkit", use: { ...devices['Desktop Safari'] } },
|
||||
],
|
||||
webServer: {
|
||||
command: 'npm run dev',
|
||||
@@ -125,7 +125,7 @@ test.describe('Homepage', () => {
|
||||
If `.github/workflows/` exists, create `playwright.yml`:
|
||||
|
||||
```yaml
|
||||
name: Playwright Tests
|
||||
name: "playwright-tests"
|
||||
|
||||
on:
|
||||
push:
|
||||
@@ -142,16 +142,16 @@ jobs:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: lts/*
|
||||
- name: Install dependencies
|
||||
- name: "install-dependencies"
|
||||
run: npm ci
|
||||
- name: Install Playwright Browsers
|
||||
- name: "install-playwright-browsers"
|
||||
run: npx playwright install --with-deps
|
||||
- name: Run Playwright tests
|
||||
- name: "run-playwright-tests"
|
||||
run: npx playwright test
|
||||
- uses: actions/upload-artifact@v4
|
||||
if: ${{ !cancelled() }}
|
||||
with:
|
||||
name: playwright-report
|
||||
name: "playwright-report"
|
||||
path: playwright-report/
|
||||
retention-days: 30
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: migrate
|
||||
name: "migrate"
|
||||
description: >-
|
||||
Migrate from Cypress or Selenium to Playwright. Use when user mentions
|
||||
"cypress", "selenium", "migrate tests", "convert tests", "switch to
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: report
|
||||
name: "report"
|
||||
description: >-
|
||||
Generate test report. Use when user says "test report", "results summary",
|
||||
"test status", "show results", "test dashboard", or "how did tests go".
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: review
|
||||
name: "review"
|
||||
description: >-
|
||||
Review Playwright tests for quality. Use when user says "review tests",
|
||||
"check test quality", "audit tests", "improve tests", "test code review",
|
||||
@@ -72,7 +72,7 @@ For each file:
|
||||
|
||||
### Critical
|
||||
- Line 15: `waitForTimeout(2000)` → use `expect(locator).toBeVisible()`
|
||||
- Line 28: CSS selector `.btn-submit` → `getByRole('button', { name: 'Submit' })`
|
||||
- Line 28: CSS selector `.btn-submit` → `getByRole('button', { name: "submit" })`
|
||||
|
||||
### Warning
|
||||
- Line 42: Test name "test login" → "should redirect to dashboard after login"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: testrail
|
||||
name: "testrail"
|
||||
description: >-
|
||||
Sync tests with TestRail. Use when user mentions "testrail", "test management",
|
||||
"test cases", "test run", "sync test cases", "push results to testrail",
|
||||
|
||||
Reference in New Issue
Block a user