[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70NRFTFPY53PDQY2AE9K9TS":3,"skill-same:01M70NRFTFPY53PDQY2AE9K9TS":73},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":56,"ownerDescription":57,"updatedAt":58,"install":59,"resources":72},"01M70NRFTFPY53PDQY2AE9K9TS","e2e-testing-patterns",null,"Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment. Use when implementing E2E tests, debugging flaky tests, or establishing testing standards.","shengdabai\u002FTony-Claude-Code-Skills","shengdabai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F116417419?v=4","01M70F6D2WY5PQV5A92BKYJQEW","Tony Sheng","01M70F6D3GAAAYZ5H4CC1G8VXM",3,"MIT","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fwshobson-agents\u002Fplugins\u002Fdeveloper-essentials\u002Fskills\u002Fe2e-testing-patterns\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"testing","e2e testing patterns","patterns","e2e","e2e testing","testing patterns","tests","deployment","bugs","standards","cypress","master","e2e tests","catch","testing standards","when","debugging","improve","implementing","end","2026-11-10 10:12:30",false,"---\nname: e2e-testing-patterns\ndescription: Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment. Use when implementing E2E tests, debugging flaky tests, or establishing testing standards.\n---\n\n# E2E Testing Patterns\n\nBuild reliable, fast, and maintainable end-to-end test suites that provide confidence to ship code quickly and catch regressions before users do.\n\n## When to Use This Skill\n\n- Implementing end-to-end test automation\n- Debugging flaky or unreliable tests\n- Testing critical user workflows\n- Setting up CI\u002FCD test pipelines\n- Testing across multiple browsers\n- Validating accessibility requirements\n- Testing responsive designs\n- Establishing E2E testing standards\n\n## Core Concepts\n\n### 1. E2E Testing Fundamentals\n\n**What to Test with E2E:**\n- Critical user journeys (login, checkout, signup)\n- Complex interactions (drag-and-drop, multi-step forms)\n- Cross-browser compatibility\n- Real API integration\n- Authentication flows\n\n**What NOT to Test with E2E:**\n- Unit-level logic (use unit tests)\n- API contracts (use integration tests)\n- Edge cases (too slow)\n- Internal implementation details\n\n### 2. Test Philosophy\n\n**The Testing Pyramid:**\n```\n        \u002F\\\n       \u002FE2E\\         ← Few, focused on critical paths\n      \u002F─────\\\n     \u002FIntegr\\        ← More, test component interactions\n    \u002F────────\\\n   \u002FUnit Tests\\      ← Many, fast, isolated\n  \u002F────────────\\\n```\n\n**Best Practices:**\n- Test user behavior, not implementation\n- Keep tests independent\n- Make tests deterministic\n- Optimize for speed\n- Use data-testid, not CSS selectors\n\n## Playwright Patterns\n\n### Setup and Configuration\n\n```typescript\n\u002F\u002F playwright.config.ts\nimport { defineConfig, devices } from '@playwright\u002Ftest';\n\nexport default defineConfig({\n    testDir: '.\u002Fe2e',\n    timeout: 30000,\n    expect: {\n        timeout: 5000,\n    },\n    fullyParallel: true,\n    forbidOnly: !!process.env.CI,\n    retries: process.env.CI ? 2 : 0,\n    workers: process.env.CI ? 1 : undefined,\n    reporter: [\n        ['html'],\n        ['junit', { outputFile: 'results.xml' }],\n    ],\n    use: {\n        baseURL: 'http:\u002F\u002Flocalhost:3000',\n        trace: 'on-first-retry',\n        screenshot: 'only-on-failure',\n        video: 'retain-on-failure',\n    },\n    projects: [\n        { name: 'chromium', use: { ...devices['Desktop Chrome'] } },\n        { name: 'firefox', use: { ...devices['Desktop Firefox'] } },\n        { name: 'webkit', use: { ...devices['Desktop Safari'] } },\n        { name: 'mobile', use: { ...devices['iPhone 13'] } },\n    ],\n});\n```\n\n### Pattern 1: Page Object Model\n\n```typescript\n\u002F\u002F pages\u002FLoginPage.ts\nimport { Page, Locator } from '@playwright\u002Ftest';\n\nexport class LoginPage {\n    readonly page: Page;\n    readonly emailInput: Locator;\n    readonly passwordInput: Locator;\n    readonly loginButton: Locator;\n    readonly errorMessage: Locator;\n\n    constructor(page: Page) {\n        this.page = page;\n        this.emailInput = page.getByLabel('Email');\n        this.passwordInput = page.getByLabel('Password');\n        this.loginButton = page.getByRole('button', { name: 'Login' });\n        this.errorMessage = page.getByRole('alert');\n    }\n\n    async goto() {\n        await this.page.goto('\u002Flogin');\n    }\n\n    async login(email: string, password: string) {\n        await this.emailInput.fill(email);\n        await this.passwordInput.fill(password);\n        await this.loginButton.click();\n    }\n\n    async getErrorMessage(): Promise\u003Cstring> {\n        return await this.errorMessage.textContent() ?? '';\n    }\n}\n\n\u002F\u002F Test using Page Object\nimport { test, expect } from '@playwright\u002Ftest';\nimport { LoginPage } from '.\u002Fpages\u002FLoginPage';\n\ntest('successful login', async ({ page }) => {\n    const loginPage = new LoginPage(page);\n    await loginPage.goto();\n    await loginPage.login('user@example.com', 'password123');\n\n    await expect(page).toHaveURL('\u002Fdashboard');\n    await expect(page.getByRole('heading', { name: 'Dashboard' }))\n        .toBeVisible();\n});\n\ntest('failed login shows error', async ({ page }) => {\n    const loginPage = new LoginPage(page);\n    await loginPage.goto();\n    await loginPage.login('invalid@example.com', 'wrong');\n\n    const error = await loginPage.getErrorMessage();\n    expect(error).toContain('Invalid credentials');\n});\n```\n\n### Pattern 2: Fixtures for Test Data\n\n```typescript\n\u002F\u002F fixtures\u002Ftest-data.ts\nimport { test as base } from '@playwright\u002Ftest';\n\ntype TestData = {\n    testUser: {\n        email: string;\n        password: string;\n        name: string;\n    };\n    adminUser: {\n        email: string;\n        password: string;\n    };\n};\n\nexport const test = base.extend\u003CTestData>({\n    testUser: async ({}, use) => {\n        const user = {\n            email: `test-${Date.now()}@example.com`,\n            password: 'Test123!@#',\n            name: 'Test User',\n        };\n        \u002F\u002F Setup: Create user in database\n        await createTestUser(user);\n        await use(user);\n        \u002F\u002F Teardown: Clean up user\n        await deleteTestUser(user.email);\n    },\n\n    adminUser: async ({}, use) => {\n        await use({\n            email: 'admin@example.com',\n            password: process.env.ADMIN_PASSWORD!,\n        });\n    },\n});\n\n\u002F\u002F Usage in tests\nimport { test } from '.\u002Ffixtures\u002Ftest-data';\n\ntest('user can update profile', async ({ page, testUser }) => {\n    await page.goto('\u002Flogin');\n    await page.getByLabel('Email').fill(testUser.email);\n    await page.getByLabel('Password').fill(testUser.password);\n    await page.getByRole('button', { name: 'Login' }).click();\n\n    await page.goto('\u002Fprofile');\n    await page.getByLabel('Name').fill('Updated Name');\n    await page.getByRole('button', { name: 'Save' }).click();\n\n    await expect(page.getByText('Profile updated')).toBeVisible();\n});\n```\n\n### Pattern 3: Waiting Strategies\n\n```typescript\n\u002F\u002F ❌ Bad: Fixed timeouts\nawait page.waitForTimeout(3000);  \u002F\u002F Flaky!\n\n\u002F\u002F ✅ Good: Wait for specific conditions\nawait page.waitForLoadState('networkidle');\nawait page.waitForURL('\u002Fdashboard');\nawait page.waitForSelector('[data-testid=\"user-profile\"]');\n\n\u002F\u002F ✅ Better: Auto-waiting with assertions\nawait expect(page.getByText('Welcome')).toBeVisible();\nawait expect(page.getByRole('button', { name: 'Submit' }))\n    .toBeEnabled();\n\n\u002F\u002F Wait for API response\nconst responsePromise = page.waitForResponse(\n    response => response.url().includes('\u002Fapi\u002Fusers') && response.status() === 200\n);\nawait page.getByRole('button', { name: 'Load Users' }).click();\nconst response = await responsePromise;\nconst data = await response.json();\nexpect(data.users).toHaveLength(10);\n\n\u002F\u002F Wait for multiple conditions\nawait Promise.all([\n    page.waitForURL('\u002Fsuccess'),\n    page.waitForLoadState('networkidle'),\n    expect(page.getByText('Payment successful')).toBeVisible(),\n]);\n```\n\n### Pattern 4: Network Mocking and Interception\n\n```typescript\n\u002F\u002F Mock API responses\ntest('displays error when API fails', async ({ page }) => {\n    await page.route('**\u002Fapi\u002Fusers', route => {\n        route.fulfill({\n            status: 500,\n            contentType: 'application\u002Fjson',\n            body: JSON.stringify({ error: 'Internal Server Error' }),\n        });\n    });\n\n    await page.goto('\u002Fusers');\n    await expect(page.getByText('Failed to load users')).toBeVisible();\n});\n\n\u002F\u002F Intercept and modify requests\ntest('can modify API request', async ({ page }) => {\n    await page.route('**\u002Fapi\u002Fusers', async route => {\n        const request = route.request();\n        const postData = JSON.parse(request.postData() || '{}');\n\n        \u002F\u002F Modify request\n        postData.role = 'admin';\n\n        await route.continue({\n            postData: JSON.stringify(postData),\n        });\n    });\n\n    \u002F\u002F Test continues...\n});\n\n\u002F\u002F Mock third-party services\ntest('payment flow with mocked Stripe', async ({ page }) => {\n    await page.route('**\u002Fapi\u002Fstripe\u002F**', route => {\n        route.fulfill({\n            status: 200,\n            body: JSON.stringify({\n                id: 'mock_payment_id',\n                status: 'succeeded',\n            }),\n        });\n    });\n\n    \u002F\u002F Test payment flow with mocked response\n});\n```\n\n## Cypress Patterns\n\n### Setup and Configuration\n\n```typescript\n\u002F\u002F cypress.config.ts\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n    e2e: {\n        baseUrl: 'http:\u002F\u002Flocalhost:3000',\n        viewportWidth: 1280,\n        viewportHeight: 720,\n        video: false,\n        screenshotOnRunFailure: true,\n        defaultCommandTimeout: 10000,\n        requestTimeout: 10000,\n        setupNodeEvents(on, config) {\n            \u002F\u002F Implement node event listeners\n        },\n    },\n});\n```\n\n### Pattern 1: Custom Commands\n\n```typescript\n\u002F\u002F cypress\u002Fsupport\u002Fcommands.ts\ndeclare global {\n    namespace Cypress {\n        interface Chainable {\n            login(email: string, password: string): Chainable\u003Cvoid>;\n            createUser(userData: UserData): Chainable\u003CUser>;\n            dataCy(value: string): Chainable\u003CJQuery\u003CHTMLElement>>;\n        }\n    }\n}\n\nCypress.Commands.add('login', (email: string, password: string) => {\n    cy.visit('\u002Flogin');\n    cy.get('[data-testid=\"email\"]').type(email);\n    cy.get('[data-testid=\"password\"]').type(password);\n    cy.get('[data-testid=\"login-button\"]').click();\n    cy.url().should('include', '\u002Fdashboard');\n});\n\nCypress.Commands.add('createUser', (userData: UserData) => {\n    return cy.request('POST', '\u002Fapi\u002Fusers', userData)\n        .its('body');\n});\n\nCypress.Commands.add('dataCy', (value: string) => {\n    return cy.get(`[data-cy=\"${value}\"]`);\n});\n\n\u002F\u002F Usage\ncy.login('user@example.com', 'password');\ncy.dataCy('submit-button').click();\n```\n\n### Pattern 2: Cypress Intercept\n\n```typescript\n\u002F\u002F Mock API calls\ncy.intercept('GET', '\u002Fapi\u002Fusers', {\n    statusCode: 200,\n    body: [\n        { id: 1, name: 'John' },\n        { id: 2, name: 'Jane' },\n    ],\n}).as('getUsers');\n\ncy.visit('\u002Fusers');\ncy.wait('@getUsers');\ncy.get('[data-testid=\"user-list\"]').children().should('have.length', 2);\n\n\u002F\u002F Modify responses\ncy.intercept('GET', '\u002Fapi\u002Fusers', (req) => {\n    req.reply((res) => {\n        \u002F\u002F Modify response\n        res.body.users = res.body.users.slice(0, 5);\n        res.send();\n    });\n});\n\n\u002F\u002F Simulate slow network\ncy.intercept('GET', '\u002Fapi\u002Fdata', (req) => {\n    req.reply((res) => {\n        res.delay(3000);  \u002F\u002F 3 second delay\n        res.send();\n    });\n});\n```\n\n## Advanced Patterns\n\n### Pattern 1: Visual Regression Testing\n\n```typescript\n\u002F\u002F With Playwright\nimport { test, expect } from '@playwright\u002Ftest';\n\ntest('homepage looks correct', async ({ page }) => {\n    await page.goto('\u002F');\n    await expect(page).toHaveScreenshot('homepage.png', {\n        fullPage: true,\n        maxDiffPixels: 100,\n    });\n});\n\ntest('button in all states', async ({ page }) => {\n    await page.goto('\u002Fcomponents');\n\n    const button = page.getByRole('button', { name: 'Submit' });\n\n    \u002F\u002F Default state\n    await expect(button).toHaveScreenshot('button-default.png');\n\n    \u002F\u002F Hover state\n    await button.hover();\n    await expect(button).toHaveScreenshot('button-hover.png');\n\n    \u002F\u002F Disabled state\n    await button.evaluate(el => el.setAttribute('disabled', 'true'));\n    await expect(button).toHaveScreenshot('button-disabled.png');\n});\n```\n\n### Pattern 2: Parallel Testing with Sharding\n\n```typescript\n\u002F\u002F playwright.config.ts\nexport default defineConfig({\n    projects: [\n        {\n            name: 'shard-1',\n            use: { ...devices['Desktop Chrome'] },\n            grepInvert: \u002F@slow\u002F,\n            shard: { current: 1, total: 4 },\n        },\n        {\n            name: 'shard-2',\n            use: { ...devices['Desktop Chrome'] },\n            shard: { current: 2, total: 4 },\n        },\n        \u002F\u002F ... more shards\n    ],\n});\n\n\u002F\u002F Run in CI\n\u002F\u002F npx playwright test --shard=1\u002F4\n\u002F\u002F npx playwright test --shard=2\u002F4\n```\n\n### Pattern 3: Accessibility Testing\n\n```typescript\n\u002F\u002F Install: npm install @axe-core\u002Fplaywright\nimport { test, expect } from '@playwright\u002Ftest';\nimport AxeBuilder from '@axe-core\u002Fplaywright';\n\ntest('page should not have accessibility violations', async ({ page }) => {\n    await page.goto('\u002F');\n\n    const accessibilityScanResults = await new AxeBuilder({ page })\n        .exclude('#third-party-widget')\n        .analyze();\n\n    expect(accessibilityScanResults.violations).toEqual([]);\n});\n\ntest('form is accessible', async ({ page }) => {\n    await page.goto('\u002Fsignup');\n\n    const results = await new AxeBuilder({ page })\n        .include('form')\n        .analyze();\n\n    expect(results.violations).toEqual([]);\n});\n```\n\n## Best Practices\n\n1. **Use Data Attributes**: `data-testid` or `data-cy` for stable selectors\n2. **Avoid Brittle Selectors**: Don't rely on CSS classes or DOM structure\n3. **Test User Behavior**: Click, type, see - not implementation details\n4. **Keep Tests Independent**: Each test should run in isolation\n5. **Clean Up Test Data**: Create and destroy test data in each test\n6. **Use Page Objects**: Encapsulate page logic\n7. **Meaningful Assertions**: Check actual user-visible behavior\n8. **Optimize for Speed**: Mock when possible, parallel execution\n\n```typescript\n\u002F\u002F ❌ Bad selectors\ncy.get('.btn.btn-primary.submit-button').click();\ncy.get('div > form > div:nth-child(2) > input').type('text');\n\n\u002F\u002F ✅ Good selectors\ncy.getByRole('button', { name: 'Submit' }).click();\ncy.getByLabel('Email address').type('user@example.com');\ncy.get('[data-testid=\"email-input\"]').type('user@example.com');\n```\n\n## Common Pitfalls\n\n- **Flaky Tests**: Use proper waits, not fixed timeouts\n- **Slow Tests**: Mock external APIs, use parallel execution\n- **Over-Testing**: Don't test every edge case with E2E\n- **Coupled Tests**: Tests should not depend on each other\n- **Poor Selectors**: Avoid CSS classes and nth-child\n- **No Cleanup**: Clean up test data after each test\n- **Testing Implementation**: Test user behavior, not internals\n\n## Debugging Failing Tests\n\n```typescript\n\u002F\u002F Playwright debugging\n\u002F\u002F 1. Run in headed mode\nnpx playwright test --headed\n\n\u002F\u002F 2. Run in debug mode\nnpx playwright test --debug\n\n\u002F\u002F 3. Use trace viewer\nawait page.screenshot({ path: 'screenshot.png' });\nawait page.video()?.saveAs('video.webm');\n\n\u002F\u002F 4. Add test.step for better reporting\ntest('checkout flow', async ({ page }) => {\n    await test.step('Add item to cart', async () => {\n        await page.goto('\u002Fproducts');\n        await page.getByRole('button', { name: 'Add to Cart' }).click();\n    });\n\n    await test.step('Proceed to checkout', async () => {\n        await page.goto('\u002Fcart');\n        await page.getByRole('button', { name: 'Checkout' }).click();\n    });\n});\n\n\u002F\u002F 5. Inspect page state\nawait page.pause();  \u002F\u002F Pauses execution, opens inspector\n```\n\n## Resources\n\n- **references\u002Fplaywright-best-practices.md**: Playwright-specific patterns\n- **references\u002Fcypress-best-practices.md**: Cypress-specific patterns\n- **references\u002Fflaky-test-debugging.md**: Debugging unreliable tests\n- **assets\u002Fe2e-testing-checklist.md**: What to test with E2E\n- **assets\u002Fselector-strategies.md**: Finding reliable selectors\n- **scripts\u002Ftest-analyzer.ts**: Analyze test flakiness and duration\n","# E2E Testing Patterns\n\nBuild reliable, fast, and maintainable end-to-end test suites that provide confidence to ship code quickly and catch regressions before users do.\n\n## When to Use This Skill\n\n- Implementing end-to-end test automation\n- Debugging flaky or unreliable tests\n- Testing critical user workflows\n- Setting up CI\u002FCD test pipelines\n- Testing across multiple browsers\n- Validating accessibility requirements\n- Testing responsive designs\n- Establishing E2E testing standards\n\n## Core Concepts\n\n### 1. E2E Testing Fundamentals\n\n**What to Test with E2E:**\n- Critical user journeys (login, checkout, signup)\n- Complex interactions (drag-and-drop, multi-step forms)\n- Cross-browser compatibility\n- Real API integration\n- Authentication flows\n\n**What NOT to Test with E2E:**\n- Unit-level logic (use unit tests)\n- API contracts (use integration tests)\n- Edge cases (too slow)\n- Internal implementation details\n\n### 2. Test Philosophy\n\n**The Testing Pyramid:**\n```\n        \u002F\\\n       \u002FE2E\\         ← Few, focused on critical paths\n      \u002F─────\\\n     \u002FIntegr\\        ← More, test component interactions\n    \u002F────────\\\n   \u002FUnit Tests\\      ← Many, fast, isolated\n  \u002F────────────\\\n```\n\n**Best Practices:**\n- Test user behavior, not implementation\n- Keep tests independent\n- Make tests deterministic\n- Optimize for speed\n- Use data-testid, not CSS selectors\n\n## Playwright Patterns\n\n### Setup and Configuration\n\n```typescript\n\u002F\u002F playwright.config.ts\nimport { defineConfig, devices } from '@playwright\u002Ftest';\n\nexport default defineConfig({\n    testDir: '.\u002Fe2e',\n    timeout: 30000,\n    expect: {\n        timeout: 5000,\n    },\n    fullyParallel: true,\n    forbidOnly: !!process.env.CI,\n    retries: process.env.CI ? 2 : 0,\n    workers: process.env.CI ? 1 : undefined,\n    reporter: [\n        ['html'],\n        ['junit', { outputFile: 'results.xml' }],\n    ],\n    use: {\n        baseURL: 'http:\u002F\u002Flocalhost:3000',\n        trace: 'on-first-retry',\n        screenshot: 'only-on-failure',\n        video: 'retain-on-failure',\n    },\n    projects: [\n        { name: 'chromium', use: { ...devices['Desktop Chrome'] } },\n        { name: 'firefox', use: { ...devices['Desktop Firefox'] } },\n        { name: 'webkit', use: { ...devices['Desktop Safari'] } },\n        { name: 'mobile', use: { ...devices['iPhone 13'] } },\n    ],\n});\n```\n\n### Pattern 1: Page Object Model\n\n```typescript\n\u002F\u002F pages\u002FLoginPage.ts\nimport { Page, Locator } from '@playwright\u002Ftest';\n\nexport class LoginPage {\n    readonly page: Page;\n    readonly emailInput: Locator;\n    readonly passwordInput: Locator;\n    readonly loginButton: Locator;\n    readonly errorMessage: Locator;\n\n    constructor(page: Page) {\n        this.page = page;\n        this.emailInput = page.getByLabel('Email');\n        this.passwordInput = page.getByLabel('Password');\n        this.loginButton = page.getByRole('button', { name: 'Login' });\n        this.errorMessage = page.getByRole('alert');\n    }\n\n    async goto() {\n        await this.page.goto('\u002Flogin');\n    }\n\n    async login(email: string, password: string) {\n        await this.emailInput.fill(email);\n        await this.passwordInput.fill(password);\n        await this.loginButton.click();\n    }\n\n    async getErrorMessage(): Promise\u003Cstring> {\n        return await this.errorMessage.textContent() ?? '';\n    }\n}\n\n\u002F\u002F Test using Page Object\nimport { test, expect } from '@playwright\u002Ftest';\nimport { LoginPage } from '.\u002Fpages\u002FLoginPage';\n\ntest('successful login', async ({ page }) => {\n    const loginPage = new LoginPage(page);\n    await loginPage.goto();\n    await loginPage.login('user@example.com', 'password123');\n\n    await expect(page).toHaveURL('\u002Fdashboard');\n    await expect(page.getByRole('heading', { name: 'Dashboard' }))\n        .toBeVisible();\n});\n\ntest('failed login shows error', async ({ page }) => {\n    const loginPage = new LoginPage(page);\n    await loginPage.goto();\n    await loginPage.login('invalid@example.com', 'wrong');\n\n    const error = await loginPage.getErrorMessage();\n    expect(error).toContain('Invalid credentials');\n});\n```\n\n### Pattern 2: Fixtures for Test Data\n\n```typescript\n\u002F\u002F fixtures\u002Ftest-data.ts\nimport { test as base } from '@playwright\u002Ftest';\n\ntype TestData = {\n    testUser: {\n        email: string;\n        password: string;\n        name: string;\n    };\n    adminUser: {\n        email: string;\n        password: string;\n    };\n};\n\nexport const test = base.extend\u003CTestData>({\n    testUser: async ({}, use) => {\n        const user = {\n            email: `test-${Date.now()}@example.com`,\n            password: 'Test123!@#',\n            name: 'Test User',\n        };\n        \u002F\u002F Setup: Create user in database\n        await createTestUser(user);\n        await use(user);\n        \u002F\u002F Teardown: Clean up user\n        await deleteTestUser(user.email);\n    },\n\n    adminUser: async ({}, use) => {\n        await use({\n            email: 'admin@example.com',\n            password: process.env.ADMIN_PASSWORD!,\n        });\n    },\n});\n\n\u002F\u002F Usage in tests\nimport { test } from '.\u002Ffixtures\u002Ftest-data';\n\ntest('user can update profile', async ({ page, testUser }) => {\n    await page.goto('\u002Flogin');\n    await page.getByLabel('Email').fill(testUser.email);\n    await page.getByLabel('Password').fill(testUser.password);\n    await page.getByRole('button', { name: 'Login' }).click();\n\n    await page.goto('\u002Fprofile');\n    await page.getByLabel('Name').fill('Updated Name');\n    await page.getByRole('button', { name: 'Save' }).click();\n\n    await expect(page.getByText('Profile updated')).toBeVisible();\n});\n```\n\n### Pattern 3: Waiting Strategies\n\n```typescript\n\u002F\u002F ❌ Bad: Fixed timeouts\nawait page.waitForTimeout(3000);  \u002F\u002F Flaky!\n\n\u002F\u002F ✅ Good: Wait for specific conditions\nawait page.waitForLoadState('networkidle');\nawait page.waitForURL('\u002Fdashboard');\nawait page.waitForSelector('[data-testid=\"user-profile\"]');\n\n\u002F\u002F ✅ Better: Auto-waiting with assertions\nawait expect(page.getByText('Welcome')).toBeVisible();\nawait expect(page.getByRole('button', { name: 'Submit' }))\n    .toBeEnabled();\n\n\u002F\u002F Wait for API response\nconst responsePromise = page.waitForResponse(\n    response => response.url().includes('\u002Fapi\u002Fusers') && response.status() === 200\n);\nawait page.getByRole('button', { name: 'Load Users' }).click();\nconst response = await responsePromise;\nconst data = await response.json();\nexpect(data.users).toHaveLength(10);\n\n\u002F\u002F Wait for multiple conditions\nawait Promise.all([\n    page.waitForURL('\u002Fsuccess'),\n    page.waitForLoadState('networkidle'),\n    expect(page.getByText('Payment successful')).toBeVisible(),\n]);\n```\n\n### Pattern 4: Network Mocking and Interception\n\n```typescript\n\u002F\u002F Mock API responses\ntest('displays error when API fails', async ({ page }) => {\n    await page.route('**\u002Fapi\u002Fusers', route => {\n        route.fulfill({\n            status: 500,\n            contentType: 'application\u002Fjson',\n            body: JSON.stringify({ error: 'Internal Server Error' }),\n        });\n    });\n\n    await page.goto('\u002Fusers');\n    await expect(page.getByText('Failed to load users')).toBeVisible();\n});\n\n\u002F\u002F Intercept and modify requests\ntest('can modify API request', async ({ page }) => {\n    await page.route('**\u002Fapi\u002Fusers', async route => {\n        const request = route.request();\n        const postData = JSON.parse(request.postData() || '{}');\n\n        \u002F\u002F Modify request\n        postData.role = 'admin';\n\n        await route.continue({\n            postData: JSON.stringify(postData),\n        });\n    });\n\n    \u002F\u002F Test continues...\n});\n\n\u002F\u002F Mock third-party services\ntest('payment flow with mocked Stripe', async ({ page }) => {\n    await page.route('**\u002Fapi\u002Fstripe\u002F**', route => {\n        route.fulfill({\n            status: 200,\n            body: JSON.stringify({\n                id: 'mock_payment_id',\n                status: 'succeeded',\n            }),\n        });\n    });\n\n    \u002F\u002F Test payment flow with mocked response\n});\n```\n\n## Cypress Patterns\n\n### Setup and Configuration\n\n```typescript\n\u002F\u002F cypress.config.ts\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n    e2e: {\n        baseUrl: 'http:\u002F\u002Flocalhost:3000',\n        viewportWidth: 1280,\n        viewportHeight: 720,\n        video: false,\n        screenshotOnRunFailure: true,\n        defaultCommandTimeout: 10000,\n        requestTimeout: 10000,\n        setupNodeEvents(on, config) {\n            \u002F\u002F Implement node event listeners\n        },\n    },\n});\n```\n\n### Pattern 1: Custom Commands\n\n```typescript\n\u002F\u002F cypress\u002Fsupport\u002Fcommands.ts\ndeclare global {\n    namespace Cypress {\n        interface Chainable {\n            login(email: string, password: string): Chainable\u003Cvoid>;\n            createUser(userData: UserData): Chainable\u003CUser>;\n            dataCy(value: string): Chainable\u003CJQuery\u003CHTMLElement>>;\n        }\n    }\n}\n\nCypress.Commands.add('login', (email: string, password: string) => {\n    cy.visit('\u002Flogin');\n    cy.get('[data-testid=\"email\"]').type(email);\n    cy.get('[data-testid=\"password\"]').type(password);\n    cy.get('[data-testid=\"login-button\"]').click();\n    cy.url().should('include', '\u002Fdashboard');\n});\n\nCypress.Commands.add('createUser', (userData: UserData) => {\n    return cy.request('POST', '\u002Fapi\u002Fusers', userData)\n        .its('body');\n});\n\nCypress.Commands.add('dataCy', (value: string) => {\n    return cy.get(`[data-cy=\"${value}\"]`);\n});\n\n\u002F\u002F Usage\ncy.login('user@example.com', 'password');\ncy.dataCy('submit-button').click();\n```\n\n### Pattern 2: Cypress Intercept\n\n```typescript\n\u002F\u002F Mock API calls\ncy.intercept('GET', '\u002Fapi\u002Fusers', {\n    statusCode: 200,\n    body: [\n        { id: 1, name: 'John' },\n        { id: 2, name: 'Jane' },\n    ],\n}).as('getUsers');\n\ncy.visit('\u002Fusers');\ncy.wait('@getUsers');\ncy.get('[data-testid=\"user-list\"]').children().should('have.length', 2);\n\n\u002F\u002F Modify responses\ncy.intercept('GET', '\u002Fapi\u002Fusers', (req) => {\n    req.reply((res) => {\n        \u002F\u002F Modify response\n        res.body.users = res.body.users.slice(0, 5);\n        res.send();\n    });\n});\n\n\u002F\u002F Simulate slow network\ncy.intercept('GET', '\u002Fapi\u002Fdata', (req) => {\n    req.reply((res) => {\n        res.delay(3000);  \u002F\u002F 3 second delay\n        res.send();\n    });\n});\n```\n\n## Advanced Patterns\n\n### Pattern 1: Visual Regression Testing\n\n```typescript\n\u002F\u002F With Playwright\nimport { test, expect } from '@playwright\u002Ftest';\n\ntest('homepage looks correct', async ({ page }) => {\n    await page.goto('\u002F');\n    await expect(page).toHaveScreenshot('homepage.png', {\n        fullPage: true,\n        maxDiffPixels: 100,\n    });\n});\n\ntest('button in all states', async ({ page }) => {\n    await page.goto('\u002Fcomponents');\n\n    const button = page.getByRole('button', { name: 'Submit' });\n\n    \u002F\u002F Default state\n    await expect(button).toHaveScreenshot('button-default.png');\n\n    \u002F\u002F Hover state\n    await button.hover();\n    await expect(button).toHaveScreenshot('button-hover.png');\n\n    \u002F\u002F Disabled state\n    await button.evaluate(el => el.setAttribute('disabled', 'true'));\n    await expect(button).toHaveScreenshot('button-disabled.png');\n});\n```\n\n### Pattern 2: Parallel Testing with Sharding\n\n```typescript\n\u002F\u002F playwright.config.ts\nexport default defineConfig({\n    projects: [\n        {\n            name: 'shard-1',\n            use: { ...devices['Desktop Chrome'] },\n            grepInvert: \u002F@slow\u002F,\n            shard: { current: 1, total: 4 },\n        },\n        {\n            name: 'shard-2',\n            use: { ...devices['Desktop Chrome'] },\n            shard: { current: 2, total: 4 },\n        },\n        \u002F\u002F ... more shards\n    ],\n});\n\n\u002F\u002F Run in CI\n\u002F\u002F npx playwright test --shard=1\u002F4\n\u002F\u002F npx playwright test --shard=2\u002F4\n```\n\n### Pattern 3: Accessibility Testing\n\n```typescript\n\u002F\u002F Install: npm install @axe-core\u002Fplaywright\nimport { test, expect } from '@playwright\u002Ftest';\nimport AxeBuilder from '@axe-core\u002Fplaywright';\n\ntest('page should not have accessibility violations', async ({ page }) => {\n    await page.goto('\u002F');\n\n    const accessibilityScanResults = await new AxeBuilder({ page })\n        .exclude('#third-party-widget')\n        .analyze();\n\n    expect(accessibilityScanResults.violations).toEqual([]);\n});\n\ntest('form is accessible', async ({ page }) => {\n    await page.goto('\u002Fsignup');\n\n    const results = await new AxeBuilder({ page })\n        .include('form')\n        .analyze();\n\n    expect(results.violations).toEqual([]);\n});\n```\n\n## Best Practices\n\n1. **Use Data Attributes**: `data-testid` or `data-cy` for stable selectors\n2. **Avoid Brittle Selectors**: Don't rely on CSS classes or DOM structure\n3. **Test User Behavior**: Click, type, see - not implementation details\n4. **Keep Tests Independent**: Each test should run in isolation\n5. **Clean Up Test Data**: Create and destroy test data in each test\n6. **Use Page Objects**: Encapsulate page logic\n7. **Meaningful Assertions**: Check actual user-visible behavior\n8. **Optimize for Speed**: Mock when possible, parallel execution\n\n```typescript\n\u002F\u002F ❌ Bad selectors\ncy.get('.btn.btn-primary.submit-button').click();\ncy.get('div > form > div:nth-child(2) > input').type('text');\n\n\u002F\u002F ✅ Good selectors\ncy.getByRole('button', { name: 'Submit' }).click();\ncy.getByLabel('Email address').type('user@example.com');\ncy.get('[data-testid=\"email-input\"]').type('user@example.com');\n```\n\n## Common Pitfalls\n\n- **Flaky Tests**: Use proper waits, not fixed timeouts\n- **Slow Tests**: Mock external APIs, use parallel execution\n- **Over-Testing**: Don't test every edge case with E2E\n- **Coupled Tests**: Tests should not depend on each other\n- **Poor Selectors**: Avoid CSS classes and nth-child\n- **No Cleanup**: Clean up test data after each test\n- **Testing Implementation**: Test user behavior, not internals\n\n## Debugging Failing Tests\n\n```typescript\n\u002F\u002F Playwright debugging\n\u002F\u002F 1. Run in headed mode\nnpx playwright test --headed\n\n\u002F\u002F 2. Run in debug mode\nnpx playwright test --debug\n\n\u002F\u002F 3. Use trace viewer\nawait page.screenshot({ path: 'screenshot.png' });\nawait page.video()?.saveAs('video.webm');\n\n\u002F\u002F 4. Add test.step for better reporting\ntest('checkout flow', async ({ page }) => {\n    await test.step('Add item to cart', async () => {\n        await page.goto('\u002Fproducts');\n        await page.getByRole('button', { name: 'Add to Cart' }).click();\n    });\n\n    await test.step('Proceed to checkout', async () => {\n        await page.goto('\u002Fcart');\n        await page.getByRole('button', { name: 'Checkout' }).click();\n    });\n});\n\n\u002F\u002F 5. Inspect page state\nawait page.pause();  \u002F\u002F Pauses execution, opens inspector\n```\n\n## Resources\n\n- **references\u002Fplaywright-best-practices.md**: Playwright-specific patterns\n- **references\u002Fcypress-best-practices.md**: Cypress-specific patterns\n- **references\u002Fflaky-test-debugging.md**: Debugging unreliable tests\n- **assets\u002Fe2e-testing-checklist.md**: What to test with E2E\n- **assets\u002Fselector-strategies.md**: Finding reliable selectors\n- **scripts\u002Ftest-analyzer.ts**: Analyze test flakiness and duration\n",{"name":5,"description":7},"main","7850740bd837adb32f0a109ab2af82482196c6f2","skills\u002Fwshobson-agents\u002Fplugins\u002Fdeveloper-essentials\u002Fskills\u002Fe2e-testing-patterns",1,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills","https:\u002F\u002Fzturnsgo.com","https:\u002F\u002Fgithub.com\u002Fshengdabai","https:\u002F\u002Fzturnsgo.com\u002F","AI × education creator — producer, not consumer. Taught 6,000+ learners; shipping learning tools & daily essays with Claude Code, practicing @xiaolai's way 🥋","2026-11-01 21:28:23",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add shengdabai\u002FTony-Claude-Code-Skills --skill e2e-testing-patterns",{"tool":65,"command":66},"bunx","bunx skills add shengdabai\u002FTony-Claude-Code-Skills --skill e2e-testing-patterns",{"tool":68,"command":69},"pnpm","pnpm dlx skills add shengdabai\u002FTony-Claude-Code-Skills --skill e2e-testing-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fwshobson-agents\u002Fplugins\u002Fdeveloper-essentials\u002Fskills\u002Fe2e-testing-patterns\u002FSKILL.md",true,[],[74,91,125,151,173,193],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":83,"publishedAt":44},"01M70P17DAD4C1C47NPH6A96EM","xiaolai-methodology","以李笑来(Li Xiaolai)的思考方式、方法论与表达风格,为用户做全方位 1-on-1 教练指导,覆盖创业、赚钱、投资、学习、自学、读书写作、用 AI、以及人生心态与自我管理。当用户提到 \"李笑来\"、\"笑来\"、\"笑来老师\"、\"扮演李笑来\"、\"找笑来聊聊\"、\"笑来怎么看\"、\"xiaolai\"、\"把时间当作朋友\"、\"通往财富自由之路\"、\"定投改变命运\"、\"韭菜的自我修养\"、\"自学是门手艺\"、\"让时间陪你慢慢变富\"、\"七年就是一辈子\"、\"元认知\"、\"活在未来\"、\"复利\u002F长期主义\"、\"践行\"、\"痴迷改进\"、\"个人商业模式\u002F出售时间\"、\"睡后收入\"、\"定投\"、\"财富自由\"、\"操作系统升级\"、\"最少必要知识\"、\"北极星提示词\"、\"用 AI 该怎么学\u002F思考\" 等任一触发词,或当用户带着关于创业\u002F赚钱\u002F投资\u002F学习\u002F职业\u002F重大人生决策的困惑、希望被人用笑来式的「逻辑 + 大白话 + 类比 + 重新定义 + 践行导向」来点醒和指导时,自动进入李笑来教练模式。","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fxiaolai-methodology\u002FSKILL.md",[80],{"categoryNo":81,"categoryName":82,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",[84,85,86,87,88,89,90],"methodology","xiaolai","xiaolai methodology","朋友","投资","writing","收入",{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":105,"publishedAt":44},"01M70P13NB9YP7ACJR1S861CDS","zread","Produce and consume a wiki-style knowledge base for a code repository via the `zread` CLI and its on-disk output under `.\u002F.zread\u002Fwiki\u002F`. Use this skill whenever the user wants to understand, onboard onto, explore, summarize, map, or get an overview of an unfamiliar codebase; asks for architecture docs, a project wiki, a repo walkthrough, module\u002Fpackage explanations, or \"what does this repo do\"; wants to generate, regenerate, resume, browse, or serve code documentation locally; or mentions zread \u002F zread.ai directly. Also use it proactively before diving into a large unknown repo — if `.\u002F.zread\u002Fwiki\u002Fcurrent` exists, read the generated pages instead of crawling source file-by-file; if it doesn't, consider offering to run `zread generate`. The trigger is the intent (understand a codebase through generated docs), not the literal word \"zread\".","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fzread\u002FSKILL.md",[97,100],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[93,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124],"knowledge","wiki","explore","walkthrough","project","get","knowledge base","run","generate","intent","cli","map","documentation","project wiki","disk","architecture","code","unknown","generated",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":135,"publishedAt":44},"01M70P10S4SWMZQ8BJAFBFDRW3","youtube","Launch the YouTube Creator Agent to auto-generate videos.\nUse when: user types \u002Fyoutube, wants to create YouTube videos,\ngenerate video content, or upload to YouTube.\nKeywords: youtube, video, 视频, 创作视频, 发布视频","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[131,132],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":133,"categoryName":134,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000036","内容创作者",[127,136,137,138,139,140,141,142,114,143,144,145,39,146,147,148,149,150],"user","content","视频","creator","generate video","videos","launch","video content","create","upload","use","auto","types","Video","创作",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":155,"categories":156,"keywords":158,"publishedAt":44},"01M70P0YE95D8BACZCGV8BK90K","youtube-script-sync","Sync, update, or optimize Tony's GetNote knowledge base `Youtube视频逐字稿` by turning each parent recording or first-person idea note into an idempotent child note containing a directly recordable YouTube long-video or Shorts script. Use when the user says “更新\u002F同步\u002F优化 Youtube视频逐字稿知识库”, or says “更新\u002F同步\u002F优化该知识库” while this knowledge base is the active context.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-sync\u002FSKILL.md",[157],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},[159,160,127,161,162,149,163,164,165,166,167,168,169,170,112,171,39,146,106,172],"sync","script","youtube script sync","recording","shorts","first","base","person","update","active","child","optimize","idempotent","long",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":183,"publishedAt":44},"01M70P0WMV5XT0EEC0N445PW07","writing-skills","How to write SKILL.md files that trigger reliably and teach effectively. Use when creating, improving, or reviewing Claude Code skills.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-skills\u002FSKILL.md",[179,180,181,182],{"categoryNo":81,"categoryName":82,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},{"categoryNo":133,"categoryName":134,"taxonomyType":103,"taxonomyTypeDesc":104},[184,89,185,186,187,188,122,39,146,189,190,191,192],"writing skills","how","teach","write skill","write","claude code skills","files","how to","trigger",{"skillNo":194,"name":195,"nameZh":6,"description":196,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":201,"publishedAt":44},"01M70P0SJFR4YVJQBGMHKGSKXT","writing-rules","How to write .claude\u002Frules\u002F files that Claude actually follows. Use when creating, improving, or reviewing project rules.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-rules\u002FSKILL.md",[199,200],{"categoryNo":81,"categoryName":82,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":133,"categoryName":134,"taxonomyType":103,"taxonomyTypeDesc":104},[202,89,203,110,204,190,39,185,188,146,191],"Rules","writing rules","project rules"]