Skip to main content

互动

🌐 Interaction

命令​

🌐 Commands

命令描述
click <target> [button]点击一个元素 (left、right 或 middle)
dblclick <target> [button]双击一个元素
fill <target> <text>清除输入框并填写文本
type <text>在聚焦元素中输入文本
select <target> <value>选择下拉菜单选项
check <target> / uncheck <target>选中或取消选中复选框或单选按钮
hover <target>鼠标悬停在元素上
drag <startTarget> <endTarget>在两个元素之间拖放
drop <target>从页面外将文件或数据拖到元素上
upload <files...>上传一个或多个文件
resize <width> <height>调整浏览器窗口大小

目标元素​

🌐 Targeting elements

来自快照的引用（推荐）​

🌐 Refs from snapshots (recommended)

playwright-cli snapshot                 # get element refs
playwright-cli click e15                # click by ref
playwright-cli fill e3 "hello"          # fill by ref

在一个大页面上，find 定位一个元素而不捕获整个树:

🌐 On a large page, find locates an element without capturing the whole tree:

playwright-cli find "Add to cart"
# - button "Add to cart" [ref=e42]
playwright-cli click e42

CSS 选择器​

🌐 CSS selectors

playwright-cli click "#main > button.submit"
playwright-cli click "[data-testid='submit']"
playwright-cli fill "#email" "test@example.com"

Playwright 定位器​

🌐 Playwright locators

playwright-cli click "getByRole('button', { name: 'Submit' })"
playwright-cli click "getByTestId('submit-button')"
playwright-cli click "getByText('Login')"
playwright-cli fill "getByLabel('Email')" "test@example.com"

点击​

🌐 Clicking

playwright-cli click e15                       # left click
playwright-cli click e15 right                 # right click (context menu)
playwright-cli click e15 middle                # middle click
playwright-cli dblclick e15                    # double click

# hold modifier keys: Alt, Control, ControlOrMeta, Meta, Shift
playwright-cli click e15 --modifiers=Shift
playwright-cli click e15 --modifiers=ControlOrMeta --modifiers=Shift

--modifiers 可重复——每把密钥只需通过一次。

表单交互​

🌐 Form interaction

# Fill a text field
playwright-cli fill e3 "test@example.com"

# Fill and submit (presses Enter afterwards)
playwright-cli fill e3 "search query" --submit

# Type into whatever is focused, optionally submitting
playwright-cli type "search query"
playwright-cli type "search query" --submit

# Select from dropdown
playwright-cli select e7 "United States"

# Checkboxes
playwright-cli check e10                # check
playwright-cli uncheck e10              # uncheck

# File upload through a file input or file chooser
playwright-cli upload /path/to/file.pdf
playwright-cli upload /path/to/a.pdf /path/to/b.pdf

# Resize browser window
playwright-cli resize 375 812           # mobile viewport
playwright-cli resize 1920 1080         # desktop

拖放​

🌐 Drag and drop

drag 将页面中的一个元素移动到另一个元素上。drop 模拟从 页面外部 发起的拖放操作——比如从桌面拖入的文件，或者从其他应用拖入的文本。

# reorder items within the page
playwright-cli drag e2 e8

# drop files onto a dropzone
playwright-cli drop e4 --path=/abs/path/to/image.png
playwright-cli drop e4 --path=/abs/path/a.png --path=/abs/path/b.png

# drop typed data
playwright-cli drop e4 --data="text/plain=hello world"
playwright-cli drop e4 --data='application/json={"id":1}'

--path 和 --data 都可以重复。路径必须是绝对的；--data 条目使用 mime/type=value 格式。

🌐 Both --path and --data are repeatable. Paths must be absolute; --data entries use mime/type=value format.

工作流程：登录表单​

🌐 Workflow: login form

$ playwright-cli snapshot
# - textbox "Email" [ref=e3]
# - textbox "Password" [ref=e5]
# - checkbox "Remember me" [ref=e7]
# - button "Sign in" [ref=e9]

$ playwright-cli fill e3 "alice@example.com"
$ playwright-cli fill e5 "s3cureP@ss!"
$ playwright-cli check e7
$ playwright-cli click e9

$ playwright-cli snapshot
# - heading "Welcome back, Alice!" [level=1]