{"id":"2aa168da-9a2d-4c83-a07c-290f090e5254","entityType":"agent","slug":"clawhub-bovinphang-fec-e2e-testing","name":"E2E Testing","canonicalUrl":"https://www.xpersona.co/agent/clawhub-bovinphang-fec-e2e-testing","canonicalPath":"/agent/clawhub-bovinphang-fec-e2e-testing","generatedAt":"2026-10-10T21:43:21.979Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T16:53:42.032Z","emptyReason":null},"description":"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning Skill: E2E Testing Owner: bovinphang Summary: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-26T14:59:46.492Z | u","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.3K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-e2e-testing","sourceUrl":"https://clawhub.ai/bovinphang/fec-e2e-testing","homepage":"https://clawhub.ai/bovinphang/skills/fec-e2e-testing","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/bovinphang/fec-e2e-testing","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/bovinphang/skills/fec-e2e-testing","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":62,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, tr"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T16:53:42.032Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T16:53:42.032Z","emptyReason":null},"stars":null,"forks":null,"downloads":1330,"packageName":null,"latestVersion":"2.9.0","tractionLabel":"1.3K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T16:53:41.949Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T16:53:42.032Z","lastCrawledAt":"2026-10-10T16:53:41.949Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T16:53:41.949Z","lastVerifiedAt":null,"highlights":[{"version":"2.9.0","createdAt":"2026-09-26T14:59:46.492Z","changelog":"- Added a LICENSE file to the repository. - Removed the skill-card.md file. - SKILL.md fully translated from Chinese to English for broader accessibility. - Minor description update: “end-to-end testing” added to relevant triggers.","fileCount":11,"zipByteSize":10759},{"version":"2.7.0","createdAt":"2026-06-11T02:10:37.163Z","changelog":"- Split advanced references into focused documents: added e2e-ci-reporting.md, e2e-special-scenarios.md, and e2e-visual-regression.md - Removed the consolidated e2e-advanced.md and outdated skill-card.md - Updated reference links in SKILL.md to point to the new, more granular documents - Scope and instructions unchanged; organization and clarity of documentation improved","fileCount":10,"zipByteSize":10801},{"version":"2.6.0","createdAt":"2026-06-07T14:32:56.950Z","changelog":"- Added a LICENSE file for clearer licensing. - Removed the skill-card.md file. - Minor update to wording: reference section in SKILL.md now uses more concise Chinese phrasing (e.g., \"详细参考\" instead of \"Detailed References\"). - No changes to core skill procedures or constraints.","fileCount":8,"zipByteSize":10001},{"version":"2.5.0","createdAt":"2026-06-03T12:31:42.988Z","changelog":"- Updated skill name to \"fec-e2e-testing\" and clarified triggers and usage scenarios in the description. - Major rewrite of E2E testing guidelines for clarity and focus on real-browser user journey validation. - Added specific procedures for test planning, Page Object usage, artifact handling, debugging, and data management. - Provided direction to new reference files for advanced usage and directory patterns. - Strengthened constraints around flakiness, data isolation, artifact retention, and proper test responsibility boundaries. - Newly added supporting documentation: LICENSE, README.md, metadata.json, package.json, and two advanced reference markdowns; removed skill-card.md.","fileCount":8,"zipByteSize":10053}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-e2e-testing","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T21:43:21.978Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-e2e-testing/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T16:53:42.032Z","emptyReason":null},"readme":"Skill: E2E Testing\n\nOwner: bovinphang\n\nSummary: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning\n\nTags: latest:2.9.0\n\nVersion history:\n\nv2.9.0 | 2026-09-26T14:59:46.492Z | user\n\n- Added a LICENSE file to the repository.\n- Removed the skill-card.md file.\n- SKILL.md fully translated from Chinese to English for broader accessibility.\n- Minor description update: “end-to-end testing” added to relevant triggers.\n\nv2.7.0 | 2026-06-11T02:10:37.163Z | user\n\n- Split advanced references into focused documents: added e2e-ci-reporting.md, e2e-special-scenarios.md, and e2e-visual-regression.md\n- Removed the consolidated e2e-advanced.md and outdated skill-card.md\n- Updated reference links in SKILL.md to point to the new, more granular documents\n- Scope and instructions unchanged; organization and clarity of documentation improved\n\nv2.6.0 | 2026-06-07T14:32:56.950Z | user\n\n- Added a LICENSE file for clearer licensing.\n- Removed the skill-card.md file.\n- Minor update to wording: reference section in SKILL.md now uses more concise Chinese phrasing (e.g., \"详细参考\" instead of \"Detailed References\").\n- No changes to core skill procedures or constraints.\n\nv2.5.0 | 2026-06-03T12:31:42.988Z | user\n\n- Updated skill name to \"fec-e2e-testing\" and clarified triggers and usage scenarios in the description.\n- Major rewrite of E2E testing guidelines for clarity and focus on real-browser user journey validation.\n- Added specific procedures for test planning, Page Object usage, artifact handling, debugging, and data management.\n- Provided direction to new reference files for advanced usage and directory patterns.\n- Strengthened constraints around flakiness, data isolation, artifact retention, and proper test responsibility boundaries.\n- Newly added supporting documentation: LICENSE, README.md, metadata.json, package.json, and two advanced reference markdowns; removed skill-card.md.\n\nArchive index:\n\nArchive v2.9.0: 11 files, 10759 bytes\n\nFiles: LICENSE (1089b), metadata.json (2029b), package.json (1220b), README.md (1409b), references/e2e-ci-reporting.md (1470b), references/e2e-special-scenarios.md (1869b), references/e2e-visual-regression.md (2208b), references/playwright-patterns.md (2301b), skill-card.md (2013b), SKILL.md (3522b), _meta.json (134b)\n\nFile v2.9.0:SKILL.md\n\n---\nname: fec-e2e-testing\ndescription: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, end-to-end testing, Playwright, Cypress.\n---\n\n# E2E Test Specification\n\n## Purpose\n\nValidate key user journeys with real browsers and uncover integration risks not covered by unit tests.\n\n## Procedure\n\n1. Clarify the key journeys: cross-page processes such as login, purchase, creation, search, permissions, payment, etc. are given priority; if you only choose the test level, do the test hierarchical planning first.\n2. New projects will be given priority by Playwright; existing Cypress projects will continue to use Cypress and will not be migrated for the sake of migration.\n3. Use Page Object or fixtures to encapsulate login, page locator and shared data, and avoid naked selectors in the spec.\n4. Assert that the user can see the results, relying on Locator automatic waiting, network response or visible status, without using fixed sleep.\n5. CI must upload HTML report, screenshots, trace or video; Flaky use cases must be isolated, reproduced, marked with sources and associated with issues.\n6. When debugging fails, read the trace, console, network and screenshots first, and then change the test; do not misjudge real product defects as flaky.\n7. Record the test environment, seed data and cleanup strategies for key browser capabilities, payment, permissions, uploads and real-time communication processes.\n8. Test data must be repeatable: API seeds, database fixtures, test accounts or mock services are preferred; random data must have a unique prefix and be cleaned in teardown.\n\n## Detailed reference\n\n- Load [references/playwright-patterns.md](references/playwright-patterns.md) when you need directory structure, Page Object, spec organization, configuration, flaky debugging and production examples.\n- Load [references/e2e-ci-reporting.md](references/e2e-ci-reporting.md) when you need CI examples and Markdown report templates.\n- Load [references/e2e-special-scenarios.md](references/e2e-special-scenarios.md) when Web3/wallet flows or high-risk financial flows are required.\n- When cross-page screenshots or visual regression configuration are required, load [references/e2e-visual-regression.md](references/e2e-visual-regression.md).\n\n## Constraints\n\n- Disable reliance on `sleep` / fixed `setTimeout` as primary synchronization means.\n- Do not run real E2E in production environment.\n- Avoid asserting component internal pixel-level styles in E2E; cross-page screenshots/visual regressions only cover key page states in the user journey.\n- Failure must be able to be located by taking screenshots, traces or videos.\n- Component internal contract testing is offloaded to component testing workflow.\n- Do not bring unstable waits, random data, or dependent test order into CI.\n- Do not treat the number of retries as flaky management; retries can only retain evidence, and the root cause still needs to be located.\n\n## Expected Output\n\nKey user journeys have stable E2E coverage, failed products can locate problems, and reports and traces in CI can be downloaded; flaky use cases include recurrence commands, isolation strategies, and follow-up issues.\n\nFile v2.9.0:README.md\n\n# E2E Test Specification\n\nCreate and maintain real-browser journeys, selectors, traces, and CI artifacts with Playwright or Cypress.\n\n## Skill\n\n- ID: `fec-e2e-testing`\n- Category: `testing`\n- Version: `2.9.0`\n- Source: `skills/fec-e2e-testing/SKILL.md`\n\n## Description\n\nUse when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, end-to-end testing, Playwright, Cypress.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [references/e2e-ci-reporting.md](references/e2e-ci-reporting.md)\n- [references/e2e-special-scenarios.md](references/e2e-special-scenarios.md)\n- [references/e2e-visual-regression.md](references/e2e-visual-regression.md)\n- [references/playwright-patterns.md](references/playwright-patterns.md)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-testing-strategy`\n- `@bovinphang/fec-component-testing`\n- `@bovinphang/fec-storybook-component-doc`\n- `@bovinphang/fec-validation-fix`\n\n## License\n\nMIT\n\nFile v2.9.0:_meta.json\n\n{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-e2e-testing\",\n  \"version\": \"2.9.0\",\n  \"publishedAt\": 1790434786492\n}\n\nFile v2.9.0:references/e2e-ci-reporting.md\n\n#E2E CI & Reporting\n\n## CI integration (example)\n\n```yaml\n# .github/workflows/e2e.yml\nname: E2E Tests\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 20\n      - run: npm ci\n      - run: npx playwright install --with-deps\n      - run: npx playwright test\n        env:\n          CI: true\n          BASE_URL: ${{ vars.STAGING_URL }}\n      - uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: playwright-report\n          path: playwright-report/\n          retention-days: 30\n```\n\nCypress: Fixed `CYPRESS_baseUrl` or `baseUrl` in the configuration file. Failure screenshots/videos are also recommended to upload artifacts.\n\n## E2E report template (Markdown)\n\nThe following structure can be used when outputting or archiving test reports to facilitate review:\n\n```markdown\n# E2E test report\n\n**Date:** YYYY-MM-DD HH:mm\n**Time taken:** X minutes Y seconds\n**Result:** Pass/Fail\n\n## Summary\n\n- Total X | Pass Y | Fail Z | Unstable/Skip Description\n\n## Failed use case\n\n### Use case name\n\n- **File:** `tests/e2e/xxx.spec.ts:line number`\n- **ERROR:** Brief assertion or timeout information\n- **Screenshot/Trace:** path or artifact name\n- **Suggested fix:** Executable conclusion\n\n## Product\n\n- HTML report: `playwright-report/index.html`\n- Trace / Video / Screenshot: CI artifact or local `test-results/`\n```\n\nFile v2.9.0:references/e2e-special-scenarios.md\n\n#E2E Special Scenario\n\n## Web3/Wallet Injection (Playwright)\n\nInject mock through `context.addInitScript` before **`page.goto` to avoid relying on real plugins:\n\n```typescript\ntest(\"Connect wallet\", async ({ page, context }) => {\n  await context.addInitScript(() => {\n    (window as unknown as { ethereum?: unknown }).ethereum = {\n      isMetaMask: true,\n      request: async ({ method }: { method: string }) => {\n        if (method === \"eth_requestAccounts\")\n          return [\"0x1234567890123456789012345678901234567890\"];\n        if (method === \"eth_chainId\") return \"0x1\";\n        return null;\n      },\n    };\n  });\n\n  await page.goto(\"/\");\n  await page.getByTestId(\"connect-wallet\").click();\n  await expect(page.getByTestId(\"wallet-address\")).toContainText(\"0x1234\");\n});\n```\n\nJust keep the chain ID, account list and business contract consistent.\n\n## Financial or high-risk operations\n\n- **It is prohibited** to perform real fund operations in a real production environment; use **staging, mock or `test.skip`**.\n- Assert **preview amount**, success status** and **key interface 200** before ending the use case, with sufficient timeout (such as on-chain confirmation scenario).\n\n```typescript\ntest(\"Order preview and success status\", async ({ page }) => {\n  test.skip(process.env.NODE_ENV === \"production\", \"The production environment skips real transactions\");\n\n  await page.goto(\"/markets/demo\");\n  await page.getByTestId(\"position-yes\").click();\n  await page.getByTestId(\"trade-amount\").fill(\"1.0\");\n\n  const preview = page.getByTestId(\"trade-preview\");\n  await expect(preview).toContainText(\"1.0\");\n\n  await page.getByTestId(\"confirm-trade\").click();\n  await page.waitForResponse(\n    (resp) => resp.url().includes(\"/api/trade\") && resp.status() === 200,\n    { timeout: 30_000 },\n  );\n  await expect(page.getByTestId(\"trade-success\")).toBeVisible();\n});\n```\n\nFile v2.9.0:references/e2e-visual-regression.md\n\n#E2E visual regression testing\n\nDetect unexpected UI changes through screenshot comparison. Suitable for CSS refactoring, design token update, component revision and other scenarios.\n\n## Basic usage\n\n```typescript\nimport { test, expect } from \"@playwright/test\";\n\ntest(\"Homepage layout is consistent with baseline\", async ({ page }) => {\n  await page.goto(\"/\");\n  await page.waitForLoadState(\"networkidle\");\n\n  // Compare full-page screenshots - automatically generate a baseline for the first run\n  await expect(page).toHaveScreenshot(\"homepage-full.png\", {\n    fullPage: true,\n    maxDiffPixels: 100, // Slight pixel differences allowed (anti-aliasing, etc.)\n  });\n});\n\ntest(\"Button components are visually consistent\", async ({ page }) => {\n  await page.goto(\"/components/buttons\");\n  const submitButton = page.getByTestId(\"submit-button\");\n  await expect(submitButton).toHaveScreenshot(\"submit-button.png\");\n});\n```\n\n## Block dynamic content\n\nDynamic elements such as time, random IDs, and third-party ads can cause false positives. Use `mask` to block them:\n\n```typescript\nawait expect(page).toHaveScreenshot(\"dashboard.png\", {\n  mask: [\n    page.locator(\".live-clock\"),\n    page.locator(\".random-id\"),\n    page.locator(\".ad-banner\"),\n  ],\n});\n```\n\n## Disable animation\n\nCSS animation will cause inconsistent screenshots. Inject the style to disable animation before taking screenshots:\n\n```typescript\nawait page.addStyleTag({\n  content:\n    \"*, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }\",\n});\nawait expect(page).toHaveScreenshot(\"animated-page.png\");\n```\n\n## Baseline management\n\n- **First run**: `npx playwright test` fails but automatically generates baseline into `tests/` directory\n- **Update baseline**: `npx playwright test --update-snapshots` when the UI is intentionally changed\n- **CI consistency**: Baseline must be generated on the same OS (Linux/Ubuntu) as CI, font rendering differs between macOS and Linux\n- **Multi-browser**: Each project generates a baseline independently (Chromium/Firefox/WebKit rendering results are different)\n- **Baseline file**: Incorporate into `.gitignore` or Git LFS management to avoid warehouse expansion\n\nFile v2.9.0:references/playwright-patterns.md\n\n# Playwright / Cypress E2E Mode\n\n## Directory structure\n\n```text\ntests/\n├── e2e/\n│   ├── auth/login.spec.ts\n│   └── features/search.spec.ts\n├── fixtures/\n│   └── auth.ts\n└── pages/\n    ├── LoginPage.ts\n    └── ItemsPage.ts\nplaywright.config.ts\n```\n\n## Page Object\n\n```ts\nimport { type Locator, type Page } from \"@playwright/test\";\n\nexport class ItemsPage {\n  readonly searchInput: Locator;\n  readonly itemCards: Locator;\n\n  constructor(private readonly page: Page) {\n    this.searchInput = page.getByTestId(\"search-input\");\n    this.itemCards = page.getByTestId(\"item-card\");\n  }\n\n  async goto() {\n    await this.page.goto(\"/items\");\n  }\n\n  async search(keyword: string) {\n    await this.searchInput.fill(keyword);\n    await this.page.waitForResponse((response) => response.url().includes(\"/api/search\"));\n  }\n}\n```\n\n## Spec\n\n```ts\nimport { expect, test } from \"@playwright/test\";\nimport { ItemsPage } from \"../pages/ItemsPage\";\n\ntest.describe(\"Product Search\", () => {\n  test(\"Search by keyword and there are results\", async ({ page }) => {\n    const itemsPage = new ItemsPage(page);\n    await itemsPage.goto();\n    await itemsPage.search(\"test\");\n    await expect(itemsPage.itemCards.first()).toContainText(/test/i);\n  });\n});\n```\n\n## Config\n\n```ts\nimport { defineConfig, devices } from \"@playwright/test\";\n\nexport default defineConfig({\n  testDir: \"./tests/e2e\",\n  forbidOnly: !!process.env.CI,\n  retries: process.env.CI ? 2 : 0,\n  reporter: [[\"html\"], [\"junit\", { outputFile: \"playwright-results.xml\" }]],\n  use: {\n    baseURL: process.env.BASE_URL || \"http://localhost: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: \"webkit\", use: { ...devices[\"Desktop Safari\"] } },\n  ],\n  webServer: {\n    command: \"npm run dev\",\n    url: \"http://localhost:3000\",\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n## Flaky Debugging\n\n```bash\nnpx playwright test path/to/spec.ts --repeat-each=10\nnpx playwright test path/to/spec.ts --retries=3\nnpx playwright show-trace path/to/trace.zip\n```\n\nCommon reasons: race conditions, network timing, animation, test data pollution, cross-test state leakage.\n\nFile v2.9.0:skill-card.md\n\n## Description:\n\nHelps developers create, maintain, and debug real-browser end-to-end tests with Playwright or Cypress, including CI reporting and visual regression.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[bovinphang](https://clawhub.ai/user/bovinphang)\n\n### License/Terms of Use:\n\nMIT\n\n## Use Case:\n\nDevelopers and test engineers use this skill to build and debug repeatable browser tests for critical user journeys and collect actionable CI failure evidence.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Test traces, reports, screenshots, videos, or visual baselines may expose sensitive data.\n\nMitigation: Run against staging or sanitized test data and review artifacts before sharing or committing them.\n\nRisk: Tests covering payments or financial flows could execute real transactions.\n\nMitigation: Use staging or mocks and do not run real financial transactions in production.\n\n## Reference(s):\n\n- [Playwright and Cypress patterns](references/playwright-patterns.md)\n- [E2E CI and reporting](references/e2e-ci-reporting.md)\n- [Special E2E scenarios](references/e2e-special-scenarios.md)\n- [Visual regression](references/e2e-visual-regression.md)\n- [Project homepage (listed in package metadata)](https://github.com/bovinphang/frontend-craft)\n\n## Skill Output:\n\n**Output Type(s):** [Code, Configuration instructions, Shell commands, Markdown, Guidance]\n\n**Output Format:** [Markdown with code and configuration examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include test reports and instructions for reviewing CI traces, screenshots, and videos.]\n\n## Skill Version(s):\n\n2.9.0 (source: release evidence, package.json, metadata.json)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v2.9.0:metadata.json\n\n{\n  \"id\": \"fec-e2e-testing\",\n  \"name\": \"E2E Test Specification\",\n  \"category\": \"testing\",\n  \"tags\": [\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"summary\": \"Create and maintain real-browser journeys, selectors, traces, and CI artifacts with Playwright or Cypress.\",\n  \"version\": \"2.9.0\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"repository\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"testing\",\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"platforms\": [\n    \"skills-cli\",\n    \"skillreg\",\n    \"claude-code\",\n    \"codex\",\n    \"cursor\",\n    \"opencode\",\n    \"openclaw\",\n    \"generic-skill-runtime\"\n  ],\n  \"description\": \"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, end-to-end testing, Playwright, Cypress.\",\n  \"source\": \"skills/fec-e2e-testing\",\n  \"references\": [\n    \"references/e2e-ci-reporting.md\",\n    \"references/e2e-special-scenarios.md\",\n    \"references/e2e-visual-regression.md\",\n    \"references/playwright-patterns.md\"\n  ],\n  \"relations\": {\n    \"relatedSkills\": [\n      \"fec-testing-strategy\",\n      \"fec-component-testing\",\n      \"fec-storybook-component-doc\",\n      \"fec-validation-fix\"\n    ],\n    \"boundaryWorkflows\": [\n      \"Use a testing strategy workflow before deciding the coverage layer.\",\n      \"Use a component testing workflow for unit, component, and light integration tests close to UI code.\",\n      \"Use a validation workflow when existing project checks are failing.\"\n    ],\n    \"capabilityTags\": [\n      \"testing\",\n      \"e2e\",\n      \"browser-automation\"\n    ]\n  }\n}\n\nFile v2.9.0:package.json\n\n{\n  \"name\": \"@bovinphang/fec-e2e-testing\",\n  \"version\": \"2.9.0\",\n  \"description\": \"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, end-to-end testing, Playwright, Cypress.\",\n  \"type\": \"module\",\n  \"license\": \"MIT\",\n  \"author\": {\n    \"name\": \"Bovin Phang\",\n    \"email\": \"pengbaowen@msn.com\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/bovinphang/frontend-craft\",\n    \"directory\": \"skills/fec-e2e-testing\"\n  },\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"agent-skill\",\n    \"frontend-craft\",\n    \"testing\",\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"files\": [\n    \"SKILL.md\",\n    \"references\",\n    \"scripts\",\n    \"data\",\n    \"assets\",\n    \"metadata.json\",\n    \"README.md\",\n    \"LICENSE\"\n  ],\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n\nFile v2.9.0:LICENSE\n\nMIT License\r\n\r\nCopyright (c) 2025 Bovin Phang\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy\r\nof this software and associated documentation files (the \"Software\"), to deal\r\nin the Software without restriction, including without limitation the rights\r\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\r\ncopies of the Software, and to permit persons to whom the Software is\r\nfurnished to do so, subject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in all\r\ncopies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\r\nSOFTWARE.\n\nArchive v2.7.0: 10 files, 10801 bytes\n\nFiles: metadata.json (1956b), package.json (1217b), README.md (1336b), references/e2e-ci-reporting.md (1398b), references/e2e-special-scenarios.md (1751b), references/e2e-visual-regression.md (1940b), references/playwright-patterns.md (2266b), skill-card.md (2555b), SKILL.md (2967b), _meta.json (134b)\n\nFile v2.7.0:SKILL.md\n\n---\nname: fec-e2e-testing\ndescription: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\n---\n\n# E2E 测试规范\n\n## Purpose\n\n用真实浏览器验证关键用户旅程，发现单元测试无法覆盖的集成风险。\n\n## Procedure\n\n1. 明确关键旅程：登录、购买、创建、搜索、权限、支付等跨页面流程优先；若只是选择测试层级，先做测试分层规划。\n2. 新项目优先 Playwright；已有 Cypress 项目沿用 Cypress，不为迁移而迁移。\n3. 用 Page Object 或 fixtures 封装登录、页面定位器和共享数据，spec 中避免裸选择器。\n4. 断言用户可见结果，依赖 Locator 自动等待、网络响应或可见状态，不使用固定 sleep。\n5. CI 必须上传 HTML report、截图、trace 或视频；flaky 用例要隔离、复现、标注来源并关联 issue。\n6. 调试失败时先读 trace、console、network 和截图，再改测试；不要把真实产品缺陷误判成 flaky。\n7. 对关键浏览器能力、支付、权限、上传和实时通信流程，记录测试环境、种子数据和清理策略。\n8. 测试数据必须可重复：优先使用 API seed、数据库 fixture、测试账号或 mock 服务；随机数据需带唯一前缀并在 teardown 清理。\n\n## 详细参考\n\n- 需要目录结构、Page Object、spec 组织、配置、flaky 调试和产物示例时，加载 [references/playwright-patterns.md](references/playwright-patterns.md)。\n- 需要 CI 示例和 Markdown 报告模板时，加载 [references/e2e-ci-reporting.md](references/e2e-ci-reporting.md)。\n- 需要 Web3/钱包流程或高风险金融流程时，加载 [references/e2e-special-scenarios.md](references/e2e-special-scenarios.md)。\n- 需要跨页面截图或视觉回归配置时，加载 [references/e2e-visual-regression.md](references/e2e-visual-regression.md)。\n\n## Constraints\n\n- 禁止依赖 `sleep` / 固定 `setTimeout` 作为主要同步手段。\n- 不在生产环境跑真实 E2E。\n- 避免在 E2E 中断言组件内部像素级样式；跨页面截图/视觉回归仅覆盖用户旅程中的关键页面状态。\n- 失败必须能靠截图、trace 或视频定位。\n- 组件内部契约测试分流到组件测试 workflow。\n- 不把不稳定等待、随机数据或依赖测试顺序带入 CI。\n- 不把重试次数当作 flaky 治理；重试只能保留证据，根因仍需定位。\n\n## Expected Output\n\n关键用户旅程有稳定 E2E 覆盖，失败产物可定位问题，CI 中报告和 trace 可下载；flaky 用例有复现命令、隔离策略和后续 issue。\n\nFile v2.7.0:README.md\n\n# E2E 测试规范\n\nFrontend Craft skill for E2E 测试规范.\n\n## Skill\n\n- ID: `fec-e2e-testing`\n- Category: `testing`\n- Version: `2.7.0`\n- Source: `skills/fec-e2e-testing/SKILL.md`\n\n## Description\n\nUse when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [references/e2e-ci-reporting.md](references/e2e-ci-reporting.md)\n- [references/e2e-special-scenarios.md](references/e2e-special-scenarios.md)\n- [references/e2e-visual-regression.md](references/e2e-visual-regression.md)\n- [references/playwright-patterns.md](references/playwright-patterns.md)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-testing-strategy`\n- `@bovinphang/fec-component-testing`\n- `@bovinphang/fec-storybook-component-doc`\n- `@bovinphang/fec-validation-fix`\n\n## License\n\nMIT\n\nFile v2.7.0:_meta.json\n\n{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-e2e-testing\",\n  \"version\": \"2.7.0\",\n  \"publishedAt\": 1781143837163\n}\n\nFile v2.7.0:references/e2e-ci-reporting.md\n\n# E2E CI 与报告\n\n## CI 集成（示例）\n\n```yaml\n# .github/workflows/e2e.yml\nname: E2E Tests\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 20\n      - run: npm ci\n      - run: npx playwright install --with-deps\n      - run: npx playwright test\n        env:\n          CI: true\n          BASE_URL: ${{ vars.STAGING_URL }}\n      - uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: playwright-report\n          path: playwright-report/\n          retention-days: 30\n```\n\nCypress：固定 `CYPRESS_baseUrl` 或配置文件中的 `baseUrl`，失败截图/视频同样建议上传 artifact。\n\n## E2E 报告模板（Markdown）\n\n输出或归档测试报告时可采用下列结构，便于复盘：\n\n```markdown\n# E2E 测试报告\n\n**日期：** YYYY-MM-DD HH:mm\n**耗时：** X 分 Y 秒\n**结果：** 通过 / 失败\n\n## 摘要\n\n- 总计 X | 通过 Y | 失败 Z | 不稳定/跳过 说明\n\n## 失败用例\n\n### 用例名\n\n- **文件：** `tests/e2e/xxx.spec.ts:行号`\n- **错误：** 简述断言或超时信息\n- **截图/Trace：** 路径或 artifact 名称\n- **建议修复：** 可执行结论\n\n## 产物\n\n- HTML 报告：`playwright-report/index.html`\n- Trace / 视频 / 截图：CI artifact 或本地 `test-results/`\n```\n\nFile v2.7.0:references/e2e-special-scenarios.md\n\n# E2E 特殊场景\n\n## Web3 / 钱包注入（Playwright）\n\n在 **`page.goto` 之前**通过 `context.addInitScript` 注入 mock，避免依赖真实插件：\n\n```typescript\ntest(\"连接钱包\", async ({ page, context }) => {\n  await context.addInitScript(() => {\n    (window as unknown as { ethereum?: unknown }).ethereum = {\n      isMetaMask: true,\n      request: async ({ method }: { method: string }) => {\n        if (method === \"eth_requestAccounts\")\n          return [\"0x1234567890123456789012345678901234567890\"];\n        if (method === \"eth_chainId\") return \"0x1\";\n        return null;\n      },\n    };\n  });\n\n  await page.goto(\"/\");\n  await page.getByTestId(\"connect-wallet\").click();\n  await expect(page.getByTestId(\"wallet-address\")).toContainText(\"0x1234\");\n});\n```\n\n链 ID、账户列表与业务契约保持一致即可。\n\n## 金融或高风险操作\n\n- **禁止**在真实生产环境执行真实资金操作；使用 **staging、mock 或 `test.skip`**。\n- 断言**预览金额、成功态**与**关键接口 200** 后再结束用例，超时给足（如链上确认场景）。\n\n```typescript\ntest(\"下单预览与成功态\", async ({ page }) => {\n  test.skip(process.env.NODE_ENV === \"production\", \"生产环境跳过真实交易\");\n\n  await page.goto(\"/markets/demo\");\n  await page.getByTestId(\"position-yes\").click();\n  await page.getByTestId(\"trade-amount\").fill(\"1.0\");\n\n  const preview = page.getByTestId(\"trade-preview\");\n  await expect(preview).toContainText(\"1.0\");\n\n  await page.getByTestId(\"confirm-trade\").click();\n  await page.waitForResponse(\n    (resp) => resp.url().includes(\"/api/trade\") && resp.status() === 200,\n    { timeout: 30_000 },\n  );\n  await expect(page.getByTestId(\"trade-success\")).toBeVisible();\n});\n```\n\nFile v2.7.0:references/e2e-visual-regression.md\n\n# E2E 视觉回归测试\n\n通过截图快照对比检测非预期的 UI 变化。适用于 CSS 重构、设计 Token 更新、组件改版等场景。\n\n## 基础用法\n\n```typescript\nimport { test, expect } from \"@playwright/test\";\n\ntest(\"首页布局与基线一致\", async ({ page }) => {\n  await page.goto(\"/\");\n  await page.waitForLoadState(\"networkidle\");\n\n  // 全页截图对比 - 首次运行自动生成基线\n  await expect(page).toHaveScreenshot(\"homepage-full.png\", {\n    fullPage: true,\n    maxDiffPixels: 100, // 允许的轻微像素差异（抗锯齿等）\n  });\n});\n\ntest(\"按钮组件视觉一致\", async ({ page }) => {\n  await page.goto(\"/components/buttons\");\n  const submitButton = page.getByTestId(\"submit-button\");\n  await expect(submitButton).toHaveScreenshot(\"submit-button.png\");\n});\n```\n\n## 屏蔽动态内容\n\n时间、随机 ID、第三方广告等动态元素会导致误报，使用 `mask` 屏蔽：\n\n```typescript\nawait expect(page).toHaveScreenshot(\"dashboard.png\", {\n  mask: [\n    page.locator(\".live-clock\"),\n    page.locator(\".random-id\"),\n    page.locator(\".ad-banner\"),\n  ],\n});\n```\n\n## 禁用动画\n\nCSS 动画会导致截图不一致，注入样式禁用动画后再截图：\n\n```typescript\nawait page.addStyleTag({\n  content:\n    \"*, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }\",\n});\nawait expect(page).toHaveScreenshot(\"animated-page.png\");\n```\n\n## 基线管理\n\n- **首次运行**: `npx playwright test` 失败但自动生成基线到 `tests/` 目录\n- **更新基线**: UI 有意变更时 `npx playwright test --update-snapshots`\n- **CI 一致性**: 基线必须在与 CI 相同的 OS（Linux/Ubuntu）上生成，字体渲染在 macOS 与 Linux 间存在差异\n- **多浏览器**: 每个 project 独立生成基线（Chromium/Firefox/WebKit 渲染结果不同）\n- **基线文件**: 纳入 `.gitignore` 或 Git LFS 管理，避免仓库膨胀\n\nFile v2.7.0:references/playwright-patterns.md\n\n# Playwright / Cypress E2E 模式\n\n## 目录结构\n\n```text\ntests/\n├── e2e/\n│   ├── auth/login.spec.ts\n│   └── features/search.spec.ts\n├── fixtures/\n│   └── auth.ts\n└── pages/\n    ├── LoginPage.ts\n    └── ItemsPage.ts\nplaywright.config.ts\n```\n\n## Page Object\n\n```ts\nimport { type Locator, type Page } from \"@playwright/test\";\n\nexport class ItemsPage {\n  readonly searchInput: Locator;\n  readonly itemCards: Locator;\n\n  constructor(private readonly page: Page) {\n    this.searchInput = page.getByTestId(\"search-input\");\n    this.itemCards = page.getByTestId(\"item-card\");\n  }\n\n  async goto() {\n    await this.page.goto(\"/items\");\n  }\n\n  async search(keyword: string) {\n    await this.searchInput.fill(keyword);\n    await this.page.waitForResponse((response) => response.url().includes(\"/api/search\"));\n  }\n}\n```\n\n## Spec\n\n```ts\nimport { expect, test } from \"@playwright/test\";\nimport { ItemsPage } from \"../pages/ItemsPage\";\n\ntest.describe(\"商品搜索\", () => {\n  test(\"按关键词搜索有结果\", async ({ page }) => {\n    const itemsPage = new ItemsPage(page);\n    await itemsPage.goto();\n    await itemsPage.search(\"test\");\n    await expect(itemsPage.itemCards.first()).toContainText(/test/i);\n  });\n});\n```\n\n## Config\n\n```ts\nimport { defineConfig, devices } from \"@playwright/test\";\n\nexport default defineConfig({\n  testDir: \"./tests/e2e\",\n  forbidOnly: !!process.env.CI,\n  retries: process.env.CI ? 2 : 0,\n  reporter: [[\"html\"], [\"junit\", { outputFile: \"playwright-results.xml\" }]],\n  use: {\n    baseURL: process.env.BASE_URL || \"http://localhost: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: \"webkit\", use: { ...devices[\"Desktop Safari\"] } },\n  ],\n  webServer: {\n    command: \"npm run dev\",\n    url: \"http://localhost:3000\",\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n## Flaky 调试\n\n```bash\nnpx playwright test path/to/spec.ts --repeat-each=10\nnpx playwright test path/to/spec.ts --retries=3\nnpx playwright show-trace path/to/trace.zip\n```\n\n常见原因：竞态、网络时序、动画、测试数据污染、跨测试状态泄露。\n\nFile v2.7.0:skill-card.md\n\n## Description:\n\nGuides agents in creating, maintaining, debugging, and reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, visual regression, and critical user journeys.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[bovinphang](https://clawhub.ai/user/bovinphang)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and QA engineers use this skill to design, maintain, debug, and review browser-based E2E coverage for critical web user journeys in Playwright or Cypress.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: CI examples that install browser tooling dynamically can create dependency drift or unexpected supply-chain exposure.\n\nMitigation: Pin Playwright in devDependencies, commit the lockfile, and avoid dynamic npx installs in CI.\n\nRisk: E2E flows for production, payment, or financial scenarios can affect real users, funds, or live data.\n\nMitigation: Run these tests only against staging, mocks, test accounts, or skipped production paths; do not execute real production or real-money flows.\n\nRisk: Reports, traces, videos, screenshots, and visual baselines can expose sensitive test data or internal application details.\n\nMitigation: Review and sanitize artifacts before sharing, uploading, or committing them.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/bovinphang/skills/fec-e2e-testing)\n- [Package metadata repository link](https://github.com/bovinphang/frontend-craft)\n- [Playwright / Cypress E2E patterns](references/playwright-patterns.md)\n- [E2E CI and reporting](references/e2e-ci-reporting.md)\n- [E2E special scenarios](references/e2e-special-scenarios.md)\n- [E2E visual regression testing](references/e2e-visual-regression.md)\n\n## Skill Output:\n\n**Output Type(s):** [guidance, markdown, code, shell commands, configuration]\n\n**Output Format:** [Markdown guidance with TypeScript, YAML, shell command, and report-template examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Produces testing recommendations and examples; it does not include an executable payload.]\n\n## Skill Version(s):\n\n2.7.0 (source: server release evidence, package.json, metadata.json, README)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v2.7.0:metadata.json\n\n{\n  \"id\": \"fec-e2e-testing\",\n  \"name\": \"E2E 测试规范\",\n  \"category\": \"testing\",\n  \"tags\": [\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"summary\": \"Frontend Craft skill for E2E 测试规范.\",\n  \"version\": \"2.7.0\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"repository\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"testing\",\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"platforms\": [\n    \"skills-cli\",\n    \"skillreg\",\n    \"claude-code\",\n    \"codex\",\n    \"cursor\",\n    \"opencode\",\n    \"openclaw\",\n    \"generic-skill-runtime\"\n  ],\n  \"description\": \"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\",\n  \"source\": \"skills/fec-e2e-testing\",\n  \"references\": [\n    \"references/e2e-ci-reporting.md\",\n    \"references/e2e-special-scenarios.md\",\n    \"references/e2e-visual-regression.md\",\n    \"references/playwright-patterns.md\"\n  ],\n  \"relations\": {\n    \"relatedSkills\": [\n      \"fec-testing-strategy\",\n      \"fec-component-testing\",\n      \"fec-storybook-component-doc\",\n      \"fec-validation-fix\"\n    ],\n    \"boundaryWorkflows\": [\n      \"Use a testing strategy workflow before deciding the coverage layer.\",\n      \"Use a component testing workflow for unit, component, and light integration tests close to UI code.\",\n      \"Use a validation workflow when existing project checks are failing.\"\n    ],\n    \"capabilityTags\": [\n      \"testing\",\n      \"e2e\",\n      \"browser-automation\"\n    ]\n  }\n}\n\nFile v2.7.0:package.json\n\n{\n  \"name\": \"@bovinphang/fec-e2e-testing\",\n  \"version\": \"2.7.0\",\n  \"description\": \"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\",\n  \"type\": \"module\",\n  \"license\": \"MIT\",\n  \"author\": {\n    \"name\": \"Bovin Phang\",\n    \"email\": \"pengbaowen@msn.com\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/bovinphang/frontend-craft\",\n    \"directory\": \"skills/fec-e2e-testing\"\n  },\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"agent-skill\",\n    \"frontend-craft\",\n    \"testing\",\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"files\": [\n    \"SKILL.md\",\n    \"references\",\n    \"scripts\",\n    \"data\",\n    \"assets\",\n    \"metadata.json\",\n    \"README.md\",\n    \"LICENSE\"\n  ],\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n\nArchive v2.6.0: 8 files, 10001 bytes\n\nFiles: metadata.json (1866b), package.json (1217b), README.md (1174b), references/e2e-advanced.md (5115b), references/playwright-patterns.md (2266b), skill-card.md (2637b), SKILL.md (2747b), _meta.json (134b)\n\nFile v2.6.0:SKILL.md\n\n---\nname: fec-e2e-testing\ndescription: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\n---\n\n# E2E 测试规范\n\n## Purpose\n\n用真实浏览器验证关键用户旅程，发现单元测试无法覆盖的集成风险。\n\n## Procedure\n\n1. 明确关键旅程：登录、购买、创建、搜索、权限、支付等跨页面流程优先；若只是选择测试层级，先做测试分层规划。\n2. 新项目优先 Playwright；已有 Cypress 项目沿用 Cypress，不为迁移而迁移。\n3. 用 Page Object 或 fixtures 封装登录、页面定位器和共享数据，spec 中避免裸选择器。\n4. 断言用户可见结果，依赖 Locator 自动等待、网络响应或可见状态，不使用固定 sleep。\n5. CI 必须上传 HTML report、截图、trace 或视频；flaky 用例要隔离、复现、标注来源并关联 issue。\n6. 调试失败时先读 trace、console、network 和截图，再改测试；不要把真实产品缺陷误判成 flaky。\n7. 对关键浏览器能力、支付、权限、上传和实时通信流程，记录测试环境、种子数据和清理策略。\n8. 测试数据必须可重复：优先使用 API seed、数据库 fixture、测试账号或 mock 服务；随机数据需带唯一前缀并在 teardown 清理。\n\n## 详细参考\n\n- 需要目录结构、Page Object、spec 组织、配置、flaky 调试和产物示例时，加载 [references/playwright-patterns.md](references/playwright-patterns.md)。\n- 需要 CI 示例、Markdown 报告模板、Web3/钱包流程、高风险金融流程或视觉回归配置时，加载 [references/e2e-advanced.md](references/e2e-advanced.md)。\n\n## Constraints\n\n- 禁止依赖 `sleep` / 固定 `setTimeout` 作为主要同步手段。\n- 不在生产环境跑真实 E2E。\n- 避免在 E2E 中断言组件内部像素级样式；跨页面截图/视觉回归仅覆盖用户旅程中的关键页面状态。\n- 失败必须能靠截图、trace 或视频定位。\n- 组件内部契约测试分流到组件测试 workflow。\n- 不把不稳定等待、随机数据或依赖测试顺序带入 CI。\n- 不把重试次数当作 flaky 治理；重试只能保留证据，根因仍需定位。\n\n## Expected Output\n\n关键用户旅程有稳定 E2E 覆盖，失败产物可定位问题，CI 中报告和 trace 可下载；flaky 用例有复现命令、隔离策略和后续 issue。\n\nFile v2.6.0:README.md\n\n# E2E 测试规范\n\nFrontend Craft skill for E2E 测试规范.\n\n## Skill\n\n- ID: `fec-e2e-testing`\n- Category: `testing`\n- Version: `2.6.0`\n- Source: `skills/fec-e2e-testing/SKILL.md`\n\n## Description\n\nUse when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [references/e2e-advanced.md](references/e2e-advanced.md)\n- [references/playwright-patterns.md](references/playwright-patterns.md)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-testing-strategy`\n- `@bovinphang/fec-component-testing`\n- `@bovinphang/fec-storybook-component-doc`\n- `@bovinphang/fec-validation-fix`\n\n## License\n\nMIT\n\nFile v2.6.0:_meta.json\n\n{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-e2e-testing\",\n  \"version\": \"2.6.0\",\n  \"publishedAt\": 1780842776950\n}\n\nFile v2.6.0:references/e2e-advanced.md\n\n# E2E 高级测试细节\n\n## CI 集成（示例）\n\n```yaml\n# .github/workflows/e2e.yml\nname: E2E Tests\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 20\n      - run: npm ci\n      - run: npx playwright install --with-deps\n      - run: npx playwright test\n        env:\n          CI: true\n          BASE_URL: ${{ vars.STAGING_URL }}\n      - uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: playwright-report\n          path: playwright-report/\n          retention-days: 30\n```\n\nCypress：固定 `CYPRESS_baseUrl` 或配置文件中的 `baseUrl`，失败截图/视频同样建议上传 artifact。\n\n## E2E 报告模板（Markdown）\n\n输出或归档测试报告时可采用下列结构，便于复盘：\n\n```markdown\n# E2E 测试报告\n\n**日期：** YYYY-MM-DD HH:mm  \n**耗时：** X 分 Y 秒  \n**结果：** 通过 / 失败\n\n## 摘要\n\n- 总计 X | 通过 Y | 失败 Z | 不稳定/跳过 说明\n\n## 失败用例\n\n### 用例名\n\n- **文件：** `tests/e2e/xxx.spec.ts:行号`\n- **错误：** 简述断言或超时信息\n- **截图/Trace：** 路径或 artifact 名称\n- **建议修复：** 可执行结论\n\n## 产物\n\n- HTML 报告：`playwright-report/index.html`\n- Trace / 视频 / 截图：CI artifact 或本地 `test-results/`\n```\n\n## 特殊场景（按需）\n\n### Web3 / 钱包注入（Playwright）\n\n在 **`page.goto` 之前**通过 `context.addInitScript` 注入 mock，避免依赖真实插件：\n\n```typescript\ntest(\"连接钱包\", async ({ page, context }) => {\n  await context.addInitScript(() => {\n    (window as unknown as { ethereum?: unknown }).ethereum = {\n      isMetaMask: true,\n      request: async ({ method }: { method: string }) => {\n        if (method === \"eth_requestAccounts\")\n          return [\"0x1234567890123456789012345678901234567890\"];\n        if (method === \"eth_chainId\") return \"0x1\";\n        return null;\n      },\n    };\n  });\n\n  await page.goto(\"/\");\n  await page.getByTestId(\"connect-wallet\").click();\n  await expect(page.getByTestId(\"wallet-address\")).toContainText(\"0x1234\");\n});\n```\n\n链 ID、账户列表与业务契约保持一致即可。\n\n### 金融或高风险操作\n\n- **禁止**在真实生产环境执行真实资金操作；使用 **staging、mock 或 `test.skip`**。\n- 断言**预览金额、成功态**与**关键接口 200** 后再结束用例，超时给足（如链上确认场景）。\n\n```typescript\ntest(\"下单预览与成功态\", async ({ page }) => {\n  test.skip(process.env.NODE_ENV === \"production\", \"生产环境跳过真实交易\");\n\n  await page.goto(\"/markets/demo\");\n  await page.getByTestId(\"position-yes\").click();\n  await page.getByTestId(\"trade-amount\").fill(\"1.0\");\n\n  const preview = page.getByTestId(\"trade-preview\");\n  await expect(preview).toContainText(\"1.0\");\n\n  await page.getByTestId(\"confirm-trade\").click();\n  await page.waitForResponse(\n    (resp) => resp.url().includes(\"/api/trade\") && resp.status() === 200,\n    { timeout: 30_000 },\n  );\n  await expect(page.getByTestId(\"trade-success\")).toBeVisible();\n});\n```\n\n## 视觉回归测试\n\n通过截图快照对比检测非预期的 UI 变化。适用于 CSS 重构、设计 Token 更新、组件改版等场景。\n\n### 基础用法\n\n```typescript\nimport { test, expect } from \"@playwright/test\";\n\ntest(\"首页布局与基线一致\", async ({ page }) => {\n  await page.goto(\"/\");\n  await page.waitForLoadState(\"networkidle\");\n\n  // 全页截图对比 — 首次运行自动生成基线\n  await expect(page).toHaveScreenshot(\"homepage-full.png\", {\n    fullPage: true,\n    maxDiffPixels: 100, // 允许的轻微像素差异（抗锯齿等）\n  });\n});\n\ntest(\"按钮组件视觉一致\", async ({ page }) => {\n  await page.goto(\"/components/buttons\");\n  const submitButton = page.getByTestId(\"submit-button\");\n  await expect(submitButton).toHaveScreenshot(\"submit-button.png\");\n});\n```\n\n### 屏蔽动态内容\n\n时间、随机 ID、第三方广告等动态元素会导致误报，使用 `mask` 屏蔽：\n\n```typescript\nawait expect(page).toHaveScreenshot(\"dashboard.png\", {\n  mask: [\n    page.locator(\".live-clock\"),\n    page.locator(\".random-id\"),\n    page.locator(\".ad-banner\"),\n  ],\n});\n```\n\n### 禁用动画\n\nCSS 动画会导致截图不一致，注入样式禁用动画后再截图：\n\n```typescript\nawait page.addStyleTag({\n  content:\n    \"*, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }\",\n});\nawait expect(page).toHaveScreenshot(\"animated-page.png\");\n```\n\n### 基线管理\n\n- **首次运行**: `npx playwright test` 失败但自动生成基线到 `tests/` 目录\n- **更新基线**: UI 有意变更时 `npx playwright test --update-snapshots`\n- **CI 一致性**: 基线必须在与 CI 相同的 OS（Linux/Ubuntu）上生成，字体渲染在 macOS 与 Linux 间存在差异\n- **多浏览器**: 每个 project 独立生成基线（Chromium/Firefox/WebKit 渲染结果不同）\n- **基线文件**: 纳入 `.gitignore` 或 Git LFS 管理，避免仓库膨胀\n\nFile v2.6.0:references/playwright-patterns.md\n\n# Playwright / Cypress E2E 模式\n\n## 目录结构\n\n```text\ntests/\n├── e2e/\n│   ├── auth/login.spec.ts\n│   └── features/search.spec.ts\n├── fixtures/\n│   └── auth.ts\n└── pages/\n    ├── LoginPage.ts\n    └── ItemsPage.ts\nplaywright.config.ts\n```\n\n## Page Object\n\n```ts\nimport { type Locator, type Page } from \"@playwright/test\";\n\nexport class ItemsPage {\n  readonly searchInput: Locator;\n  readonly itemCards: Locator;\n\n  constructor(private readonly page: Page) {\n    this.searchInput = page.getByTestId(\"search-input\");\n    this.itemCards = page.getByTestId(\"item-card\");\n  }\n\n  async goto() {\n    await this.page.goto(\"/items\");\n  }\n\n  async search(keyword: string) {\n    await this.searchInput.fill(keyword);\n    await this.page.waitForResponse((response) => response.url().includes(\"/api/search\"));\n  }\n}\n```\n\n## Spec\n\n```ts\nimport { expect, test } from \"@playwright/test\";\nimport { ItemsPage } from \"../pages/ItemsPage\";\n\ntest.describe(\"商品搜索\", () => {\n  test(\"按关键词搜索有结果\", async ({ page }) => {\n    const itemsPage = new ItemsPage(page);\n    await itemsPage.goto();\n    await itemsPage.search(\"test\");\n    await expect(itemsPage.itemCards.first()).toContainText(/test/i);\n  });\n});\n```\n\n## Config\n\n```ts\nimport { defineConfig, devices } from \"@playwright/test\";\n\nexport default defineConfig({\n  testDir: \"./tests/e2e\",\n  forbidOnly: !!process.env.CI,\n  retries: process.env.CI ? 2 : 0,\n  reporter: [[\"html\"], [\"junit\", { outputFile: \"playwright-results.xml\" }]],\n  use: {\n    baseURL: process.env.BASE_URL || \"http://localhost: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: \"webkit\", use: { ...devices[\"Desktop Safari\"] } },\n  ],\n  webServer: {\n    command: \"npm run dev\",\n    url: \"http://localhost:3000\",\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n## Flaky 调试\n\n```bash\nnpx playwright test path/to/spec.ts --repeat-each=10\nnpx playwright test path/to/spec.ts --retries=3\nnpx playwright show-trace path/to/trace.zip\n```\n\n常见原因：竞态、网络时序、动画、测试数据污染、跨测试状态泄露。\n\nFile v2.6.0:skill-card.md\n\n## Description: <br>\nUse when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[bovinphang](https://clawhub.ai/user/bovinphang) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and test engineers use this skill to plan, implement, debug, and review browser-based end-to-end testing workflows for critical frontend journeys. It focuses on Playwright and Cypress patterns, CI artifacts, traces, flaky-test handling, visual regression, and guarded handling of login, payment, wallet, permission, and CRUD flows. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Guidance covers login, payment, wallet, and other sensitive browser journeys, which could expose secrets, customer data, or real funds if applied against production systems. <br>\nMitigation: Use test accounts, staging environments, mocks, or skipped production flows; review traces, screenshots, videos, reports, and CI artifacts before sharing or retention. <br>\nRisk: Browser traces, screenshots, videos, and CI artifacts may capture sensitive credentials or private application data. <br>\nMitigation: Keep generated artifacts out of public logs, redact sensitive values, and use seeded or mock data for reproducible tests. <br>\n\n\n## Reference(s): <br>\n- [ClawHub Skill Page](https://clawhub.ai/bovinphang/fec-e2e-testing) <br>\n- [Playwright / Cypress E2E Patterns](references/playwright-patterns.md) <br>\n- [E2E Advanced Testing Details](references/e2e-advanced.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [guidance, markdown, code, shell commands, configuration] <br>\n**Output Format:** [Markdown guidance with TypeScript, YAML, bash, and configuration examples] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May include E2E report structure, test organization advice, CI artifact guidance, Playwright or Cypress examples, and debugging commands.] <br>\n\n## Skill Version(s): <br>\n2.6.0 (source: server release evidence, README.md, metadata.json, package.json) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nFile v2.6.0:metadata.json\n\n{\n  \"id\": \"fec-e2e-testing\",\n  \"name\": \"E2E 测试规范\",\n  \"category\": \"testing\",\n  \"tags\": [\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"summary\": \"Frontend Craft skill for E2E 测试规范.\",\n  \"version\": \"2.6.0\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"repository\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"testing\",\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"platforms\": [\n    \"skills-cli\",\n    \"skillreg\",\n    \"claude-code\",\n    \"codex\",\n    \"cursor\",\n    \"opencode\",\n    \"openclaw\",\n    \"generic-skill-runtime\"\n  ],\n  \"description\": \"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\",\n  \"source\": \"skills/fec-e2e-testing\",\n  \"references\": [\n    \"references/e2e-advanced.md\",\n    \"references/playwright-patterns.md\"\n  ],\n  \"relations\": {\n    \"relatedSkills\": [\n      \"fec-testing-strategy\",\n      \"fec-component-testing\",\n      \"fec-storybook-component-doc\",\n      \"fec-validation-fix\"\n    ],\n    \"boundaryWorkflows\": [\n      \"Use a testing strategy workflow before deciding the coverage layer.\",\n      \"Use a component testing workflow for unit, component, and light integration tests close to UI code.\",\n      \"Use a validation workflow when existing project checks are failing.\"\n    ],\n    \"capabilityTags\": [\n      \"testing\",\n      \"e2e\",\n      \"browser-automation\"\n    ]\n  }\n}\n\nFile v2.6.0:package.json\n\n{\n  \"name\": \"@bovinphang/fec-e2e-testing\",\n  \"version\": \"2.6.0\",\n  \"description\": \"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\",\n  \"type\": \"module\",\n  \"license\": \"MIT\",\n  \"author\": {\n    \"name\": \"Bovin Phang\",\n    \"email\": \"pengbaowen@msn.com\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/bovinphang/frontend-craft\",\n    \"directory\": \"skills/fec-e2e-testing\"\n  },\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"agent-skill\",\n    \"frontend-craft\",\n    \"testing\",\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"files\": [\n    \"SKILL.md\",\n    \"references\",\n    \"scripts\",\n    \"data\",\n    \"assets\",\n    \"metadata.json\",\n    \"README.md\",\n    \"LICENSE\"\n  ],\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n\nArchive v2.5.0: 8 files, 10053 bytes\n\nFiles: metadata.json (1866b), package.json (1217b), README.md (1174b), references/e2e-advanced.md (5115b), references/playwright-patterns.md (2266b), skill-card.md (2673b), SKILL.md (2775b), _meta.json (134b)\n\nFile v2.5.0:SKILL.md\n\n---\nname: fec-e2e-testing\ndescription: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\n---\n\n# E2E 测试规范\n\n## Purpose\n\n用真实浏览器验证关键用户旅程，发现单元测试无法覆盖的集成风险。\n\n## Procedure\n\n1. 明确关键旅程：登录、购买、创建、搜索、权限、支付等跨页面流程优先；若只是选择测试层级，先做测试分层规划。\n2. 新项目优先 Playwright；已有 Cypress 项目沿用 Cypress，不为迁移而迁移。\n3. 用 Page Object 或 fixtures 封装登录、页面定位器和共享数据，spec 中避免裸选择器。\n4. 断言用户可见结果，依赖 Locator 自动等待、网络响应或可见状态，不使用固定 sleep。\n5. CI 必须上传 HTML report、截图、trace 或视频；flaky 用例要隔离、复现、标注来源并关联 issue。\n6. 调试失败时先读 trace、console、network 和截图，再改测试；不要把真实产品缺陷误判成 flaky。\n7. 对关键浏览器能力、支付、权限、上传和实时通信流程，记录测试环境、种子数据和清理策略。\n8. 测试数据必须可重复：优先使用 API seed、数据库 fixture、测试账号或 mock 服务；随机数据需带唯一前缀并在 teardown 清理。\n\n## Detailed References\n\n- Load [references/playwright-patterns.md](references/playwright-patterns.md) for directory layout, Page Object, spec structure, config, flaky debugging, and artifact examples.\n- Load [references/e2e-advanced.md](references/e2e-advanced.md) when the task needs CI examples, Markdown report templates, Web3/wallet flows, high-risk financial flows, or visual regression setup.\n\n## Constraints\n\n- 禁止依赖 `sleep` / 固定 `setTimeout` 作为主要同步手段。\n- 不在生产环境跑真实 E2E。\n- 避免在 E2E 中断言组件内部像素级样式；跨页面截图/视觉回归仅覆盖用户旅程中的关键页面状态。\n- 失败必须能靠截图、trace 或视频定位。\n- 组件内部契约测试分流到组件测试 workflow。\n- 不把不稳定等待、随机数据或依赖测试顺序带入 CI。\n- 不把重试次数当作 flaky 治理；重试只能保留证据，根因仍需定位。\n\n## Expected Output\n\n关键用户旅程有稳定 E2E 覆盖，失败产物可定位问题，CI 中报告和 trace 可下载；flaky 用例有复现命令、隔离策略和后续 issue。\n\nFile v2.5.0:README.md\n\n# E2E 测试规范\n\nFrontend Craft skill for E2E 测试规范.\n\n## Skill\n\n- ID: `fec-e2e-testing`\n- Category: `testing`\n- Version: `2.5.0`\n- Source: `skills/fec-e2e-testing/SKILL.md`\n\n## Description\n\nUse when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [references/e2e-advanced.md](references/e2e-advanced.md)\n- [references/playwright-patterns.md](references/playwright-patterns.md)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-testing-strategy`\n- `@bovinphang/fec-component-testing`\n- `@bovinphang/fec-storybook-component-doc`\n- `@bovinphang/fec-validation-fix`\n\n## License\n\nMIT\n\nFile v2.5.0:_meta.json\n\n{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-e2e-testing\",\n  \"version\": \"2.5.0\",\n  \"publishedAt\": 1780489902988\n}\n\nFile v2.5.0:references/e2e-advanced.md\n\n# E2E 高级测试细节\n\n## CI 集成（示例）\n\n```yaml\n# .github/workflows/e2e.yml\nname: E2E Tests\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 20\n      - run: npm ci\n      - run: npx playwright install --with-deps\n      - run: npx playwright test\n        env:\n          CI: true\n          BASE_URL: ${{ vars.STAGING_URL }}\n      - uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: playwright-report\n          path: playwright-report/\n          retention-days: 30\n```\n\nCypress：固定 `CYPRESS_baseUrl` 或配置文件中的 `baseUrl`，失败截图/视频同样建议上传 artifact。\n\n## E2E 报告模板（Markdown）\n\n输出或归档测试报告时可采用下列结构，便于复盘：\n\n```markdown\n# E2E 测试报告\n\n**日期：** YYYY-MM-DD HH:mm  \n**耗时：** X 分 Y 秒  \n**结果：** 通过 / 失败\n\n## 摘要\n\n- 总计 X | 通过 Y | 失败 Z | 不稳定/跳过 说明\n\n## 失败用例\n\n### 用例名\n\n- **文件：** `tests/e2e/xxx.spec.ts:行号`\n- **错误：** 简述断言或超时信息\n- **截图/Trace：** 路径或 artifact 名称\n- **建议修复：** 可执行结论\n\n## 产物\n\n- HTML 报告：`playwright-report/index.html`\n- Trace / 视频 / 截图：CI artifact 或本地 `test-results/`\n```\n\n## 特殊场景（按需）\n\n### Web3 / 钱包注入（Playwright）\n\n在 **`page.goto` 之前**通过 `context.addInitScript` 注入 mock，避免依赖真实插件：\n\n```typescript\ntest(\"连接钱包\", async ({ page, context }) => {\n  await context.addInitScript(() => {\n    (window as unknown as { ethereum?: unknown }).ethereum = {\n      isMetaMask: true,\n      request: async ({ method }: { method: string }) => {\n        if (method === \"eth_requestAccounts\")\n          return [\"0x1234567890123456789012345678901234567890\"];\n        if (method === \"eth_chainId\") return \"0x1\";\n        return null;\n      },\n    };\n  });\n\n  await page.goto(\"/\");\n  await page.getByTestId(\"connect-wallet\").click();\n  await expect(page.getByTestId(\"wallet-address\")).toContainText(\"0x1234\");\n});\n```\n\n链 ID、账户列表与业务契约保持一致即可。\n\n### 金融或高风险操作\n\n- **禁止**在真实生产环境执行真实资金操作；使用 **staging、mock 或 `test.skip`**。\n- 断言**预览金额、成功态**与**关键接口 200** 后再结束用例，超时给足（如链上确认场景）。\n\n```typescript\ntest(\"下单预览与成功态\", async ({ page }) => {\n  test.skip(process.env.NODE_ENV === \"production\", \"生产环境跳过真实交易\");\n\n  await page.goto(\"/markets/demo\");\n  await page.getByTestId(\"position-yes\").click();\n  await page.getByTestId(\"trade-amount\").fill(\"1.0\");\n\n  const preview = page.getByTestId(\"trade-preview\");\n  await expect(preview).toContainText(\"1.0\");\n\n  await page.getByTestId(\"confirm-trade\").click();\n  await page.waitForResponse(\n    (resp) => resp.url().includes(\"/api/trade\") && resp.status() === 200,\n    { timeout: 30_000 },\n  );\n  await expect(page.getByTestId(\"trade-success\")).toBeVisible();\n});\n```\n\n## 视觉回归测试\n\n通过截图快照对比检测非预期的 UI 变化。适用于 CSS 重构、设计 Token 更新、组件改版等场景。\n\n### 基础用法\n\n```typescript\nimport { test, expect } from \"@playwright/test\";\n\ntest(\"首页布局与基线一致\", async ({ page }) => {\n  await page.goto(\"/\");\n  await page.waitForLoadState(\"networkidle\");\n\n  // 全页截图对比 — 首次运行自动生成基线\n  await expect(page).toHaveScreenshot(\"homepage-full.png\", {\n    fullPage: true,\n    maxDiffPixels: 100, // 允许的轻微像素差异（抗锯齿等）\n  });\n});\n\ntest(\"按钮组件视觉一致\", async ({ page }) => {\n  await page.goto(\"/components/buttons\");\n  const submitButton = page.getByTestId(\"submit-button\");\n  await expect(submitButton).toHaveScreenshot(\"submit-button.png\");\n});\n```\n\n### 屏蔽动态内容\n\n时间、随机 ID、第三方广告等动态元素会导致误报，使用 `mask` 屏蔽：\n\n```typescript\nawait expect(page).toHaveScreenshot(\"dashboard.png\", {\n  mask: [\n    page.locator(\".live-clock\"),\n    page.locator(\".random-id\"),\n    page.locator(\".ad-banner\"),\n  ],\n});\n```\n\n### 禁用动画\n\nCSS 动画会导致截图不一致，注入样式禁用动画后再截图：\n\n```typescript\nawait page.addStyleTag({\n  content:\n    \"*, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }\",\n});\nawait expect(page).toHaveScreenshot(\"animated-page.png\");\n```\n\n### 基线管理\n\n- **首次运行**: `npx playwright test` 失败但自动生成基线到 `tests/` 目录\n- **更新基线**: UI 有意变更时 `npx playwright test --update-snapshots`\n- **CI 一致性**: 基线必须在与 CI 相同的 OS（Linux/Ubuntu）上生成，字体渲染在 macOS 与 Linux 间存在差异\n- **多浏览器**: 每个 project 独立生成基线（Chromium/Firefox/WebKit 渲染结果不同）\n- **基线文件**: 纳入 `.gitignore` 或 Git LFS 管理，避免仓库膨胀\n\nFile v2.5.0:references/playwright-patterns.md\n\n# Playwright / Cypress E2E 模式\n\n## 目录结构\n\n```text\ntests/\n├── e2e/\n│   ├── auth/login.spec.ts\n│   └── features/search.spec.ts\n├── fixtures/\n│   └── auth.ts\n└── pages/\n    ├── LoginPage.ts\n    └── ItemsPage.ts\nplaywright.config.ts\n```\n\n## Page Object\n\n```ts\nimport { type Locator, type Page } from \"@playwright/test\";\n\nexport class ItemsPage {\n  readonly searchInput: Locator;\n  readonly itemCards: Locator;\n\n  constructor(private readonly page: Page) {\n    this.searchInput = page.getByTestId(\"search-input\");\n    this.itemCards = page.getByTestId(\"item-card\");\n  }\n\n  async goto() {\n    await this.page.goto(\"/items\");\n  }\n\n  async search(keyword: string) {\n    await this.searchInput.fill(keyword);\n    await this.page.waitForResponse((response) => response.url().includes(\"/api/search\"));\n  }\n}\n```\n\n## Spec\n\n```ts\nimport { expect, test } from \"@playwright/test\";\nimport { ItemsPage } from \"../pages/ItemsPage\";\n\ntest.describe(\"商品搜索\", () => {\n  test(\"按关键词搜索有结果\", async ({ page }) => {\n    const itemsPage = new ItemsPage(page);\n    await itemsPage.goto();\n    await itemsPage.search(\"test\");\n    await expect(itemsPage.itemCards.first()).toContainText(/test/i);\n  });\n});\n```\n\n## Config\n\n```ts\nimport { defineConfig, devices } from \"@playwright/test\";\n\nexport default defineConfig({\n  testDir: \"./tests/e2e\",\n  forbidOnly: !!process.env.CI,\n  retries: process.env.CI ? 2 : 0,\n  reporter: [[\"html\"], [\"junit\", { outputFile: \"playwright-results.xml\" }]],\n  use: {\n    baseURL: process.env.BASE_URL || \"http://localhost: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: \"webkit\", use: { ...devices[\"Desktop Safari\"] } },\n  ],\n  webServer: {\n    command: \"npm run dev\",\n    url: \"http://localhost:3000\",\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n## Flaky 调试\n\n```bash\nnpx playwright test path/to/spec.ts --repeat-each=10\nnpx playwright test path/to/spec.ts --retries=3\nnpx playwright show-trace path/to/trace.zip\n```\n\n常见原因：竞态、网络时序、动画、测试数据污染、跨测试状态泄露。\n\nFile v2.5.0:skill-card.md\n\n## Description: <br>\nUse when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[bovinphang](https://clawhub.ai/user/bovinphang) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and QA engineers use this skill to plan, write, debug, and review Playwright or Cypress end-to-end tests for critical browser user journeys, CI artifacts, flaky failures, visual regression checks, wallet flows, and high-risk payment or financial paths. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: E2E tests for login, payment, wallet, or financial paths can touch sensitive credentials, transaction state, or account data. <br>\nMitigation: Run these tests in staging, mocked, or explicitly skipped environments; avoid real production transactions and isolate test accounts. <br>\nRisk: Screenshots, traces, videos, and HTML reports can expose sensitive test data. <br>\nMitigation: Treat generated artifacts as sensitive, limit retention and access, and review artifacts before sharing outside the test team. <br>\nRisk: Flaky waits, random data, or order-dependent tests can make CI results misleading. <br>\nMitigation: Use locator auto-waiting, network or visible-state synchronization, repeatable seed data, teardown cleanup, and issue-linked flaky test isolation. <br>\n\n\n## Reference(s): <br>\n- [Playwright / Cypress E2E Patterns](references/playwright-patterns.md) <br>\n- [E2E Advanced Testing Details](references/e2e-advanced.md) <br>\n- [ClawHub Skill Page](https://clawhub.ai/bovinphang/fec-e2e-testing) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance] <br>\n**Output Format:** [Markdown guidance with code, shell command, and configuration examples] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May include test plans, Page Object patterns, CI artifact guidance, failure analysis, and report templates.] <br>\n\n## Skill Version(s): <br>\n2.5.0 (source: server release evidence, README.md, metadata.json, package.json) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nFile v2.5.0:metadata.json\n\n{\n  \"id\": \"fec-e2e-testing\",\n  \"name\": \"E2E 测试规范\",\n  \"category\": \"testing\",\n  \"tags\": [\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"summary\": \"Frontend Craft skill for E2E 测试规范.\",\n  \"version\": \"2.5.0\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"repository\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"testing\",\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"platforms\": [\n    \"skills-cli\",\n    \"skillreg\",\n    \"claude-code\",\n    \"codex\",\n    \"cursor\",\n    \"opencode\",\n    \"openclaw\",\n    \"generic-skill-runtime\"\n  ],\n  \"description\": \"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\",\n  \"source\": \"skills/fec-e2e-testing\",\n  \"references\": [\n    \"references/e2e-advanced.md\",\n    \"references/playwright-patterns.md\"\n  ],\n  \"relations\": {\n    \"relatedSkills\": [\n      \"fec-testing-strategy\",\n      \"fec-component-testing\",\n      \"fec-storybook-component-doc\",\n      \"fec-validation-fix\"\n    ],\n    \"boundaryWorkflows\": [\n      \"Use a testing strategy workflow before deciding the coverage layer.\",\n      \"Use a component testing workflow for unit, component, and light integration tests close to UI code.\",\n      \"Use a validation workflow when existing project checks are failing.\"\n    ],\n    \"capabilityTags\": [\n      \"testing\",\n      \"e2e\",\n      \"browser-automation\"\n    ]\n  }\n}\n\nFile v2.5.0:package.json\n\n{\n  \"name\": \"@bovinphang/fec-e2e-testing\",\n  \"version\": \"2.5.0\",\n  \"description\": \"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.\",\n  \"type\": \"module\",\n  \"license\": \"MIT\",\n  \"author\": {\n    \"name\": \"Bovin Phang\",\n    \"email\": \"pengbaowen@msn.com\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/bovinphang/frontend-craft\",\n    \"directory\": \"skills/fec-e2e-testing\"\n  },\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"agent-skill\",\n    \"frontend-craft\",\n    \"testing\",\n    \"playwright\",\n    \"cypress\",\n    \"e2e\",\n    \"visual-regression\",\n    \"ci\",\n    \"pom\"\n  ],\n  \"files\": [\n    \"SKILL.md\",\n    \"references\",\n    \"scripts\",\n    \"data\",\n    \"assets\",\n    \"metadata.json\",\n    \"README.md\",\n    \"LICENSE\"\n  ],\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}","readmeExcerpt":"Skill: E2E Testing Owner: bovinphang Summary: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-26T14:59:46.492Z | u","codeSnippets":[],"executableExamples":[{"language":"yaml","snippet":"# .github/workflows/e2e.yml\nname: E2E Tests\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 20\n      - run: npm ci\n      - run: npx playwright install --with-deps\n      - run: npx playwright test\n        env:\n          CI: true\n          BASE_URL: ${{ vars.STAGING_URL }}\n      - uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: playwright-report\n          path: playwright-report/\n          retention-days: 30"},{"language":"markdown","snippet":"# E2E test report\n\n**Date:** YYYY-MM-DD HH:mm\n**Time taken:** X minutes Y seconds\n**Result:** Pass/Fail\n\n## Summary\n\n- Total X | Pass Y | Fail Z | Unstable/Skip Description\n\n## Failed use case\n\n### Use case name\n\n- **File:** `tests/e2e/xxx.spec.ts:line number`\n- **ERROR:** Brief assertion or timeout information\n- **Screenshot/Trace:** path or artifact name\n- **Suggested fix:** Executable conclusion\n\n## Product\n\n- HTML report: `playwright-report/index.html`\n- Trace / Video / Screenshot: CI artifact or local `test-results/`"},{"language":"typescript","snippet":"test(\"Connect wallet\", async ({ page, context }) => {\n  await context.addInitScript(() => {\n    (window as unknown as { ethereum?: unknown }).ethereum = {\n      isMetaMask: true,\n      request: async ({ method }: { method: string }) => {\n        if (method === \"eth_requestAccounts\")\n          return [\"0x1234567890123456789012345678901234567890\"];\n        if (method === \"eth_chainId\") return \"0x1\";\n        return null;\n      },\n    };\n  });\n\n  await page.goto(\"/\");\n  await page.getByTestId(\"connect-wallet\").click();\n  await expect(page.getByTestId(\"wallet-address\")).toContainText(\"0x1234\");\n});"},{"language":"typescript","snippet":"test(\"Order preview and success status\", async ({ page }) => {\n  test.skip(process.env.NODE_ENV === \"production\", \"The production environment skips real transactions\");\n\n  await page.goto(\"/markets/demo\");\n  await page.getByTestId(\"position-yes\").click();\n  await page.getByTestId(\"trade-amount\").fill(\"1.0\");\n\n  const preview = page.getByTestId(\"trade-preview\");\n  await expect(preview).toContainText(\"1.0\");\n\n  await page.getByTestId(\"confirm-trade\").click();\n  await page.waitForResponse(\n    (resp) => resp.url().includes(\"/api/trade\") && resp.status() === 200,\n    { timeout: 30_000 },\n  );\n  await expect(page.getByTestId(\"trade-success\")).toBeVisible();\n});"},{"language":"typescript","snippet":"import { test, expect } from \"@playwright/test\";\n\ntest(\"Homepage layout is consistent with baseline\", async ({ page }) => {\n  await page.goto(\"/\");\n  await page.waitForLoadState(\"networkidle\");\n\n  // Compare full-page screenshots - automatically generate a baseline for the first run\n  await expect(page).toHaveScreenshot(\"homepage-full.png\", {\n    fullPage: true,\n    maxDiffPixels: 100, // Slight pixel differences allowed (anti-aliasing, etc.)\n  });\n});\n\ntest(\"Button components are visually consistent\", async ({ page }) => {\n  await page.goto(\"/components/buttons\");\n  const submitButton = page.getByTestId(\"submit-button\");\n  await expect(submitButton).toHaveScreenshot(\"submit-button.png\");\n});"},{"language":"typescript","snippet":"await expect(page).toHaveScreenshot(\"dashboard.png\", {\n  mask: [\n    page.locator(\".live-clock\"),\n    page.locator(\".random-id\"),\n    page.locator(\".ad-banner\"),\n  ],\n});"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: fec-e2e-testing\ndescription: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, end-to-end testing, Playwright, Cypress.\n---\n\n# E2E Test Specification\n\n## Purpose\n\nValidate key user journeys with real browsers and uncover integration risks not covered by unit tests.\n\n## Procedure\n\n1. Clarify the key journeys: cross-page processes such as login, purchase, creation, search, permissions, payment, etc. are given priority; if you only choose the test level, do the test hierarchical planning first.\n2. New projects will be given priority by Playwright; existing Cypress projects will continue to use Cypress and will not be migrated for the sake of migration.\n3. Use Page Object or fixtures to encapsulate login, page locator and shared data, and avoid naked selectors in the spec.\n4. Assert that the user can see the results, relying on Locator automatic waiting, network response or visible status, without using fixed sleep.\n5. CI must upload HTML report, screenshots, trace or video; Flaky use cases must be isolated, reproduced, marked with sources and associated with issues.\n6. When debugging fails, read the trace, console, network and screenshots first, and then change the test; do not misjudge real product defects as flaky.\n7. Record the test environment, seed data and cleanup strategies for key browser capabilities, payment, permissions, uploads and real-time communication processes.\n8. Test data must be repeatable: API seeds, database fixtures, test accounts or mock services are preferred; random data must have a unique prefix and be cleaned in teardown.\n\n## Detailed reference\n\n- Load [references/playwright-patterns.md](references/playwright-patterns.md) when you need directory structure, Page Object, spec organization, configuration, flaky debugging and production examples.\n- Load [references/e2e-ci-reporting.md](references/e2e-ci-reporting.md) when you need CI examples and Markdown report templates.\n- Load [references/e2e-special-scenarios.md](references/e2e-special-scenarios.md) when Web3/wallet flows or high-risk financial flows are required.\n- When cross-page screenshots or visual regression configuration are required, load [references/e2e-visual-regression.md](references/e2e-visual-regression.md).\n\n## Constraints\n\n- Disable reliance on `sleep` / fixed `setTimeout` as primary synchronization means.\n- Do not run real E2E in production environment.\n- Avoid asserting component internal pixel-level styles in E2E; cross-page screenshots/visual regressions only cover key page states in the user journey.\n- Failure must be able to be located by taking screenshots, traces or videos.\n- Component in"},{"path":"README.md","content":"# E2E Test Specification\n\nCreate and maintain real-browser journeys, selectors, traces, and CI artifacts with Playwright or Cypress.\n\n## Skill\n\n- ID: `fec-e2e-testing`\n- Category: `testing`\n- Version: `2.9.0`\n- Source: `skills/fec-e2e-testing/SKILL.md`\n\n## Description\n\nUse when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, end-to-end testing, Playwright, Cypress.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [references/e2e-ci-reporting.md](references/e2e-ci-reporting.md)\n- [references/e2e-special-scenarios.md](references/e2e-special-scenarios.md)\n- [references/e2e-visual-regression.md](references/e2e-visual-regression.md)\n- [references/playwright-patterns.md](references/playwright-patterns.md)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-testing-strategy`\n- `@bovinphang/fec-component-testing`\n- `@bovinphang/fec-storybook-component-doc`\n- `@bovinphang/fec-validation-fix`\n\n## License\n\nMIT"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-e2e-testing\",\n  \"version\": \"2.9.0\",\n  \"publishedAt\": 1790434786492\n}"},{"path":"references/e2e-ci-reporting.md","content":"#E2E CI & Reporting\n\n## CI integration (example)\n\n```yaml\n# .github/workflows/e2e.yml\nname: E2E Tests\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 20\n      - run: npm ci\n      - run: npx playwright install --with-deps\n      - run: npx playwright test\n        env:\n          CI: true\n          BASE_URL: ${{ vars.STAGING_URL }}\n      - uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: playwright-report\n          path: playwright-report/\n          retention-days: 30\n```\n\nCypress: Fixed `CYPRESS_baseUrl` or `baseUrl` in the configuration file. Failure screenshots/videos are also recommended to upload artifacts.\n\n## E2E report template (Markdown)\n\nThe following structure can be used when outputting or archiving test reports to facilitate review:\n\n```markdown\n# E2E test report\n\n**Date:** YYYY-MM-DD HH:mm\n**Time taken:** X minutes Y seconds\n**Result:** Pass/Fail\n\n## Summary\n\n- Total X | Pass Y | Fail Z | Unstable/Skip Description\n\n## Failed use case\n\n### Use case name\n\n- **File:** `tests/e2e/xxx.spec.ts:line number`\n- **ERROR:** Brief assertion or timeout information\n- **Screenshot/Trace:** path or artifact name\n- **Suggested fix:** Executable conclusion\n\n## Product\n\n- HTML report: `playwright-report/index.html`\n- Trace / Video / Screenshot: CI artifact or local `test-results/`\n```"},{"path":"references/e2e-special-scenarios.md","content":"#E2E Special Scenario\n\n## Web3/Wallet Injection (Playwright)\n\nInject mock through `context.addInitScript` before **`page.goto` to avoid relying on real plugins:\n\n```typescript\ntest(\"Connect wallet\", async ({ page, context }) => {\n  await context.addInitScript(() => {\n    (window as unknown as { ethereum?: unknown }).ethereum = {\n      isMetaMask: true,\n      request: async ({ method }: { method: string }) => {\n        if (method === \"eth_requestAccounts\")\n          return [\"0x1234567890123456789012345678901234567890\"];\n        if (method === \"eth_chainId\") return \"0x1\";\n        return null;\n      },\n    };\n  });\n\n  await page.goto(\"/\");\n  await page.getByTestId(\"connect-wallet\").click();\n  await expect(page.getByTestId(\"wallet-address\")).toContainText(\"0x1234\");\n});\n```\n\nJust keep the chain ID, account list and business contract consistent.\n\n## Financial or high-risk operations\n\n- **It is prohibited** to perform real fund operations in a real production environment; use **staging, mock or `test.skip`**.\n- Assert **preview amount**, success status** and **key interface 200** before ending the use case, with sufficient timeout (such as on-chain confirmation scenario).\n\n```typescript\ntest(\"Order preview and success status\", async ({ page }) => {\n  test.skip(process.env.NODE_ENV === \"production\", \"The production environment skips real transactions\");\n\n  await page.goto(\"/markets/demo\");\n  await page.getByTestId(\"position-yes\").click();\n  await page.getByTestId(\"trade-amount\").fill(\"1.0\");\n\n  const preview = page.getByTestId(\"trade-preview\");\n  await expect(preview).toContainText(\"1.0\");\n\n  await page.getByTestId(\"confirm-trade\").click();\n  await page.waitForResponse(\n    (resp) => resp.url().includes(\"/api/trade\") && resp.status() === 200,\n    { timeout: 30_000 },\n  );\n  await expect(page.getByTestId(\"trade-success\")).toBeVisible();\n});\n```"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning Skill: E2E Testing Owner: bovinphang Summary: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-26T14:59:46.492Z | u","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1342,"uniquenessScore":45,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T16:53:42.032Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T16:53:42.032Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T21:43:21.979Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}