playwright-cli

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Browser Automation with playwright-cli

使用playwright-cli实现浏览器自动化

Quick start

快速开始

bash
undefined
bash
undefined

open new browser

open new browser

playwright-cli open
playwright-cli open

navigate to a page

navigate to a page

playwright-cli goto https://playwright.dev
playwright-cli goto https://playwright.dev

interact with the page using refs from the snapshot

interact with the page using refs from the snapshot

playwright-cli click e15 playwright-cli type "page.click" playwright-cli press Enter
playwright-cli click e15 playwright-cli type "page.click" playwright-cli press Enter

take a screenshot (rarely used, as snapshot is more common)

take a screenshot (rarely used, as snapshot is more common)

playwright-cli screenshot
playwright-cli screenshot

close the browser

close the browser

playwright-cli close
undefined
playwright-cli close
undefined

Commands

命令列表

Core

核心命令

bash
playwright-cli open
bash
playwright-cli open

open and navigate right away

open and navigate right away

playwright-cli open https://example.com/ playwright-cli goto https://playwright.dev playwright-cli type "search query" playwright-cli click e3 playwright-cli dblclick e7
playwright-cli open https://example.com/ playwright-cli goto https://playwright.dev playwright-cli type "search query" playwright-cli click e3 playwright-cli dblclick e7

--submit presses Enter after filling the element

--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 eval "document.title" playwright-cli eval "el => el.textContent" e5
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 eval "document.title" playwright-cli eval "el => el.textContent" e5

get element id, class, or any attribute not visible in the snapshot

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 playwright-cli resize 1920 1080 playwright-cli close
undefined
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 playwright-cli resize 1920 1080 playwright-cli close
undefined

Navigation

导航命令

bash
playwright-cli go-back
playwright-cli go-forward
playwright-cli reload
bash
playwright-cli go-back
playwright-cli go-forward
playwright-cli reload

Keyboard

键盘命令

bash
playwright-cli press Enter
playwright-cli press ArrowDown
playwright-cli keydown Shift
playwright-cli keyup Shift
bash
playwright-cli press Enter
playwright-cli press ArrowDown
playwright-cli keydown Shift
playwright-cli keyup Shift

Mouse

鼠标命令

bash
playwright-cli mousemove 150 300
playwright-cli mousedown
playwright-cli mousedown right
playwright-cli mouseup
playwright-cli mouseup right
playwright-cli mousewheel 0 100
bash
playwright-cli mousemove 150 300
playwright-cli mousedown
playwright-cli mousedown right
playwright-cli mouseup
playwright-cli mouseup right
playwright-cli mousewheel 0 100

Save as

导出保存

bash
playwright-cli screenshot
playwright-cli screenshot e5
playwright-cli screenshot --filename=page.png
playwright-cli pdf --filename=page.pdf
bash
playwright-cli screenshot
playwright-cli screenshot e5
playwright-cli screenshot --filename=page.png
playwright-cli pdf --filename=page.pdf

Tabs

标签页操作

bash
playwright-cli tab-list
playwright-cli tab-new
playwright-cli tab-new https://example.com/page
playwright-cli tab-close
playwright-cli tab-close 2
playwright-cli tab-select 0
bash
playwright-cli tab-list
playwright-cli tab-new
playwright-cli tab-new https://example.com/page
playwright-cli tab-close
playwright-cli tab-close 2
playwright-cli tab-select 0

Storage

存储管理

bash
playwright-cli state-save
playwright-cli state-save auth.json
playwright-cli state-load auth.json
bash
playwright-cli state-save
playwright-cli state-save auth.json
playwright-cli state-load auth.json

Cookies

Cookies

playwright-cli cookie-list playwright-cli cookie-list --domain=example.com playwright-cli cookie-get session_id playwright-cli cookie-set session_id abc123 playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure playwright-cli cookie-delete session_id playwright-cli cookie-clear
playwright-cli cookie-list playwright-cli cookie-list --domain=example.com playwright-cli cookie-get session_id playwright-cli cookie-set session_id abc123 playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure playwright-cli cookie-delete session_id playwright-cli cookie-clear

LocalStorage

LocalStorage

playwright-cli localstorage-list playwright-cli localstorage-get theme playwright-cli localstorage-set theme dark playwright-cli localstorage-delete theme playwright-cli localstorage-clear
playwright-cli localstorage-list playwright-cli localstorage-get theme playwright-cli localstorage-set theme dark playwright-cli localstorage-delete theme playwright-cli localstorage-clear

SessionStorage

SessionStorage

