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:

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:

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