diff --git a/docs/testing/E2E_GUIDELINES.md b/docs/testing/E2E_GUIDELINES.md new file mode 100644 index 0000000..2b14387 --- /dev/null +++ b/docs/testing/E2E_GUIDELINES.md @@ -0,0 +1,7 @@ +# Playwright Browser E2E Testing Standards + +Our frontend functional execution flows are guarded via automated Playwright UI verification suites to intercept interface breaking changes. + +## Core Best Practices +* **Test Attribute Selectors:** Use explicit `data-testid` properties inside JSX code structures rather than styling classes to prevent UI refactoring breaks. +* **Deterministic Isolation:** Ensure testing targets interact against stable staging servers or mock environment routes (`/claim/test-token`) to prevent external ledger dependencies from destabilizing CI test performance. \ No newline at end of file diff --git a/frontend/e2e/claim-flow.spec.ts b/frontend/e2e/claim-flow.spec.ts new file mode 100644 index 0000000..c3671a2 --- /dev/null +++ b/frontend/e2e/claim-flow.spec.ts @@ -0,0 +1,30 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Issue #61/#138: Token Claim Flow E2E Happy Path Matrix', () => { + + test('should navigate through the entire token claim pipeline successfully', async ({ page }) => { + // 1. Visit the targeted claim landing page route + await page.goto('/claim/test-token'); + + // 2. Acceptance Criteria: Verify the token status indicator is present and active + const statusBadge = page.locator('[data-testid="claim-status-available"]'); + await expect(statusBadge).toBeVisible(); + await expect(statusBadge).text().toContain('Available'); + + // 3. Fill in a valid destination wallet parameter + const walletInput = page.locator('input[name="walletAddress"]'); + await expect(walletInput).toBeVisible(); + await walletInput.fill('GBALBEDO76V6K67X4PZ72NC556XU54K75QNZP2Z5F4O7V6Y456QWERTY'); + + // 4. Submit the claim form + const submitButton = page.locator('button[type="submit"]'); + await submitButton.click(); + + // 5. Assert the loading transition wraps and displays the success screen elements + const successScreen = page.locator('[data-testid="claim-success-container"]'); + await expect(successScreen).toBeVisible({ timeout: 10000 }); // Graceful allowance for mock pipeline propagation lag + + const successHeader = page.locator('h2'); + await expect(successHeader).text().toContain('Claim Submitted Successfully!'); + }); +}); \ No newline at end of file diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts new file mode 100644 index 0000000..e69de29