playwright-cli sessionstorage-list playwright-cli sessionstorage-get step playwright-cli sessionstorage-set step 3 playwright-cli sessionstorage-delete step playwright-cli sessionstorage-clear
undefined
playwright-cli sessionstorage-list playwright-cli sessionstorage-get step playwright-cli sessionstorage-set step 3 playwright-cli sessionstorage-delete step playwright-cli sessionstorage-clear
undefined

Network

网络操作

bash
playwright-cli route "**/*.jpg" --status=404
playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
playwright-cli route-list
playwright-cli unroute "**/*.jpg"
playwright-cli unroute
bash
playwright-cli route "**/*.jpg" --status=404
playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
playwright-cli route-list
playwright-cli unroute "**/*.jpg"
playwright-cli unroute

DevTools

开发者工具

bash
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 video.webm
playwright-cli video-chapter "Chapter Title" --description="Details" --duration=2000
playwright-cli video-stop
bash
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 video.webm
playwright-cli video-chapter "Chapter Title" --description="Details" --duration=2000
playwright-cli video-stop

Raw output

原始输出

The global
--raw
option strips page status, generated code, and snapshot sections from the output, returning only the result value. Use it to pipe command output into other tools. Commands that don't produce output return nothing.
bash
playwright-cli --raw eval "JSON.stringify(performance.timing)" | jq '.loadEventEnd - .navigationStart'
playwright-cli --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json
playwright-cli --raw snapshot > before.yml
playwright-cli click e5
playwright-cli --raw snapshot > after.yml
diff before.yml after.yml
TOKEN=$(playwright-cli --raw cookie-get session_id)
playwright-cli --raw localstorage-get theme
全局
--raw
选项会从输出中移除页面状态、生成代码和快照部分,仅返回结果值。你可以使用该选项将命令输出管道传递给其他工具。没有输出的命令不会返回任何内容。
bash
playwright-cli --raw eval "JSON.stringify(performance.timing)" | jq '.loadEventEnd - .navigationStart'
playwright-cli --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json
playwright-cli --raw snapshot > before.yml
playwright-cli click e5
playwright-cli --raw snapshot > after.yml
diff before.yml after.yml
TOKEN=$(playwright-cli --raw cookie-get session_id)
playwright-cli --raw localstorage-get theme

Open parameters

启动参数

bash
undefined
bash
undefined

Use specific browser when creating session

Use specific browser when creating session

playwright-cli open --browser=chrome playwright-cli open --browser=firefox playwright-cli open --browser=webkit playwright-cli open --browser=msedge
playwright-cli open --browser=chrome playwright-cli open --browser=firefox playwright-cli open --browser=webkit playwright-cli open --browser=msedge

Use persistent profile (by default profile is in-memory)

Use persistent profile (by default profile is in-memory)

playwright-cli open --persistent
playwright-cli open --persistent

Use persistent profile with custom directory

Use persistent profile with custom directory

playwright-cli open --profile=/path/to/profile
playwright-cli open --profile=/path/to/profile

Connect to browser via extension

Connect to browser via extension

playwright-cli attach --extension
playwright-cli attach --extension

Start with config file

Start with config file

playwright-cli open --config=my-config.json
playwright-cli open --config=my-config.json

Close the browser

Close the browser

playwright-cli close
playwright-cli close

Delete user data for the default session

Delete user data for the default session

playwright-cli delete-data
undefined
playwright-cli delete-data
undefined

Snapshots

快照功能

After each command, playwright-cli provides a snapshot of the current browser state.
bash
> playwright-cli goto https://example.com
每次执行命令后,playwright-cli都会提供当前浏览器状态的快照。
bash
> playwright-cli goto https://example.com

Page

Page

Snapshot

Snapshot

Snapshot

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

```bash
Snapshot

你也可以使用 `playwright-cli snapshot` 命令按需生成快照。以下所有选项都可以根据需要组合使用。

```bash

default - save to a file with timestamp-based name

default - save to a file with timestamp-based name

playwright-cli snapshot
playwright-cli snapshot

save to file, use when snapshot is a part of the workflow result

save to file, use when snapshot is a part of the workflow result

playwright-cli snapshot --filename=after-click.yaml
playwright-cli snapshot --filename=after-click.yaml

snapshot an element instead of the whole page

snapshot an element instead of the whole page

playwright-cli snapshot "#main"
playwright-cli snapshot "#main"

limit snapshot depth for efficiency, take a partial snapshot afterwards

limit snapshot depth for efficiency, take a partial snapshot afterwards

playwright-cli snapshot --depth=4 playwright-cli snapshot e34
undefined
playwright-cli snapshot --depth=4 playwright-cli snapshot e34
undefined

Targeting elements

元素定位

By default, use refs from the snapshot to interact with page elements.
bash
undefined
默认情况下,你可以使用快照中的ref来与页面元素交互。
bash
undefined

get snapshot with refs

get snapshot with refs

