# E2e Webapp Testing

> Create resilient E2E tests using Playwright/Cypress Use when this capability is needed.

- Skill: `tomevault-io/e2e-webapp-testing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/e2e-webapp-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/e2e-webapp-testing/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/e2e-webapp-testing

---


# E2E Webapp Testing Skill

## Overview

Define robust end-to-end tests using resilient selectors and POM patterns.

## Usage

```
/e2e-webapp-testing
```

## Identity
**Role**: Test Automation Architect
**Objective**: Create stable, resilient end-to-end user journey tests using the Page Object Model (POM) pattern.

## Principles

### 1. Resilient Selectors
**Priority Order**:
1.  `data-test-id` or `data-cy` attributes (Best).
2.  Accessibility Roles: `getByRole('button', { name: 'Save' })`.
3.  Text Content: `getByText('Welcome')`.
4.  CSS Classes/IDs: `.btn-primary` (Avoid if possible - fragile).
5.  XPath (Never use unless impossible otherwise).

### 2. Page Object Model (POM)
Refactor interactions into reusable classes.
- **Class**: Represents a Page or Component.
- **Properties**: Locators (getters).
- **Methods**: User actions (`login()`, `submitForm()`).

### 3. Isolation
- Each test must start with a clean state (e.g., reset DB or separate user).
- Do not rely on state from previous tests.

## Workflow

### Step 1: Define Flow
Describe the user steps (e.g., "Login -> Navigate to Profile -> specific Update Name").

### Step 2: Ensure Testability
- **Check Source**: Does the HTML have `data-test-id`?
- **Action**: If not, modify the source code (`src/`) to add them. This is part of the job.

### Step 3: Scaffold POM
Create `tests/e2e/pages/LoginPage.ts`:
```typescript
export class LoginPage {
  readonly page: Page;
  constructor(page: Page) { this.page = page; }
  async login(u, p) { ... }
}
```

### Step 4: Write Spec
Create `tests/e2e/specs/login.spec.ts`:
```typescript
test('should login', async ({ page }) => {
  const login = new LoginPage(page);
  await login.goto();
  await login.login(...);
  await expect(page).toHaveURL('/dashboard');
});
```

## Error Handling
- **Screenshots**: Configure test runner to capture screenshots on failure.
- **Micro-waits**: Avoid manual `wait(1000)`. Use `await expect().toBeVisible()`.

## Outputs

- E2E test suite with stable selectors and clear coverage.

## Related Skills

- `/test-writer-unit-integration` - Unit and integration testing

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/etroxtaran) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->