Playwright for Python：基础用法

写在前面

Playwright可以与HTML输入元素进行交互，例如文本输入框、复选框、单选按钮、下拉选项等。它可以模拟鼠标点击、输入字符、按键和快捷键，还可以上传文件并将焦点设置到元素上。

注意：本文只讲解同步方式，不讲解异步方式。
from playwright.sync_api import sync_playwright

一、文本输入 Text input

使用locator.fill()是填写表单字段最简单的方法。它会将焦点定位到元素，并触发一个带有输入文本的输入事件。它适用于<input>、<textarea>和[contenteditable]元素。

# 文本输入框
page.get_by_role("textbox").fill("Peter")

# 日期输入框
page.get_by_label("Birth date").fill("2020-02-02")

# 时间输入框
page.get_by_label("Appointment time").fill("13:15")

# 当地时间输入框
page.get_by_label("Local time").fill("2020-03-02T05:15")

二、复选框和单选框 Checkboxes and radio buttons

使用locator.set_checked()是选中或取消选择复选框或单选按钮最简单的方法。该方法可用于input[type=checkbox]、input[type=radio]和[role=checkbox]元素。

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

# 断言checkbox被选中了
assert page.get_by_label('Subscribe to newsletter').is_checked() is True

# 选中单选框
page.get_by_label('XL').check()

三、下拉选择框 Select options

使用locator.select_option()在<select>元素中选择一个或多个选项。你可以通过指定选项的值或标签来进行选择。可以同时选择多个选项。

# 单选，选中value
page.get_by_label('Choose a color').select_option('blue')

# 单选，选中label
page.get_by_label('Choose a color').select_option(label='Blue')

# 多选
page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])

四、鼠标点击 Mouse click

# 通用点击
page.get_by_role("button").click()

# 双击
page.get_by_text("Item").dblclick()

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

# Shift + click
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})

# 强制点击
page.get_by_role("button").click(force=True)

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

五、输入字符 Type characters

在大多数情况下，你应该使用locator.fill()方法来输入文本。请参考上面的文本输入部分。只有在页面上存在特殊的键盘处理时，才需要手动输入字符。

# 通过class定位，输入Hello World!
page.locator('#area').type('Hello World!')

七、按键和快捷操作 Keys and shortcuts

# 点击 Enter
page.get_by_text("Submit").press("Enter")

# 发送 Control+Right组合键
page.get_by_role("textbox").press("Control+ArrowRight")

# 键盘按 “$”符号
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”等快捷方式。当使用修改键时，修改键会被按下并保持，同时在按下后继键时也发挥作用。
请注意，如果需要大写字母A，你仍然需要指定Shift-A。Shift-a会产生一个小写的字符，就好像你已经打开了CapsLock键一样。

八、上传文件 Upload files

你可以使用locator.set_input_files()方法选择要上传的输入文件。它的第一个参数应该指向一个具有"type"属性为"file"的输入元素。可以在数组中传递多个文件。如果某些文件路径是相对路径，它们将相对于当前工作目录进行解析。如果传入一个空数组，则会清除已选择的文件。

# 上传单个文件
page.get_by_label("Upload file").set_input_files('myfile.pdf')

# 上传多个文件
page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])

# 移除所有的文件
page.get_by_label("Upload file").set_input_files([])

# 从内存上传缓存区
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.value
file_chooser.set_files("myfile.pdf")

九、聚焦元素 Focus element

对于处理焦点事件的动态页面，你可以使用locator.focus()函数将指定元素聚焦。

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

十、拖拽 Drag and Drop

你可以使用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()

注意：如果你的页面依赖于dragover事件的触发，你需要至少进行两次鼠标移动才能在所有浏览器中触发该事件。为了可靠地执行第二次鼠标移动，你需要重复执行mouse.move()或locator.hover()两次。操作顺序如下：悬停在拖动元素上，按下鼠标，悬停在放置元素上，再次悬停在放置元素上，松开鼠标。