From e53555a324d00fdac3476e6ed84d2c960780c110 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Fri, 24 Apr 2026 15:58:43 -0700 Subject: [PATCH] chore: roll Playwright to 1.60.0-alpha-2026-04-24 --- README.md | 12 +++++ package-lock.json | 26 +++++----- package.json | 4 +- skills/playwright-cli/SKILL.md | 33 ++++++++++++ .../playwright-cli/references/running-code.md | 10 ++++ .../references/test-generation.md | 52 +++++++++++++++++-- 6 files changed, 119 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 181185d..b651c4f 100644 --- a/README.md +++ b/README.md @@ -139,6 +139,8 @@ playwright-cli dblclick [button] # perform double click on a web page playwright-cli fill # fill text into editable element playwright-cli fill --submit # fill and press Enter playwright-cli drag # perform drag and drop between two elements +playwright-cli drop --path= # drop files onto an element (from outside the page) +playwright-cli drop --data="k=v" # drop data onto an element playwright-cli hover # hover over element on page playwright-cli select # select an option in a dropdown playwright-cli upload # upload one or multiple files @@ -245,6 +247,13 @@ playwright-cli tracing-stop # stop trace recording playwright-cli video-start [filename] # start video recording playwright-cli video-chapter # add a chapter marker to the video playwright-cli video-stop # stop video recording +playwright-cli show # open the visual dashboard +playwright-cli show --annotate # open dashboard and prompt user for input +playwright-cli generate-locator <ref> # generate a playwright locator for an element +playwright-cli highlight <ref> # show a persistent highlight overlay +playwright-cli highlight <ref> --style= # highlight with a custom CSS style +playwright-cli highlight <ref> --hide # hide highlight on a specific element +playwright-cli highlight --hide # hide all page highlights ``` ### Open parameters @@ -289,6 +298,9 @@ playwright-cli snapshot "#main" # limit snapshot depth for efficiency, take a partial snapshot afterwards playwright-cli snapshot --depth=4 playwright-cli snapshot e34 + +# include each element's bounding box as [box=x,y,width,height] +playwright-cli snapshot --boxes ``` ### Targeting elements diff --git a/package-lock.json b/package-lock.json index 6f4f3fa..8a82630 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,13 +9,13 @@ "version": "0.1.8", "license": "Apache-2.0", "dependencies": { - "playwright": "1.60.0-alpha-2026-04-14" + "playwright": "1.60.0-alpha-2026-04-24" }, "bin": { "playwright-cli": "playwright-cli.js" }, "devDependencies": { - "@playwright/test": "1.60.0-alpha-2026-04-14", + "@playwright/test": "1.60.0-alpha-2026-04-24", "@types/node": "^25.2.1" }, "engines": { @@ -23,13 +23,13 @@ } }, "node_modules/@playwright/test": { - "version": "1.60.0-alpha-2026-04-14", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0-alpha-2026-04-14.tgz", - "integrity": "sha512-pUgrMj7b+Fq/lfuja6Gce3XObUfgwKzhe9tGBVmMOKC2sfxVulzKzMEBwYccV7ccK2F+xdXraSJ6+Nq17G8+ug==", + "version": "1.60.0-alpha-2026-04-24", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0-alpha-2026-04-24.tgz", + "integrity": "sha512-wabVVb3guSb1/D7ECR6R3oyGA805ZRxPJ4rKp7Ljpnv7Kr4OhP4hqb/ovwTG8tI+Ux2PmjGXModLH0+zkfoBDA==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright": "1.60.0-alpha-2026-04-14" + "playwright": "1.60.0-alpha-2026-04-24" }, "bin": { "playwright": "cli.js" @@ -63,12 +63,12 @@ } }, "node_modules/playwright": { - "version": "1.60.0-alpha-2026-04-14", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0-alpha-2026-04-14.tgz", - "integrity": "sha512-wrYNgIOWpw/vaC4TpFHx9mVYF7kM6bYyRbStIHfxfqHDZvj1rNcYKSiIBNSUA9qm4bye4PvPEDSpe3RqjYFX6A==", + "version": "1.60.0-alpha-2026-04-24", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0-alpha-2026-04-24.tgz", + "integrity": "sha512-9N912tAUJ1vyHpxsmJHP+Taexi4ZMDluPx0H4uON+PYgCSOIKOtdkkDAZo1L8wsRw3ACyCWa2VZ1Ja9VsuXSXQ==", "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.60.0-alpha-2026-04-14" + "playwright-core": "1.60.0-alpha-2026-04-24" }, "bin": { "playwright": "cli.js" @@ -81,9 +81,9 @@ } }, "node_modules/playwright-core": { - "version": "1.60.0-alpha-2026-04-14", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0-alpha-2026-04-14.tgz", - "integrity": "sha512-Wkuhxvhg7YnJXJo+UomP4XlOhdH+AL2QdzJyLuHzqKEIxFkKqtSKF5TTfLt5gyB0UhqEO6knMpr5hULo3W6OEw==", + "version": "1.60.0-alpha-2026-04-24", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0-alpha-2026-04-24.tgz", + "integrity": "sha512-sp2lxbvT8MLbjicQl39Op1db8W/IYHwtWfvpikjplcV9hKQaYUbqDoha0tISHjZAQDSPJqTaREmv7uKKgA0uUg==", "license": "Apache-2.0", "bin": { "playwright-core": "cli.js" diff --git a/package.json b/package.json index 19835d3..04ea5b8 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,11 @@ "test": "playwright test" }, "devDependencies": { - "@playwright/test": "1.60.0-alpha-2026-04-14", + "@playwright/test": "1.60.0-alpha-2026-04-24", "@types/node": "^25.2.1" }, "dependencies": { - "playwright": "1.60.0-alpha-2026-04-14" + "playwright": "1.60.0-alpha-2026-04-24" }, "bin": { "playwright-cli": "playwright-cli.js" diff --git a/skills/playwright-cli/SKILL.md b/skills/playwright-cli/SKILL.md index f648e92..9e70ca9 100644 --- a/skills/playwright-cli/SKILL.md +++ b/skills/playwright-cli/SKILL.md @@ -38,6 +38,9 @@ playwright-cli dblclick e7 # --submit presses Enter after filling the element playwright-cli fill e5 "user@example.com" --submit playwright-cli drag e2 e8 +# drop files or data onto an element (from outside the page) +playwright-cli drop e4 --path=./image.png +playwright-cli drop e4 --data="text/plain=hello world" playwright-cli hover e4 playwright-cli select e9 "option-value" playwright-cli upload ./document.pdf @@ -158,6 +161,19 @@ playwright-cli tracing-stop playwright-cli video-start video.webm playwright-cli video-chapter "Chapter Title" --description="Details" --duration=2000 playwright-cli video-stop + +# launch the dashboard with annotation prompt to ask the user for input +playwright-cli show --annotate + +# generate a Playwright locator for an element from its ref or selector +playwright-cli generate-locator e5 --raw + +# show a persistent highlight overlay for an element, optionally with a custom style +playwright-cli highlight e5 +playwright-cli highlight e5 --style="outline: 3px dashed red" +# hide a single element highlight, or all page highlights when no target is given +playwright-cli highlight e5 --hide +playwright-cli highlight --hide ``` ## Raw output @@ -175,6 +191,11 @@ TOKEN=$(playwright-cli --raw cookie-get session_id) playwright-cli --raw localstorage-get theme ``` +For structured output wrapping every reply as JSON, pass --json +```bash +playwright-cli list --json +``` + ## Open parameters ```bash # Use specific browser when creating session @@ -235,6 +256,9 @@ playwright-cli snapshot "#main" # limit snapshot depth for efficiency, take a partial snapshot afterwards playwright-cli snapshot --depth=4 playwright-cli snapshot e34 + +# include each element's bounding box as [box=x,y,width,height] +playwright-cli snapshot --boxes ``` ## Targeting elements @@ -338,6 +362,15 @@ playwright-cli tracing-stop playwright-cli close ``` +## Example: Interactive session + +Ask the user to annotate the UI. User can provide contextual tasks or ask contextual questions using annotations: + +```bash +playwright-cli open https://example.com +playwright-cli show --annotate +``` + ## Specific tasks * **Running and Debugging Playwright tests** [references/playwright-tests.md](references/playwright-tests.md) diff --git a/skills/playwright-cli/references/running-code.md b/skills/playwright-cli/references/running-code.md index 8b35e9a..98b541f 100644 --- a/skills/playwright-cli/references/running-code.md +++ b/skills/playwright-cli/references/running-code.md @@ -11,6 +11,16 @@ playwright-cli run-code "async page => { }" ``` +You can also load the function from a file: + +```bash +playwright-cli run-code --filename=./my-script.js +``` + + +The code must be a single function expression, it is wrapped in `(...)` and evaluated. +import/export/require syntax is not supported. + ## Geolocation ```bash diff --git a/skills/playwright-cli/references/test-generation.md b/skills/playwright-cli/references/test-generation.md index 7a09df3..a045c55 100644 --- a/skills/playwright-cli/references/test-generation.md +++ b/skills/playwright-cli/references/test-generation.md @@ -77,12 +77,58 @@ playwright-cli click e5 ### 3. Add Assertions Manually -Generated code captures actions but not assertions. Add expectations in your test: +Generated code captures actions but not assertions. Add expectations in your test using one of the recommended matchers: + +- `toBeVisible()` — element is rendered and visible +- `toHaveText(text)` — element text content matches +- `toHaveValue(value) / toBeEmpty()` — input/select value matches +- `toBeChecked() / toBeUnchecked()` — checkbox state matches +- `toMatchAriaSnapshot(snapshot)` — page (or locator) matches a partial accessibility snapshot + +Use `playwright-cli generate-locator <target>` to produce the locator expression for the assertion, and the snapshot/eval commands to capture the expected value. + +When asserting text content, make sure that generated locator does not contain text from the element itself. `getByTestId()` or `getByLabel()` usually work well with asserting text. When locator is text-based, prefer `toBeVisible()` instead. + +Snapshot to be matched does not have to contain all the information - only capture what's necessary for the assertion. You can use regular expressions for unstable values. + +```bash +# Get a stable locator for an element ref to use in the assertion +playwright-cli --raw generate-locator e5 +# getByRole('button', { name: 'Submit' }) + +# Capture expected text content for toHaveText +playwright-cli --raw eval "el => el.textContent" e5 + +# Capture expected input value for toHaveValue/toBeEmpty +playwright-cli --raw eval "el => el.value" e5 + +# Capture expected aria snapshot for toMatchAriaSnapshot/toBeChecked +# (whole page, or use a ref to scope to a region) +playwright-cli --raw snapshot +playwright-cli --raw snapshot e5 +``` ```typescript // Generated action await page.getByRole('button', { name: 'Submit' }).click(); -// Manual assertion -await expect(page.getByText('Success')).toBeVisible(); +// Manual assertions using the outputs above: +await expect(page.getByRole('alert', { name: 'Success' })).toBeVisible(); +await expect(page.getByTestId('main-header')).toHaveText('Welcome, user'); +await expect(page.getByRole('textbox', { name: 'Email' })).toHaveValue('user@example.com'); +await expect(page.getByRole('checkbox', { name: 'Enable notifications' })).toBeChecked(); + +// toMatchAriaSnapshot on the whole page, finds a matching region +await expect(page).toMatchAriaSnapshot(` + - heading "Welcome, user" + - link /\\d+ new messages?/ + - button "Sign out" +`); + +// toMatchAriaSnapshot scoped to a region +await expect(page.getByRole('navigation')).toMatchAriaSnapshot(` + - link "Home" + - link /\\d+ new messages?/ + - link "Profile" +`); ```