操作

Playwright 可以与 HTML 输入元素进行交互，比如文本输入，多选框，单选按钮，选择选项，鼠标点击，键入字符，按键和快捷键以及上传文件和聚焦元素。

文本输入

填写表单字段的最简单的方式是使用 locator.fill(value, **kwargs)。它聚焦元素，然后使用输入的文本触发输入（input）事件。它对 <input>、<textarea> 和 [contenteditable] 元素有效。


# Text input
page.get_by_role("textbox").fill("Peter")

# Date input
page.get_by_label("Birth date").fill("2020-02-02")

# Time input
page.get_by_label("Appointment time").fill("13:15")

# Local datetime input
page.get_by_label("Local time").fill("2020-03-02T05:15")

多选框和单选按钮

选中和取消选中多选框或单选按钮的最简单的方式是使用 locator.set_checked(checked, **kwargs)。此方法可用于 input[type=checkbox]、input[type=radio] 和 [role=checkbox] 元素。


# Check the checkbox
page.get_by_label('I agree to the terms above').check()

# Assert the checked state
assert page.get_by_label('Subscribe to newsletter').is_checked() is True

# Select the radio button
page.get_by_label('XL').check()

选择选项

使用 locator.select_option(**kwargs) 选择 <select> 元素中的一个或多个选项。你可以指定要选择的选项值（value）或标签（label）。可选择多个选项。


# Single selection matching the value
page.get_by_label('Choose a color').select_option('blue')

# Single selection matching the label
page.get_by_label('Choose a color').select_option(label='Blue')

# Multiple selected items
page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])

鼠标点击

执行简单的人类点击。


# Generic click
page.get_by_role("button").click()

# Double click
page.get_by_text("Item").dblclick()

# Right click
page.get_by_text("Item").click(button="right")

# Shift + click
page.get_by_text("Item").click(modifiers=["Shift"])

# Hover over element
page.get_by_text("Item").hover()

# Click the top left corner
page.get_by_text("Item").click(position={ "x": 0, "y": 0})

在底层，这和其它与指针相关的方法：

等待具有指定选择器的元素出现在 DOM 中
等待它被展示，即非空、无 display:none、无 visibility:hidden
等待它停止移动，比如，直到 CSS 转换完成
将元素滚动到视图中
等待它接收指针事件，比如，等待到元素不再被其它元素遮挡
如果在上述任何检查期间元素被分离，那么重试

强制点击

有时，应用程序使用非平凡逻辑，使用拦截点击的其它元素悬停在元素上覆盖它。这种行为与元素被覆盖，点击被分派到其它地方的 Bug 无法区分。如果你知道发生的是这种情况，那么你可以绕过可操作性（actionability）检查，强制点击：


page.get_by_role("button").click(force=True)

程序化点击

如果你对在真实条件下测试应用程序不感兴趣，想通过任何可能的方式模拟点击。你可以通过使用 locator.dispatch_event(type, **kwargs) 在元素上简单地分派点击事件的方式，触发 HTMLElement.click() 行为：


page.get_by_role("button").dispatch_event('click')

键入字符

使用 locator.type(text, **kwargs) 像用户使用真正的键盘一样，一个字符一个字符地向字段中键入。


# Type character by character
page.locator('#area').type('Hello World!')

该方法会发出所有必要的键盘事件，包括所有 keydown、keyup、keypress 事件。你甚至可以指定按键之间的延迟（delay），来模拟真正用户行为。

注意
大多数时候，page.fill(selector, value, **kwargs) 已经够用。当页面上有特殊的键盘处理时，才需要键入字符。

按键和快捷键


# Hit Enter
page.get_by_text("Submit").press("Enter")

# Dispatch Control+Right
page.get_by_role("textbox").press("Control+ArrowRight")

# Press $ sign on keyboard
page.get_by_role("textbox").press("$")

locator.press(key, **kwargs) 方法聚焦选中的元素，产生单个击键。它接受键盘事件的 keyboardEvent.key 属性中发出的逻辑键名：


Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape,
ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight,
ArrowUp, F1 - F12, Digit0 - Digit9, KeyA - KeyZ, etc.

你可以指定想生成的单个字符，比如 "a" 或 "#"
也支持下面的修改快捷键：Shift, Control, Alt, Meta

简单版本生成单个字符。字符是大小写敏感的，因此 "a" 和 "A" 会生成不同的结果。


# <input id=name>
page.locator('#name').press('Shift+A')

# <input id=name>
page.locator('#name').press('Shift+ArrowLeft')

也支持 "Control+o" 或 "Control+Shift+T" 之类的快捷键。当指定修改器时，在随后的键被按下期间，修改器被按下，并被保持。

注意仍然需要在 Shift-A 中指定大写字母 A 来生成大写字符。Shift-a 生成小写字符，就好像你已切换 CapsLock 一样。

上传文件

你可以使用 locator.set_input_files(files, **kwargs) 方法选择要上传的文件。它期望第一个参数指向 "file" 类型的输入元素（input element）。可以通过数组传递多个文件。如果文件路径是相对的，那么相对于当前工作目录解析它们。空数组清除选择的文件。


# Select one file
page.get_by_label("Upload file").set_input_files('myfile.pdf')

# Select multiple files
page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])

# Remove all the selected files
page.get_by_label("Upload file").set_input_files([])

# Upload buffer from memory
page.get_by_label("Upload file").set_input_files(
    files=[
        {"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"}
    ],
)

如果你手中没有输入元素（它是动态创建的），你可以处理 page.on("filechooser") 事件，或在操作之前使用相应的等待方法。


with page.expect_file_chooser() as fc_info:
    page.locator("upload").click()
file_chooser = fc_info.value
file_chooser.set_files("myfile.pdf")

聚焦元素

对于处理聚焦事件的动态页面，你可以使用 locator.focus(**kwargs) 聚焦给定的元素。


page.get_by_label('password').focus()

拖拽和丢弃

你可以使用 locator.drag_to(target, **kwargs) 执行拖拽&丢弃操作。该方法会：

悬停在将被拖拽的元素
按鼠标左键
移动鼠标到接收丢弃的元素
释放鼠标左键


page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))

手工拖拽

如果你想精确地控制拖拽操作，那么使用低级方法，比如 locator.hover(**kwargs)、mouse.down(**kwargs)、mouse.move(x, y, **kwargs) 和 mouse.up(**kwargs)。


page.locator("#item-to-be-dragged").hover()
page.mouse.down()
page.locator("#item-to-drop-at").hover()
page.mouse.up()

注意
如果页面依赖 dragover 事件，在浏览器中触发它至少需要两次鼠标移动。为可靠地发起第二次鼠标移动，重复两次 mouse.move(x, y, **kwargs) 或 locator.hover(**kwargs)。操作序列应该是：悬停在拖拽元素，按下鼠标，悬停在丢弃元素，第二次悬停在丢弃元素，松开鼠标。