# E2E and Component Testing

> Best practices for End-to-End testing with Playwright and Component testing.

- Skill: `j4flmao/e2e-and-component-testing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add j4flmao/e2e-and-component-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/j4flmao/e2e-and-component-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: j4flmao (https://skillmd.com/u/j4flmao)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/j4flmao/e2e-and-component-testing

---


# E2E & Component Testing (Playwright)

Use **Playwright** for both robust end-to-end testing across modern engines and component testing.

## E2E Testing Snippet
```typescript
import { test, expect } from '@playwright/test';

test('user login flow', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[data-testid="username-input"]', 'testuser');
  await page.fill('[data-testid="password-input"]', 'password');
  await page.click('[data-testid="login-button"]');
  await expect(page.locator('.dashboard')).toBeVisible();
});
```

## Component Testing Snippet
```typescript
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './Button';

test('renders correctly', async ({ mount }) => {
  const component = await mount(<Button>Click me</Button>);
  await expect(component).toContainText('Click me');
  await component.click();
});
```

## Testing Strategy
```mermaid
%%{init: {"theme": "default", "flowchart": {"useMaxWidth": true}}}%%
graph TD
    A[Test Suite] --> B(E2E Tests)
    A --> C(Component Tests)
    B --> D[Browser Farm]
    C --> E[Headless Runner]
```