Playwright基础元素操作简介

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

文本输入

使用 locator.fill（） 是填写表单字段的最简单方法。它聚焦元素并使用输入的文本触发事件。它适用于 和元素。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（） 是选中和取消选中复选框或单选按钮的最简单方法。此方法可以与 和元素一起使用。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 stateassert 
page.get_by_label('Subscribe to newsletter').is_checked() is True
# Select the radio button
page.get_by_label('XL').check()

选择选项

使用 locator.select_option（） 选择元素中的一个或多个选项。您可以指定选项 或 进行选择。可以选择多个选项。<select>valuelabel

# 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'])

鼠标点击

执行简单的人工单击。

# 常规点击
page.get_by_role("button").click()
# 双击
page.get_by_text("Item").dblclick()
# 点击书包右键
page.get_by_text("Item").click(button="right")
# Shift + 点击
page.get_by_text("Item").click(modifiers=["Shift"])
# 将光标悬停在元素上
page.get_by_text("Item").hover()
# 单击左上角
page.get_by_text("Item").click(position={ "x": 0, "y": 0})

在头部，这个和其他与指针相关的方法：

• 等待具有给定选择器的元素在 DOM 中

• 等待它显示，即不为空，否则，display:nonevisibility:hidden

• 等待它停止移动，例如，直到CSS过渡完成

• 将元素滚动到视图中

• 等待它在操作点接收指针事件，例如，等待元素不被其他元素遮挡

• 如果在上述任何检查期间分离了元素，请重试

强制点击

有时，应用使用非平凡的逻辑，其中悬停在元素上会将其与拦截单击的另一个元素叠加。此行为与元素被覆盖且单击被调度到其他地方的错误没有区别。如果您知道这种情况正在发生，则可以绕过可操作性检查并强制点击：

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

程序化点击

如果您对在真实条件下测试您的应用程序不感兴趣，并且希望通过任何可能的方式模拟点击，您可以通过简单地使用 locator.dispatch_event（） 在元素上调度点击事件来触发 HTMLElement.click（） 行为：

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

键入字符

逐个字符地在字段中键入，就好像它是使用带有 locator.type（） 的真实键盘的用户一样。

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

此方法将发出所有必需的键盘事件，并已设置所有 、、 事件。您甚至可以在按键之间指定可选，以模拟真实的用户行为。keydown keyup keypress delay

注意

大多数时候，page.fill（） 只能工作。仅当页面上有特殊的键盘处理时，才需要键入字符。

按键和快捷键

# 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（） 方法聚焦所选元素并生成单个击键。它接受键盘事件的 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"

请注意，您仍然需要指定大写字母以生成大写字符。 生成一个小写字母，就好像您切换了一样。AShift-AShift-aCapsLock

上传文件

您可以使用 locator.set_input_files（） 方法选择要上传的输入文件。它期望第一个参数指向类型为 .可以在数组中传递多个文件。如果某些文件路径是相对的，则相对于当前工作目录解析它们。空数组将清除选定的文件。"file"

# 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.get_by_label("Upload file").click()
    file_chooser = fc_info.valuefile_chooser.set_files("myfile.pdf")

焦点元素

对于处理焦点事件的动态页面，您可以使用 locator.focus（） 聚焦给定元素。

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

拖放

您可以使用 locator.drag_to（） 执行拖放操作。此方法将：

• 将鼠标悬停在要拖动的元素上。

• 按鼠标左键。

• 将鼠标移动到将接收丢弃的元素。

• 松开鼠标左键。

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

手动拖动

如果要精确控制拖动操作，请使用较低级别的方法，如 locator.hover（）、mouse.down（）、mouse.move（） 和 mouse.up（）。

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

注意

如果您的页面依赖于正在调度的事件，则至少需要两次鼠标移动才能在所有浏览器中触发它。要可靠地发出第二次鼠标移动，请重复 mouse.move（） 或 locator.hover（） 两次。操作顺序为：悬停拖动元素，鼠标向下，悬停放置元素，第二次悬停放置元素，鼠标向上。dragover