DDEV Playwright Cli

Overview

This add-on integrates Playwright CLI into your DDEV project, so you can drive a browser from inside the web container — and share a single, cached browser install with other Playwright-based tooling such as Storybook/Vitest browser tests.

Installation

ddev add-on get FreelyGive/ddev-playwright-cli
ddev restart

After installation, make sure to commit the .ddev directory to version control.

Usage

Run any playwright-cli command through ddev playwright-cli …; it executes in the web container.

Command	Description
ddev playwright-cli open <url>	Open a URL and print a page snapshot.
ddev playwright-cli config-print	Print the resolved Playwright CLI configuration.
ddev playwright-cli install-browser <name>	Install an additional browser into the shared cache.

Because it runs inside the container, it trusts DDEV's mkcert CA, so you can open your project's own https://<project>.ddev.site/ URLs.

What the add-on does

On each ddev start, the add-on:

• adds @playwright/cli to your project's package.json (if not already declared) and installs it;
• installs the Chromium browser into DDEV's shared browser cache (/mnt/ddev-global-cache/playwright-browsers);
• installs the Playwright CLI Claude skills into .claude/skills/;
• adds DDEV's mkcert CA to the browser's trust store so it can open https://*.ddev.site URLs.

Commit the resulting changes — the .ddev/ directory, the package.json/lockfile updates, and .claude/skills/ — to version control.

Sharing a browser version with other tools (Storybook/Vitest)

The add-on sets PLAYWRIGHT_BROWSERS_PATH=/mnt/ddev-global-cache/playwright-browsers, DDEV's persistent global cache, so every Playwright-based tool in the project downloads and reuses browsers from one shared location instead of each fetching its own.

Sharing only works if the tools agree on a browser revision, which is tied to the playwright-core version. Two tools reuse the same browser only when they resolve to the same playwright-core. To guarantee that, pin a single playwright-core across @playwright/cli and your test tooling — for example with npm overrides (or resolutions for pnpm/yarn) in package.json:

{
  "overrides": {
    "playwright-core": "1.x.y"
  }
}

With a single resolved playwright-core, the add-on's install-browser chromium populates the cache once and your other tools (e.g. @vitest/browser-playwright driving Storybook stories) reuse it rather than downloading a second copy.

Credits

Contributed and maintained by @FreelyGive