playwright

•

6155 months ago

Playwright end-to-end testing best practices for web applications, covering test design, locator strategies, and assertion patterns.

Quick Install

npxskills add mindrally/skills--skill playwright

Instructions

Playwright Testing Best Practices

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

Test Design Principles

Test Structure

Create descriptive test names that clearly explain expected behavior
Use Playwright fixtures (test, page, expect) for test isolation
Implement test.beforeEach and test.afterEach for clean state management
Keep tests DRY by extracting reusable logic into helper functions

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

test.describe('User Authentication', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('should login successfully with valid credentials', async ({ page }) => {
    await page.getByLabel('Email').fill('[email protected]');
    await page.getByLabel('Password').fill('password123');
    await page.getByRole('button', { name: 'Sign In' }).click();

    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
  });
});

Locator Strategy

Recommended Locators

page.getByRole() - Best for accessibility and user perspective
page.getByLabel() - For form inputs with labels
page.getByText() - For elements with visible text
page.getByTestId() - When data-testid attributes exist
page.getByPlaceholder() - For inputs with placeholder text

// Recommended
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Email address').fill('[email protected]');

// Avoid
await page.locator('.btn-primary').click();

Assertions and Waits

Web-First Assertions

Prefer web-first assertions that automatically wait and retry:

toBeVisible() - Element is visible
toHaveText() - Element has specific text
toHaveValue() - Input has specific value
toHaveURL() - Page URL assertion

// Recommended - web-first assertions
await expect(page.getByRole('alert')).toBeVisible();
await expect(page).toHaveURL('/dashboard');

// Avoid - hardcoded timeouts
await page.waitForTimeout(5000); // Never do this

Waiting Best Practices

Avoid hardcoded timeouts
Use page.waitForLoadState() for navigation
Use page.waitForResponse() for API calls

Configuration

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'mobile', use: { ...devices['iPhone 13'] } },
  ],
});

Best Practices

Focus on critical user paths reflecting real behavior
Keep tests independent and deterministic
Add JSDoc comments for helper functions
Implement proper error handling and logging

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885