All skills
microsoft avatar

/playwright-dev

@08a37f2
by microsoftmicrosoft/playwright97k stars
6,529

Explains how to develop Playwright - add APIs, MCP tools, CLI commands, and vendor dependencies.

Use this Skill: https://skilld.dev/gh/microsoft/playwright/playwright-dev

This session only. Nothing lands on disk.

bisect-published-versions.md

≈1k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Bisecting a Regression Across Published Playwright Versions

When a user reports a regression between two published Playwright versions (e.g. "works in 1.58, broken in 1.59.1"), reproduce both side by side from npm — do not try to bisect against the monorepo source. Reading the compiled JS in node_modules/playwright/lib/** is faster and avoids build/branch confusion.

Setup (two side-by-side installs)

Use ~/tmp/<version-tag>/ (NOT /tmp/) — the user's shell sessions live in ~/tmp.

mkdir -p ~/tmp/<good>/tests ~/tmp/<bad>/tests

# Skip `npm init playwright@latest` — it's interactive and the scaffold
# pulls in 3 projects (chromium/firefox/webkit) which produces 6 test runs
# from a single spec and is confusing. Do this instead:
( cd ~/tmp/<good> && npm init -y && npm install @playwright/test@<good-ver> && npx playwright install chromium)
( cd ~/tmp/<bad>  && npm init -y && npm install @playwright/test@<bad-ver> && npx playwright install chromium )

Write a minimal playwright.config.ts with a single chromium project — the default scaffold's 3-project config will run the same spec 6 times and obscure output:

import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
  testDir: './tests',
  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
});

Drop the repro spec (and any helper files) into both folders identically. Run:

( cd ~/tmp/<good> && npx playwright test )
( cd ~/tmp/<bad>  && npx playwright test )

Confirm the difference is real before investigating.

Investigating the diff in node_modules

The compiled JS in node_modules/playwright-core/lib/ and node_modules/playwright/lib/ is the source of truth for what shipped.

In recent versions of Playwright these are bundled, so you can't compare on per-file basis. You can extract files from bundles via grep though and compare.

Once you've found a candidate function, diff it across the two versions. Patches are usually 1–3 lines.

Verifying the hypothesis

Edit the compiled JS in ~/tmp/<bad>/node_modules/playwright/lib/... directly and re-run the test. No build step is needed — Node loads the JS as-is. Revert when done (or just delete the folder).

For stack-trace bugs in particular, a console.log(new Error().stack) inserted at the capture site (e.g. inside expect.js's captureRawStack) instantly shows whether the issue is microtask-boundary related vs. a stack-filter regression vs. something else.

Reporting

When the root cause is confirmed:

  1. Quote the offending lines from node_modules/.../lib/... of the bad version, with file path.
  2. Show the equivalent code from the good version for contrast.
  3. Explain why the change breaks the user's case (don't just point at the diff).
  4. Propose and verify a minimal fix by patching the bad install in place.

Post the writeup as a comment on the original issue with gh issue comment <number> --repo microsoft/playwright --body "$(cat <<'EOF' ... EOF)".

Pitfalls

  • Don't run npm init playwright@latest — it's interactive and --quiet does not skip the prompts. npm init -y + npm install @playwright/test@<ver> is faster and deterministic.
  • Don't use the scaffold's default config — the 3 browser projects multiply test runs by 3 and confuse the output. One chromium project is enough for 99% of repros.
  • Don't cd between commands in a single Bash call without && — the shell cwd resets between tool invocations.
  • /tmp/ is not ~/tmp/ — pick one and stay consistent. The user's interactive shells default to ~/tmp/, so prefer that.
  • Don't rm -rf an existing ~/tmp/<ver>/ without checking — it may be the user's prior work. Edit in place instead.
  • Don't try to map the bug to monorepo source first. The shipped JS is what the user is running; source may have already been refactored or fixed on main. Investigate node_modules/ first, then map the fix back to source only when proposing the upstream patch.

Source: SKILL.md on GitHub

1 warning16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides a detailed set of development guides for the Playwright project, covering API implementation, tool creation, and architectural overview. It includes instructions for standard development tasks such as building, testing, and dependency management. While the skill describes the creation of tools that interact with untrusted agent input, it emphasizes the use of validation schemas to manage these boundaries.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    2/5 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at 08a37f2. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 4 months ago
  • Testing
  • CLI
  • MCP
  • playwright
  • browser-automation
  • api-development
  • vendor-dependencies
  • webkit
  • monorepo

README badge

README badge for microsoft/playwright/playwright-dev

Explains how to extend Playwright itself — adding client/server APIs, MCP tools, CLI commands, and vendor dependencies. Targets contributors to the Playwright monorepo, not end users building test suites.

Generated from the current SKILL.md.

What does this skill help me do?
This skill explains how to develop Playwright itself — adding APIs, MCP tools, CLI commands, and managing vendor dependencies. It's for contributors working on the Playwright codebase, not for using Playwright as a testing library.
Does this cover the monorepo structure and build commands?
Yes. It references CLAUDE.md for monorepo structure, build/test/lint commands, and coding conventions.
Can I learn how to add new APIs or MCP tools to Playwright?
Yes. The skill includes detailed guides on adding and modifying APIs, implementing client/server logic, and adding MCP tools and CLI commands.
Does this cover WebView or WebKit backend development?
Yes. It includes guides for WebView (iOS Safari) backend work and updating WebKit Safari versions.
Is this for using Playwright as a test framework, or for developing Playwright itself?
This is for developing Playwright itself. If you want to write tests with Playwright, you need a different resource.

Generated from the current SKILL.md. These answers refresh after source changes.