playwright-cli snapshot
playwright-cli snapshot

interact using a ref

interact using a ref

playwright-cli click e15

You can also use css selectors or Playwright locators.

```bash
playwright-cli click e15

你也可以使用css选择器或者Playwright定位器。

```bash

css selector

css selector

playwright-cli click "#main > button.submit"
playwright-cli click "#main > button.submit"

role locator

role locator

playwright-cli click "getByRole('button', { name: 'Submit' })"
playwright-cli click "getByRole('button', { name: 'Submit' })"

test id

test id

playwright-cli click "getByTestId('submit-button')"
undefined
playwright-cli click "getByTestId('submit-button')"
undefined

Browser Sessions

浏览器会话

bash
undefined
bash
undefined

create new browser session named "mysession" with persistent profile

create new browser session named "mysession" with persistent profile

playwright-cli -s=mysession open example.com --persistent
playwright-cli -s=mysession open example.com --persistent

same with manually specified profile directory (use when requested explicitly)

same with manually specified profile directory (use when requested explicitly)

playwright-cli -s=mysession open example.com --profile=/path/to/profile playwright-cli -s=mysession click e6 playwright-cli -s=mysession close # stop a named browser playwright-cli -s=mysession delete-data # delete user data for persistent session
playwright-cli list
playwright-cli -s=mysession open example.com --profile=/path/to/profile playwright-cli -s=mysession click e6 playwright-cli -s=mysession close # stop a named browser playwright-cli -s=mysession delete-data # delete user data for persistent session
playwright-cli list

Close all browsers

Close all browsers

playwright-cli close-all
playwright-cli close-all

Forcefully kill all browser processes

Forcefully kill all browser processes

playwright-cli kill-all
undefined
playwright-cli kill-all
undefined

Installation

安装方法

If global
playwright-cli
command is not available, try a local version via
npx playwright-cli
:
bash
npx --no-install playwright-cli --version
When local version is available, use
npx playwright-cli
in all commands. Otherwise, install
playwright-cli
as a global command:
bash
npm install -g @playwright/cli@latest
如果全局
playwright-cli
命令不可用,可以通过
npx playwright-cli
使用本地版本:
bash
npx --no-install playwright-cli --version
如果本地版本可用,所有命令都可以使用
npx playwright-cli
执行。否则,可以将
playwright-cli
安装为全局命令:
bash
npm install -g @playwright/cli@latest

Example: Form submission

示例:表单提交

bash
playwright-cli open https://example.com/form
playwright-cli snapshot

playwright-cli fill e1 "user@example.com"
playwright-cli fill e2 "password123"
playwright-cli click e3
playwright-cli snapshot
playwright-cli close
bash
playwright-cli open https://example.com/form
playwright-cli snapshot

playwright-cli fill e1 "user@example.com"
playwright-cli fill e2 "password123"
playwright-cli click e3
playwright-cli snapshot
playwright-cli close

Example: Multi-tab workflow

示例:多标签页工作流

bash
playwright-cli open https://example.com
playwright-cli tab-new https://example.com/other
playwright-cli tab-list
playwright-cli tab-select 0
playwright-cli snapshot
playwright-cli close
bash
playwright-cli open https://example.com
playwright-cli tab-new https://example.com/other
playwright-cli tab-list
playwright-cli tab-select 0
playwright-cli snapshot
playwright-cli close

Example: Debugging with DevTools

示例:使用DevTools调试

bash
playwright-cli open https://example.com
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli console
playwright-cli network
playwright-cli close
bash
playwright-cli open https://example.com
playwright-cli tracing-start
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli tracing-stop
playwright-cli close
bash
playwright-cli open https://example.com
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli console
playwright-cli network
playwright-cli close
bash
playwright-cli open https://example.com
playwright-cli tracing-start
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli tracing-stop
playwright-cli close

Specific tasks

特定任务

  • Running and Debugging Playwright tests references/playwright-tests.md
  • Request mocking references/request-mocking.md
  • Running Playwright code references/running-code.md
  • Browser session management references/session-management.md
  • Storage state (cookies, localStorage) references/storage-state.md
  • Test generation references/test-generation.md
  • Tracing references/tracing.md
  • Video recording references/video-recording.md
  • Inspecting element attributes references/element-attributes.md
  • 运行和调试Playwright测试 references/playwright-tests.md
  • 请求Mock references/request-mocking.md
  • 运行Playwright代码 references/running-code.md
  • 浏览器会话管理 references/session-management.md
  • 存储状态(cookies、localStorage) references/storage-state.md
  • 测试生成 references/test-generation.md
  • 链路追踪 references/tracing.md
  • 视频录制 references/video-recording.md
  • 元素属性检查 references/element-attributes.md