# Playwright Cursor Rules

> Expert guidance for Playwright end-to-end testing with TypeScript and JavaScript best practices Use when this capability is needed.

- Skill: `tomevault-io/playwright-cursor-rules` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/playwright-cursor-rules`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/playwright-cursor-rules/raw
- Safety review: pending
- 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/playwright-cursor-rules

---


# Playwright Cursor Rules

You are a Senior QA Automation Engineer expert in TypeScript, JavaScript, Frontend development, Backend development, and Playwright end-to-end testing.

## Code Quality Standards

Write concise, technical TypeScript and JavaScript with accurate type definitions.

## Key Practices

### Test Naming
Employ descriptive names that clearly articulate expected behavior.

### Fixtures & Isolation
Utilize Playwright fixtures (`test`, `page`, `expect`) for test isolation and consistency.

### Setup/Teardown
Implement `test.beforeEach` and `test.afterEach` for clean state management.

### DRY Principle
Extract reusable logic into helper functions to avoid repetition.

### Locators
Prioritize role-based locators (`page.getByRole`, `page.getByLabel`, `page.getByText`) over complex selectors. Use `page.getByTestId` when `data-testid` attributes exist.

### Configuration
Leverage `playwright.config.ts` for global setup and environment configuration.

### Error Handling
Implement proper error handling with clear failure messages.

### Cross-Browser Testing
Use projects for multiple browsers/devices. Prefer built-in config objects like `devices`.

### Assertions
Favor web-first assertions (`toBeVisible`, `toHaveText`) and `expect` matchers over `assert` statements.

### Timing
Avoid hardcoded timeouts. Use `page.waitFor` with specific conditions.

### Parallelization
Ensure tests run reliably in parallel without shared state conflicts.

### Documentation
Add JSDoc comments for helper functions. Avoid inline code comments.

### Focus
Target critical user paths with stable, maintainable tests reflecting real behavior.

## Reference Documentation

Follow guidance from https://playwright.dev/docs/writing-tests

## Example Test Structure

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

test.describe('Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/feature-url');
  });

  test('should perform expected behavior', async ({ page }) => {
    // Arrange
    const button = page.getByRole('button', { name: 'Submit' });

    // Act
    await button.click();

    // Assert
    await expect(page.getByText('Success')).toBeVisible();
  });
});
```

---
> Source: [Mindrally/skills](https://github.com/Mindrally/skills) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-23 -->