Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 20 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -267,9 +267,22 @@ After each command, playwright-cli provides a snapshot of the current browser st
[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)
```

You can also take a snapshot on demand using `playwright-cli snapshot` command.
You can also take a snapshot on demand using `playwright-cli snapshot` command. All the options below can be combined as needed.

If `--filename` is not provided, a new snapshot file is created with a timestamp. Default to automatic file naming, use `--filename=` when artifact is a part of the workflow result.
```bash
# default - save to a file with timestamp-based name
playwright-cli snapshot

# save to file, use when snapshot is a part of the workflow result
playwright-cli snapshot --filename=after-click.yaml

# snapshot an element instead of the whole page
playwright-cli snapshot "#main"

# limit snapshot depth for efficiency, take a partial snapshot afterwards
playwright-cli snapshot --depth=4
playwright-cli snapshot e34
```

### Targeting elements

Expand All @@ -283,17 +296,17 @@ playwright-cli snapshot
playwright-cli click e15
```

You can also use css or role selectors, for example when explicitly asked for it.
You can also use css selectors or Playwright locators.

```bash
# css selector
playwright-cli click "#main > button.submit"

# role selector
playwright-cli click "role=button[name=Submit]"
# role locator
playwright-cli click "getByRole('button', { name: 'Submit' })"

# chaining css and role selectors
playwright-cli click "#footer >> role=button[name=Submit]"
# test id locator
playwright-cli click "getByTestId('submit-button')"
```

