Back to Skills

e2e-testing

verified

End-to-end testing with Playwright 1.57+. Use when testing critical user journeys, browser automation, cross-browser testing, AI-assisted test generation, or validating complete application flows.

View on GitHub

Marketplace

orchestkit

yonatangross/orchestkit

Plugin

ork

development

Repository

yonatangross/orchestkit
33stars

plugins/ork/skills/e2e-testing/SKILL.md

Last Verified

January 25, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/yonatangross/orchestkit/blob/main/plugins/ork/skills/e2e-testing/SKILL.md -a claude-code --skill e2e-testing

Installation paths:

Claude
.claude/skills/e2e-testing/
Powered by add-skill CLI

Instructions

# E2E Testing with Playwright 1.57+

Validate critical user journeys end-to-end with AI-assisted test generation.

## Quick Reference - Semantic Locators

```typescript
// ✅ PREFERRED: Role-based locators (most resilient)
await page.getByRole('button', { name: 'Add to cart' }).click();
await page.getByRole('link', { name: 'Checkout' }).click();

// ✅ GOOD: Label-based for form controls
await page.getByLabel('Email').fill('test@example.com');

// ✅ ACCEPTABLE: Test IDs for stable anchors
await page.getByTestId('checkout-button').click();

// ❌ AVOID: CSS selectors and XPath (fragile)
// await page.click('[data-testid="add-to-cart"]');
```

**Locator Priority:** `getByRole()` > `getByLabel()` > `getByPlaceholder()` > `getByTestId()`

## Basic Test

```typescript
import { test, expect } from '@playwright/test';

test('user can complete checkout', async ({ page }) => {
  await page.goto('/products');
  await page.getByRole('button', { name: 'Add to cart' }).click();
  await page.getByRole('link', { name: 'Checkout' }).click();
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByRole('button', { name: 'Submit' }).click();
  await expect(page.getByRole('heading', { name: 'Order confirmed' })).toBeVisible();
});
```

## AI Agents (1.57+ - NEW)

```bash
# Generate test plan
npx playwright agents planner --url http://localhost:3000/checkout

# Generate tests from plan
npx playwright agents generator --plan checkout-test-plan.md

# Auto-repair failing tests
npx playwright agents healer --test checkout.spec.ts
```

## New Features (1.57+)

```typescript
// Assert individual class names
await expect(page.locator('.card')).toContainClass('highlighted');

// Flaky test detection
export default defineConfig({
  failOnFlakyTests: true,
});

// IndexedDB storage state
await page.context().storageState({
  path: 'auth.json',
  indexedDB: true  // NEW
});
```

## Anti-Patterns (FORBIDDEN)

```typescript
// ❌ NEVER use CSS selectors for user interactions
await 

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
4787 chars