Playwright Testing

End-to-end testing with Playwright for the Oh My Brand! WordPress FSE theme.

When to Use

• Testing block frontend behavior in real browsers
• Accessibility compliance testing
• Visual regression testing
• Block editor insertion and configuration workflows

Configuration

See playwright.config.ts for the full configuration template.

Browser Projects

Test Templates

Frontend Block Tests

Accessibility Tests

Visual Testing

Block Editor Tests

Common Patterns

Page Navigation

test.beforeEach(async ({ page }) => {
    await page.goto('/gallery-page/');
});

Element Selection

// By class
const gallery = page.locator('.wp-block-theme-oh-my-brand-gallery');

// By data attribute
const button = page.locator('[data-gallery-next]');

// By role
const dialog = page.locator('dialog');

Assertions

await expect(element).toBeVisible();
await expect(element).toBeDisabled();
await expect(element).toHaveAttribute('aria-label');
await expect(element).toHaveScreenshot('name.png');

Wait Patterns

// Animation completion
await page.waitForTimeout(350);

// Element state
await page.waitForSelector('.editor-styles-wrapper');

Accessibility with Axe

import AxeBuilder from '@axe-core/playwright';

const results = await new AxeBuilder({ page })
    .include('.wp-block-theme-oh-my-brand-gallery')
    .withTags(['wcag2a', 'wcag2aa'])
    .analyze();

expect(results.violations).toEqual([]);

Running Tests

Related Skills

• vitest-testing - Unit testing
• phpunit-testing - PHP unit testing
• html-standards - Accessibility requirements
• native-block-development - Block development

References

• Playwright Documentation
• Axe-Core Playwright
• WordPress E2E Testing