[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D7BF1JJ8AF535GSKCE8SMG":3,"skill-same:01M6D7BF1JJ8AF535GSKCE8SMG":107},{"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":26,"publishedAt":47,"linkOnly":48,"markdownContent":49,"markdownBody":50,"frontMatter":51,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":55,"repositoryHtmlUrl":56,"repositoryHomepageUrl":6,"ownerHtmlUrl":57,"ownerBlogUrl":58,"ownerDescription":59,"updatedAt":60,"install":61,"resources":74},"01M6D7BF1JJ8AF535GSKCE8SMG","senior-qa",null,"This skill should be used when the user asks to \"generate tests\", \"write unit tests\", \"analyze test coverage\", \"scaffold E2E tests\", \"set up Playwright\", \"configure Jest\", \"implement testing patterns\", or \"improve test quality\". Use for React\u002FNext.js testing with Jest, React Testing Library, and Playwright.","oabdelmaksoud\u002FSuperClaw","oabdelmaksoud","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F50699149?v=4","01M6D5CVVN778ZCDP1WHS816SP","Omar Abdelmaksoud","01M6D5CW1RHNSKCJR85GJACBFT",2,"MIT","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"qa","senior qa","improve","jest","next","react testing","up","test coverage","coverage","write","analyze","configure","testing","testing patterns","SET","library","testing library","generate","e2e tests","react","2026-11-10 10:12:30",false,"---\nname: senior-qa\ndescription: This skill should be used when the user asks to \"generate tests\", \"write unit tests\", \"analyze test coverage\", \"scaffold E2E tests\", \"set up Playwright\", \"configure Jest\", \"implement testing patterns\", or \"improve test quality\". Use for React\u002FNext.js testing with Jest, React Testing Library, and Playwright.\n---\n\n# Senior QA Engineer\n\nTest automation, coverage analysis, and quality assurance patterns for React and Next.js applications.\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Tools Overview](#tools-overview)\n  - [Test Suite Generator](#1-test-suite-generator)\n  - [Coverage Analyzer](#2-coverage-analyzer)\n  - [E2E Test Scaffolder](#3-e2e-test-scaffolder)\n- [QA Workflows](#qa-workflows)\n  - [Unit Test Generation Workflow](#unit-test-generation-workflow)\n  - [Coverage Analysis Workflow](#coverage-analysis-workflow)\n  - [E2E Test Setup Workflow](#e2e-test-setup-workflow)\n- [Reference Documentation](#reference-documentation)\n- [Common Patterns Quick Reference](#common-patterns-quick-reference)\n\n---\n\n## Quick Start\n\n```bash\n# Generate Jest test stubs for React components\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n\n# Analyze test coverage from Jest\u002FIstanbul reports\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json --threshold 80\n\n# Scaffold Playwright E2E tests for Next.js routes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n```\n\n---\n\n## Tools Overview\n\n### 1. Test Suite Generator\n\nScans React\u002FTypeScript components and generates Jest + React Testing Library test stubs with proper structure.\n\n**Input:** Source directory containing React components\n**Output:** Test files with describe blocks, render tests, interaction tests\n\n**Usage:**\n```bash\n# Basic usage - scan components and generate tests\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n\n# Output:\n# Scanning: src\u002Fcomponents\u002F\n# Found 24 React components\n#\n# Generated tests:\n#   __tests__\u002FButton.test.tsx (render, click handler, disabled state)\n#   __tests__\u002FModal.test.tsx (render, open\u002Fclose, keyboard events)\n#   __tests__\u002FForm.test.tsx (render, validation, submission)\n#   ...\n#\n# Summary: 24 test files, 87 test cases\n\n# Include accessibility tests\npython scripts\u002Ftest_suite_generator.py src\u002F --output __tests__\u002F --include-a11y\n\n# Generate with custom template\npython scripts\u002Ftest_suite_generator.py src\u002F --template custom-template.tsx\n```\n\n**Supported Patterns:**\n- Functional components with hooks\n- Components with Context providers\n- Components with data fetching\n- Form components with validation\n\n---\n\n### 2. Coverage Analyzer\n\nParses Jest\u002FIstanbul coverage reports and identifies gaps, uncovered branches, and provides actionable recommendations.\n\n**Input:** Coverage report (JSON or LCOV format)\n**Output:** Coverage analysis with recommendations\n\n**Usage:**\n```bash\n# Analyze coverage report\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n\n# Output:\n# === Coverage Analysis Report ===\n# Overall: 72.4% (target: 80%)\n#\n# BY TYPE:\n#   Statements: 74.2%\n#   Branches: 68.1%\n#   Functions: 71.8%\n#   Lines: 73.5%\n#\n# CRITICAL GAPS (uncovered business logic):\n#   src\u002Fservices\u002Fpayment.ts:45-67 - Payment processing\n#   src\u002Fhooks\u002FuseAuth.ts:23-41 - Authentication flow\n#\n# RECOMMENDATIONS:\n#   1. Add tests for payment service error handling\n#   2. Cover authentication edge cases\n#   3. Test form validation branches\n#\n# Files below threshold (80%):\n#   src\u002Fcomponents\u002FCheckout.tsx: 45%\n#   src\u002Fservices\u002Fapi.ts: 62%\n\n# Enforce threshold (exit 1 if below)\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --threshold 80 --strict\n\n# Generate HTML report\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --format html --output report.html\n```\n\n---\n\n### 3. E2E Test Scaffolder\n\nScans Next.js pages\u002Fapp directory and generates Playwright test files with common interactions.\n\n**Input:** Next.js pages or app directory\n**Output:** Playwright test files organized by route\n\n**Usage:**\n```bash\n# Scaffold E2E tests for Next.js App Router\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n\n# Output:\n# Scanning: src\u002Fapp\u002F\n# Found 12 routes\n#\n# Generated E2E tests:\n#   e2e\u002Fhome.spec.ts (navigation, hero section)\n#   e2e\u002Fauth\u002Flogin.spec.ts (form submission, validation)\n#   e2e\u002Fauth\u002Fregister.spec.ts (registration flow)\n#   e2e\u002Fdashboard.spec.ts (authenticated routes)\n#   e2e\u002Fproducts\u002F[id].spec.ts (dynamic routes)\n#   ...\n#\n# Generated: playwright.config.ts\n# Generated: e2e\u002Ffixtures\u002Fauth.ts\n\n# Include Page Object Model classes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F --include-pom\n\n# Generate for specific routes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --routes \"\u002Flogin,\u002Fdashboard,\u002Fcheckout\"\n```\n\n---\n\n## QA Workflows\n\n### Unit Test Generation Workflow\n\nUse when setting up tests for new or existing React components.\n\n**Step 1: Scan project for untested components**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --scan-only\n```\n\n**Step 2: Generate test stubs**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n```\n\n**Step 3: Review and customize generated tests**\n```typescript\n\u002F\u002F __tests__\u002FButton.test.tsx (generated)\nimport { render, screen, fireEvent } from '@testing-library\u002Freact';\nimport { Button } from '..\u002Fsrc\u002Fcomponents\u002FButton';\n\ndescribe('Button', () => {\n  it('renders with label', () => {\n    render(\u003CButton>Click me\u003C\u002FButton>);\n    expect(screen.getByRole('button', { name: \u002Fclick me\u002Fi })).toBeInTheDocument();\n  });\n\n  it('calls onClick when clicked', () => {\n    const handleClick = jest.fn();\n    render(\u003CButton onClick={handleClick}>Click\u003C\u002FButton>);\n    fireEvent.click(screen.getByRole('button'));\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  \u002F\u002F TODO: Add your specific test cases\n});\n```\n\n**Step 4: Run tests and check coverage**\n```bash\nnpm test -- --coverage\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n```\n\n---\n\n### Coverage Analysis Workflow\n\nUse when improving test coverage or preparing for release.\n\n**Step 1: Generate coverage report**\n```bash\nnpm test -- --coverage --coverageReporters=json\n```\n\n**Step 2: Analyze coverage gaps**\n```bash\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json --threshold 80\n```\n\n**Step 3: Identify critical paths**\n```bash\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --critical-paths\n```\n\n**Step 4: Generate missing test stubs**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002F --uncovered-only --output __tests__\u002F\n```\n\n**Step 5: Verify improvement**\n```bash\nnpm test -- --coverage\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --compare previous-coverage.json\n```\n\n---\n\n### E2E Test Setup Workflow\n\nUse when setting up Playwright for a Next.js project.\n\n**Step 1: Initialize Playwright (if not installed)**\n```bash\nnpm init playwright@latest\n```\n\n**Step 2: Scaffold E2E tests from routes**\n```bash\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n```\n\n**Step 3: Configure authentication fixtures**\n```typescript\n\u002F\u002F e2e\u002Ffixtures\u002Fauth.ts (generated)\nimport { test as base } from '@playwright\u002Ftest';\n\nexport const test = base.extend({\n  authenticatedPage: async ({ page }, use) => {\n    await page.goto('\u002Flogin');\n    await page.fill('[name=\"email\"]', 'test@example.com');\n    await page.fill('[name=\"password\"]', 'password');\n    await page.click('button[type=\"submit\"]');\n    await page.waitForURL('\u002Fdashboard');\n    await use(page);\n  },\n});\n```\n\n**Step 4: Run E2E tests**\n```bash\nnpx playwright test\nnpx playwright show-report\n```\n\n**Step 5: Add to CI pipeline**\n```yaml\n# .github\u002Fworkflows\u002Fe2e.yml\n- name: Run E2E tests\n  run: npx playwright test\n- name: Upload report\n  uses: actions\u002Fupload-artifact@v3\n  with:\n    name: playwright-report\n    path: playwright-report\u002F\n```\n\n---\n\n## Reference Documentation\n\n| File | Contains | Use When |\n|------|----------|----------|\n| `references\u002Ftesting_strategies.md` | Test pyramid, testing types, coverage targets, CI\u002FCD integration | Designing test strategy |\n| `references\u002Ftest_automation_patterns.md` | Page Object Model, mocking (MSW), fixtures, async patterns | Writing test code |\n| `references\u002Fqa_best_practices.md` | Testable code, flaky tests, debugging, quality metrics | Improving test quality |\n\n---\n\n## Common Patterns Quick Reference\n\n### React Testing Library Queries\n\n```typescript\n\u002F\u002F Preferred (accessible)\nscreen.getByRole('button', { name: \u002Fsubmit\u002Fi })\nscreen.getByLabelText(\u002Femail\u002Fi)\nscreen.getByPlaceholderText(\u002Fsearch\u002Fi)\n\n\u002F\u002F Fallback\nscreen.getByTestId('custom-element')\n```\n\n### Async Testing\n\n```typescript\n\u002F\u002F Wait for element\nawait screen.findByText(\u002Floaded\u002Fi);\n\n\u002F\u002F Wait for removal\nawait waitForElementToBeRemoved(() => screen.queryByText(\u002Floading\u002Fi));\n\n\u002F\u002F Wait for condition\nawait waitFor(() => {\n  expect(mockFn).toHaveBeenCalled();\n});\n```\n\n### Mocking with MSW\n\n```typescript\nimport { rest } from 'msw';\nimport { setupServer } from 'msw\u002Fnode';\n\nconst server = setupServer(\n  rest.get('\u002Fapi\u002Fusers', (req, res, ctx) => {\n    return res(ctx.json([{ id: 1, name: 'John' }]));\n  })\n);\n\nbeforeAll(() => server.listen());\nafterEach(() => server.resetHandlers());\nafterAll(() => server.close());\n```\n\n### Playwright Locators\n\n```typescript\n\u002F\u002F Preferred\npage.getByRole('button', { name: 'Submit' })\npage.getByLabel('Email')\npage.getByText('Welcome')\n\n\u002F\u002F Chaining\npage.getByRole('listitem').filter({ hasText: 'Product' })\n```\n\n### Coverage Thresholds (jest.config.js)\n\n```javascript\nmodule.exports = {\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n};\n```\n\n---\n\n## Common Commands\n\n```bash\n# Jest\nnpm test                           # Run all tests\nnpm test -- --watch                # Watch mode\nnpm test -- --coverage             # With coverage\nnpm test -- Button.test.tsx        # Single file\n\n# Playwright\nnpx playwright test                # Run all E2E tests\nnpx playwright test --ui           # UI mode\nnpx playwright test --debug        # Debug mode\nnpx playwright codegen             # Generate tests\n\n# Coverage\nnpm test -- --coverage --coverageReporters=lcov,json\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n```\n","# Senior QA Engineer\n\nTest automation, coverage analysis, and quality assurance patterns for React and Next.js applications.\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Tools Overview](#tools-overview)\n  - [Test Suite Generator](#1-test-suite-generator)\n  - [Coverage Analyzer](#2-coverage-analyzer)\n  - [E2E Test Scaffolder](#3-e2e-test-scaffolder)\n- [QA Workflows](#qa-workflows)\n  - [Unit Test Generation Workflow](#unit-test-generation-workflow)\n  - [Coverage Analysis Workflow](#coverage-analysis-workflow)\n  - [E2E Test Setup Workflow](#e2e-test-setup-workflow)\n- [Reference Documentation](#reference-documentation)\n- [Common Patterns Quick Reference](#common-patterns-quick-reference)\n\n---\n\n## Quick Start\n\n```bash\n# Generate Jest test stubs for React components\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n\n# Analyze test coverage from Jest\u002FIstanbul reports\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json --threshold 80\n\n# Scaffold Playwright E2E tests for Next.js routes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n```\n\n---\n\n## Tools Overview\n\n### 1. Test Suite Generator\n\nScans React\u002FTypeScript components and generates Jest + React Testing Library test stubs with proper structure.\n\n**Input:** Source directory containing React components\n**Output:** Test files with describe blocks, render tests, interaction tests\n\n**Usage:**\n```bash\n# Basic usage - scan components and generate tests\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n\n# Output:\n# Scanning: src\u002Fcomponents\u002F\n# Found 24 React components\n#\n# Generated tests:\n#   __tests__\u002FButton.test.tsx (render, click handler, disabled state)\n#   __tests__\u002FModal.test.tsx (render, open\u002Fclose, keyboard events)\n#   __tests__\u002FForm.test.tsx (render, validation, submission)\n#   ...\n#\n# Summary: 24 test files, 87 test cases\n\n# Include accessibility tests\npython scripts\u002Ftest_suite_generator.py src\u002F --output __tests__\u002F --include-a11y\n\n# Generate with custom template\npython scripts\u002Ftest_suite_generator.py src\u002F --template custom-template.tsx\n```\n\n**Supported Patterns:**\n- Functional components with hooks\n- Components with Context providers\n- Components with data fetching\n- Form components with validation\n\n---\n\n### 2. Coverage Analyzer\n\nParses Jest\u002FIstanbul coverage reports and identifies gaps, uncovered branches, and provides actionable recommendations.\n\n**Input:** Coverage report (JSON or LCOV format)\n**Output:** Coverage analysis with recommendations\n\n**Usage:**\n```bash\n# Analyze coverage report\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n\n# Output:\n# === Coverage Analysis Report ===\n# Overall: 72.4% (target: 80%)\n#\n# BY TYPE:\n#   Statements: 74.2%\n#   Branches: 68.1%\n#   Functions: 71.8%\n#   Lines: 73.5%\n#\n# CRITICAL GAPS (uncovered business logic):\n#   src\u002Fservices\u002Fpayment.ts:45-67 - Payment processing\n#   src\u002Fhooks\u002FuseAuth.ts:23-41 - Authentication flow\n#\n# RECOMMENDATIONS:\n#   1. Add tests for payment service error handling\n#   2. Cover authentication edge cases\n#   3. Test form validation branches\n#\n# Files below threshold (80%):\n#   src\u002Fcomponents\u002FCheckout.tsx: 45%\n#   src\u002Fservices\u002Fapi.ts: 62%\n\n# Enforce threshold (exit 1 if below)\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --threshold 80 --strict\n\n# Generate HTML report\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --format html --output report.html\n```\n\n---\n\n### 3. E2E Test Scaffolder\n\nScans Next.js pages\u002Fapp directory and generates Playwright test files with common interactions.\n\n**Input:** Next.js pages or app directory\n**Output:** Playwright test files organized by route\n\n**Usage:**\n```bash\n# Scaffold E2E tests for Next.js App Router\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n\n# Output:\n# Scanning: src\u002Fapp\u002F\n# Found 12 routes\n#\n# Generated E2E tests:\n#   e2e\u002Fhome.spec.ts (navigation, hero section)\n#   e2e\u002Fauth\u002Flogin.spec.ts (form submission, validation)\n#   e2e\u002Fauth\u002Fregister.spec.ts (registration flow)\n#   e2e\u002Fdashboard.spec.ts (authenticated routes)\n#   e2e\u002Fproducts\u002F[id].spec.ts (dynamic routes)\n#   ...\n#\n# Generated: playwright.config.ts\n# Generated: e2e\u002Ffixtures\u002Fauth.ts\n\n# Include Page Object Model classes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F --include-pom\n\n# Generate for specific routes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --routes \"\u002Flogin,\u002Fdashboard,\u002Fcheckout\"\n```\n\n---\n\n## QA Workflows\n\n### Unit Test Generation Workflow\n\nUse when setting up tests for new or existing React components.\n\n**Step 1: Scan project for untested components**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --scan-only\n```\n\n**Step 2: Generate test stubs**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n```\n\n**Step 3: Review and customize generated tests**\n```typescript\n\u002F\u002F __tests__\u002FButton.test.tsx (generated)\nimport { render, screen, fireEvent } from '@testing-library\u002Freact';\nimport { Button } from '..\u002Fsrc\u002Fcomponents\u002FButton';\n\ndescribe('Button', () => {\n  it('renders with label', () => {\n    render(\u003CButton>Click me\u003C\u002FButton>);\n    expect(screen.getByRole('button', { name: \u002Fclick me\u002Fi })).toBeInTheDocument();\n  });\n\n  it('calls onClick when clicked', () => {\n    const handleClick = jest.fn();\n    render(\u003CButton onClick={handleClick}>Click\u003C\u002FButton>);\n    fireEvent.click(screen.getByRole('button'));\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  \u002F\u002F TODO: Add your specific test cases\n});\n```\n\n**Step 4: Run tests and check coverage**\n```bash\nnpm test -- --coverage\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n```\n\n---\n\n### Coverage Analysis Workflow\n\nUse when improving test coverage or preparing for release.\n\n**Step 1: Generate coverage report**\n```bash\nnpm test -- --coverage --coverageReporters=json\n```\n\n**Step 2: Analyze coverage gaps**\n```bash\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json --threshold 80\n```\n\n**Step 3: Identify critical paths**\n```bash\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --critical-paths\n```\n\n**Step 4: Generate missing test stubs**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002F --uncovered-only --output __tests__\u002F\n```\n\n**Step 5: Verify improvement**\n```bash\nnpm test -- --coverage\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --compare previous-coverage.json\n```\n\n---\n\n### E2E Test Setup Workflow\n\nUse when setting up Playwright for a Next.js project.\n\n**Step 1: Initialize Playwright (if not installed)**\n```bash\nnpm init playwright@latest\n```\n\n**Step 2: Scaffold E2E tests from routes**\n```bash\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n```\n\n**Step 3: Configure authentication fixtures**\n```typescript\n\u002F\u002F e2e\u002Ffixtures\u002Fauth.ts (generated)\nimport { test as base } from '@playwright\u002Ftest';\n\nexport const test = base.extend({\n  authenticatedPage: async ({ page }, use) => {\n    await page.goto('\u002Flogin');\n    await page.fill('[name=\"email\"]', 'test@example.com');\n    await page.fill('[name=\"password\"]', 'password');\n    await page.click('button[type=\"submit\"]');\n    await page.waitForURL('\u002Fdashboard');\n    await use(page);\n  },\n});\n```\n\n**Step 4: Run E2E tests**\n```bash\nnpx playwright test\nnpx playwright show-report\n```\n\n**Step 5: Add to CI pipeline**\n```yaml\n# .github\u002Fworkflows\u002Fe2e.yml\n- name: Run E2E tests\n  run: npx playwright test\n- name: Upload report\n  uses: actions\u002Fupload-artifact@v3\n  with:\n    name: playwright-report\n    path: playwright-report\u002F\n```\n\n---\n\n## Reference Documentation\n\n| File | Contains | Use When |\n|------|----------|----------|\n| `references\u002Ftesting_strategies.md` | Test pyramid, testing types, coverage targets, CI\u002FCD integration | Designing test strategy |\n| `references\u002Ftest_automation_patterns.md` | Page Object Model, mocking (MSW), fixtures, async patterns | Writing test code |\n| `references\u002Fqa_best_practices.md` | Testable code, flaky tests, debugging, quality metrics | Improving test quality |\n\n---\n\n## Common Patterns Quick Reference\n\n### React Testing Library Queries\n\n```typescript\n\u002F\u002F Preferred (accessible)\nscreen.getByRole('button', { name: \u002Fsubmit\u002Fi })\nscreen.getByLabelText(\u002Femail\u002Fi)\nscreen.getByPlaceholderText(\u002Fsearch\u002Fi)\n\n\u002F\u002F Fallback\nscreen.getByTestId('custom-element')\n```\n\n### Async Testing\n\n```typescript\n\u002F\u002F Wait for element\nawait screen.findByText(\u002Floaded\u002Fi);\n\n\u002F\u002F Wait for removal\nawait waitForElementToBeRemoved(() => screen.queryByText(\u002Floading\u002Fi));\n\n\u002F\u002F Wait for condition\nawait waitFor(() => {\n  expect(mockFn).toHaveBeenCalled();\n});\n```\n\n### Mocking with MSW\n\n```typescript\nimport { rest } from 'msw';\nimport { setupServer } from 'msw\u002Fnode';\n\nconst server = setupServer(\n  rest.get('\u002Fapi\u002Fusers', (req, res, ctx) => {\n    return res(ctx.json([{ id: 1, name: 'John' }]));\n  })\n);\n\nbeforeAll(() => server.listen());\nafterEach(() => server.resetHandlers());\nafterAll(() => server.close());\n```\n\n### Playwright Locators\n\n```typescript\n\u002F\u002F Preferred\npage.getByRole('button', { name: 'Submit' })\npage.getByLabel('Email')\npage.getByText('Welcome')\n\n\u002F\u002F Chaining\npage.getByRole('listitem').filter({ hasText: 'Product' })\n```\n\n### Coverage Thresholds (jest.config.js)\n\n```javascript\nmodule.exports = {\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n};\n```\n\n---\n\n## Common Commands\n\n```bash\n# Jest\nnpm test                           # Run all tests\nnpm test -- --watch                # Watch mode\nnpm test -- --coverage             # With coverage\nnpm test -- Button.test.tsx        # Single file\n\n# Playwright\nnpx playwright test                # Run all E2E tests\nnpx playwright test --ui           # UI mode\nnpx playwright test --debug        # Debug mode\nnpx playwright codegen             # Generate tests\n\n# Coverage\nnpm test -- --coverage --coverageReporters=lcov,json\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n```\n",{"name":5,"description":7},"main","7b610356e36623652299fa2acb477ff821b1d920","upstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa",0,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fo-abdelmaksoud\u002F","Full-Stack Engineer | AI Systems Architect | Building autonomous multi-agent systems","2026-03-08 21:12:53",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add oabdelmaksoud\u002FSuperClaw --skill senior-qa",{"tool":67,"command":68},"bunx","bunx skills add oabdelmaksoud\u002FSuperClaw --skill senior-qa",{"tool":70,"command":71},"pnpm","pnpm dlx skills add oabdelmaksoud\u002FSuperClaw --skill senior-qa","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002FSKILL.md",true,[75,81,85,89,93,99,103],{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"README.md","REFERENCE","参考文档",5705,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002FREADME.md",{"path":82,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Fqa_best_practices.md",23792,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002Freferences\u002Fqa_best_practices.md",{"path":86,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Ftest_automation_patterns.md",24981,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002Freferences\u002Ftest_automation_patterns.md",{"path":90,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Ftesting_strategies.md",17198,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002Freferences\u002Ftesting_strategies.md",{"path":94,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":97,"sourceHtmlUrl":98},"scripts\u002Fcoverage_analyzer.py","SCRIPT","脚本",29915,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002Fscripts\u002Fcoverage_analyzer.py",{"path":100,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":101,"sourceHtmlUrl":102},"scripts\u002Fe2e_test_scaffolder.py",26469,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002Fscripts\u002Fe2e_test_scaffolder.py",{"path":104,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":105,"sourceHtmlUrl":106},"scripts\u002Ftest_suite_generator.py",19896,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fclaude-skills\u002Fengineering-team\u002Fsenior-qa\u002Fscripts\u002Ftest_suite_generator.py",[108,127,141,168,194,212],{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":117,"publishedAt":47},"01M6D88QCPTBZVCRED0NZ1Y8K8","visa-doc-translate","Translate visa application documents (images) to English and create a bilingual PDF with original and translation","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fvisa-doc-translate\u002FSKILL.md",[114],{"categoryNo":115,"categoryName":116,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理",[118,119,120,121,122,123,124,125,126],"translate","doc","visa doc translate","translation","application","create","images","PDF","documents",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":133,"publishedAt":47},"01M6D88NBM95T3TFM50CYYAP65","verification-loop","A comprehensive verification system for Claude Code sessions.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fverification-loop\u002FSKILL.md",[],[134,135,136,137,138,139,140],"verification","loop","verification loop","sessions","code","claude code sessions","system",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":156,"publishedAt":47},"01M6D88JFZ2P996GVRHJNSZSTM","tdd-workflow","Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ftdd-workflow\u002FSKILL.md",[147,148,151],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":149,"categoryName":150,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":152,"categoryName":153,"taxonomyType":154,"taxonomyTypeDesc":155},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[157,158,159,45,160,161,138,162,163,164,165,35,166,167],"tdd","workflow","tdd workflow","e2e","integration","development","use","test","refactoring","tests","writing",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":174,"publishedAt":47},"01M6D88FTHRRSVJMXF2G7MQAK3","swiftui-patterns","SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS\u002FmacOS UI best practices.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswiftui-patterns\u002FSKILL.md",[],[175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193],"patterns","swiftui","swiftui patterns","architecture","macos","performance","state management","best practices","state","ui","Optimization","ios","architecture patterns","Composition","performance optimization","view","management","swiftui architecture","navigation",{"skillNo":195,"name":196,"nameZh":6,"description":197,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":198,"categories":199,"keywords":201,"publishedAt":47},"01M6D88D527QTQT9DKHTRFN6EA","swift-protocol-di-testing","Protocol-based dependency injection for testable Swift code — mock file system, network, and external APIs using focused protocols and Swift Testing.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-protocol-di-testing\u002FSKILL.md",[200],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[202,203,204,39,138,205,206,207,208,140,209,210,211],"swift protocol di testing","protocol","swift","protocols","file","network","injection","dependency","swift testing","dependency injection",{"skillNo":213,"name":214,"nameZh":6,"description":215,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":216,"categories":217,"keywords":218,"publishedAt":47},"01M6D88AJW8H2QNWSW5ZY82R43","swift-concurrency-6-2","Swift 6.2 Approachable Concurrency — single-threaded by default, @concurrent for explicit background offloading, isolated conformances for main actor types.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-concurrency-6-2\u002FSKILL.md",[],[219,220,204,221,222,52],"concurrency","swift concurrency","swift concurrency 6 2","default"]