### Sessions
Expand Down
26 changes: 13 additions & 13 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@
"test": "playwright test"
},
"devDependencies": {
"@playwright/test": "1.59.0-alpha-1773608981000",
"@playwright/test": "1.59.0-alpha-1774661115000",
"@types/node": "^25.2.1"
},
"dependencies": {
"minimist": "^1.2.5",
"playwright": "1.59.0-alpha-1773608981000"
"playwright": "1.59.0-alpha-1774661115000"
},
"bin": {
"playwright-cli": "playwright-cli.js"
Expand Down
39 changes: 29 additions & 10 deletions skills/playwright-cli/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,20 @@ playwright-cli goto https://playwright.dev
playwright-cli type "search query"
playwright-cli click e3
playwright-cli dblclick e7
playwright-cli fill e5 "user@example.com"
# --submit presses Enter after filling the element
playwright-cli fill e5 "user@example.com" --submit
playwright-cli drag e2 e8
playwright-cli hover e4
playwright-cli select e9 "option-value"
playwright-cli upload ./document.pdf
playwright-cli check e12
playwright-cli uncheck e12
playwright-cli snapshot
playwright-cli snapshot --filename=after-click.yaml
playwright-cli eval "document.title"
playwright-cli eval "el => el.textContent" e5
# get element id, class, or any attribute not visible in the snapshot
playwright-cli eval "el => el.id" e5
playwright-cli eval "el => el.getAttribute('data-testid')" e5
playwright-cli dialog-accept
playwright-cli dialog-accept "confirmation text"
playwright-cli dialog-dismiss
Expand Down Expand Up @@ -149,10 +152,12 @@ playwright-cli console
playwright-cli console warning
playwright-cli network
playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"
playwright-cli run-code --filename=script.js
playwright-cli tracing-start
playwright-cli tracing-stop
playwright-cli video-start
playwright-cli video-stop video.webm
playwright-cli video-chapter "Chapter Title" --description="Details" --duration=2000
playwright-cli video-stop --filename=video.webm
```

## Open parameters
Expand Down Expand Up @@ -192,9 +197,22 @@ After each command, playwright-cli provides a snapshot of the current browser st
[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)
```

You can also take a snapshot on demand using `playwright-cli snapshot` command.
You can also take a snapshot on demand using `playwright-cli snapshot` command. All the options below can be combined as needed.

```bash
# default - save to a file with timestamp-based name
playwright-cli snapshot

# save to file, use when snapshot is a part of the workflow result
playwright-cli snapshot --filename=after-click.yaml

# snapshot an element instead of the whole page
playwright-cli snapshot "#main"

If `--filename` is not provided, a new snapshot file is created with a timestamp. Default to automatic file naming, use `--filename=` when artifact is a part of the workflow result.
# limit snapshot depth for efficiency, take a partial snapshot afterwards
playwright-cli snapshot --depth=4
playwright-cli snapshot e34
```

## Targeting elements

Expand All @@ -208,17 +226,17 @@ playwright-cli snapshot
playwright-cli click e15
```

You can also use css or role selectors, for example when explicitly asked for it.
You can also use css selectors or Playwright locators.

```bash
# css selector
playwright-cli click "#main > button.submit"

# role selector
playwright-cli click "role=button[name=Submit]"
# role locator
playwright-cli click "getByRole('button', { name: 'Submit' })"

# chaining css and role selectors
playwright-cli click "#footer >> role=button[name=Submit]"
# test id
playwright-cli click "getByTestId('submit-button')"
```

## Browser Sessions
Expand Down Expand Up @@ -307,3 +325,4 @@ playwright-cli close
* **Test generation** [references/test-generation.md](references/test-generation.md)
* **Tracing** [references/tracing.md](references/tracing.md)
* **Video recording** [references/video-recording.md](references/video-recording.md)
* **Inspecting element attributes** [references/element-attributes.md](references/element-attributes.md)
23 changes: 23 additions & 0 deletions skills/playwright-cli/references/element-attributes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Inspecting Element Attributes

When the snapshot doesn't show an element's `id`, `class`, `data-*` attributes, or other DOM properties, use `eval` to inspect them.

## Examples

```bash
playwright-cli snapshot
# snapshot shows a button as e7 but doesn't reveal its id or data attributes

# get the element's id
playwright-cli eval "el => el.id" e7

# get all CSS classes
playwright-cli eval "el => el.className" e7

# get a specific attribute
playwright-cli eval "el => el.getAttribute('data-testid')" e7
playwright-cli eval "el => el.getAttribute('aria-label')" e7

# get a computed style property
playwright-cli eval "el => getComputedStyle(el).display" e7
```
20 changes: 12 additions & 8 deletions skills/playwright-cli/references/playwright-tests.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,28 @@ PLAYWRIGHT_HTML_OPEN=never npm run special-test-command

# Debugging Playwright Tests

To debug a failing test, run it with Playwright as usual, but set `PWPAUSE=cli` environment variable. This command will pause the test at the point of failure, and print the debugging instructions.
To debug a failing Playwright test, run it with `--debug=cli` option. This command will pause the test at the start and print the debugging instructions.

**IMPORTANT**: run the command in the background and check the output until "Debugging Instructions" is printed.

Once instructions are printed, use `playwright-cli` to explore the page. Debugging instructions include a browser name that should be used in `playwright-cli` to attach to the page under test.
Once instructions containing a session name are printed, use `playwright-cli` to attach the session and explore the page.

```bash
# Run the test
PLAYWRIGHT_HTML_OPEN=never PWPAUSE=cli npx playwright test
PLAYWRIGHT_HTML_OPEN=never npx playwright test --debug=cli
# ...
# ... debugging instructions for "tw-abcdef" session ...
# ...

# Explore the page and interact if needed
playwright-cli --session=test open --attach=test-worker-abcdef
playwright-cli --session=test snapshot
playwright-cli --session=test click e14
# Attach to the test
playwright-cli attach tw-abcdef
```

Keep the test running in the background while you explore and look for a fix. After fixing the test, stop the background test run.
Keep the test running in the background while you explore and look for a fix.
The test is paused at the start, so you should step over or pause at a particular location
where the problem is most likely to be.

Every action you perform with `playwright-cli` generates corresponding Playwright TypeScript code.
This code appears in the output and can be copied directly into the test. Most of the time, a specific locator or an expectation should be updated, but it could also be a bug in the app. Use your judgement.

After fixing the test, stop the background test run. Rerun to check that test passes.
Loading
Loading