drupal-playwright-test

Drupal Playwright Test

What It Is

This skill generates persistent Playwright test files (.spec.ts) that live in the repository. These are TypeScript files meant to run in CI or on the host machine.

Not to be confused with the playwright-testing skill, which uses Playwright MCP tools interactively for ad-hoc browser verification without creating files.

Skill	Purpose	Creates files	Execution
drupal-playwright-test	Persistent E2E tests in the repo	Yes (.spec.ts)	User runs on host
playwright-testing	Interactive ad-hoc verification	No	MCP tools directly

When to Use

• Visual regression (compare screenshots between deploys)
• Cross-browser tests (Chromium + Firefox + WebKit)
• Accessibility tests (axe-core)
• E2E flows in projects without Behat
• Smoke tests of the deployed site

When NOT to Use

• The project already uses Behat for E2E (use Behat for consistency)
• Logic tests (use Kernel test)
• Simple forms without JS (use Functional test)
• Specific AJAX components (use FunctionalJavascript)
• Quick browser check or screenshot (use playwright-testing skill)

Prerequisites

Before generating tests, verify the project has Playwright configured:

ssh web test -f test/playwright/playwright.config.ts && echo "OK" || echo "NOT FOUND"

If not found, inform the user that Playwright needs to be set up on the host first. Do NOT attempt to install Playwright or DDEV add-ons from within the container. Playwright installs and RUNS on the HOST machine: you generate the test files; the USER runs npm install and npx playwright test on the host.

Directory Structure

test/playwright/
├── playwright.config.ts
├── tests/
│   ├── homepage.spec.ts
│   ├── article.spec.ts
│   └── accessibility.spec.ts
├── fixtures/
│   └── auth.ts
└── package.json

Configuration Reference -- playwright.config.ts

ALWAYS use HTTP, never HTTPS, in baseURL and all navigation — DDEV uses self-signed certificates that fail even with ignoreHTTPSErrors.