大家好，我是阿萨。Playwright 可以和HTML 输入控件进行交互。比如文本框，复选框，单选框，按钮，下拉框等控件 。它可以输入文本，选择选项，鼠标点击，敲字符或者快捷键，上传文件也可以。今天就详细列举常见HTML 远速速操作方式。
文本框
使用 locator.fill(value, **kwargs) 方式是最快填充内容的函数。它首先把光标放到一个元素上，人然后触发输入时间并且输入文本。 它对控件输入框，多行文本框，或者可编辑内容的元素都可以快速生效。
同步代码：
# 文本输入page.get_by_role("textbox").fill("阿萨")# 日期输入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")
异步代码：
# 文本输入await page.get_by_role("textbox").fill("阿萨") # 日期输入await page.get_by_label("Birth date").fill("2020-02-02") # 时间输入await page.get_by_label("Appointment time").fill("13:15") # 当地日期和时间输入await page.get_by_label("Local time").fill("2020-03-02T05:15") 复选框和单选框
使用 locator.set_checked(checked, **kwargs)方法可以选中或者取消选中一个复选框或者单选框。这个方式可以用在复选框，单选框等元素上。
同步代码：
# 选中复选框page.get_by_label('我同意以上内容').check()#校验复选状态assert page.get_by_label('订阅更新').is_checked() is True# 选择单选框page.get_by_label('XL').check()
异步代码:
# 选中复选框await page.get_by_label('我同意以上内容').check() # 校验复选状态assert await page.get_by_label('订阅更新').is_checked() is True # 选择单选框await page.get_by_label('XL').check()
下拉框
在下拉框里选择选项可以用方法 locator.select_option(**kwargs)。它可以指定选项值，或者标签来选择值。同时支持多选。
同步代码：
# Single selection matching the valuepage.get_by_label('Choose a color').select_option('blue')# Single selection matching the labelpage.get_by_label('Choose a color').select_option(label='Blue')# Multiple selected itemspage.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])
异步代码：
# Single selection matching the valueawait page.get_by_label('Choose a color').select_option('blue') # Single selection matching the labelawait page.get_by_label('Choose a color').select_option(label='Blue') # Multiple selected itemsawait page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])
鼠标点击
执行点击操作。
同步代码：
# Generic clickpage.get_by_role("button").click()# Double clickpage.get_by_text("Item").dblclick()# Right clickpage.get_by_text("Item").click(button="right")# Shift + clickpage.get_by_text("Item").click(modifiers=["Shift"])# Hover over elementpage.get_by_text("Item").hover()# Click the top left cornerpage.get_by_text("Item").click(position={ "x": 0, "y": 0})
异步代码：
# Generic clickawait page.get_by_role("button").click() # Double clickawait page.get_by_text("Item").dblclick() # Right clickawait page.get_by_text("Item").click(button="right") # Shift + clickawait page.get_by_text("Item").click(modifiers=["Shift"]) # Hover over elementawait page.get_by_text("Item").hover() # Click the top left cornerawait page.get_by_text("Item").click(position={ "x": 0, "y": 0})
在底层，这个方法和其他与指针相关的方法的底层处理逻辑是：
- 等待具有给定选择器的元素进入DOM
- 等待它显示，即非空，无显示:none，无可见性:隐藏
- 等待它停止移动，例如，直到CSS过渡完成
- 滚动元素进入可见区域
- 等待它在操作点接收指针事件，例如，等待直到元素变得不被其他元素遮挡
- 如果在上述任何检查期间分离了元素，则重试
强制点击
有时，应用程序使用非平凡的逻辑，悬停元素会覆盖另一个元素，以拦截单击。这种行为与元素被覆盖并且点击被分派到其他地方的bug没有什么区别。如果你知道发生了这种情况，你可以绕过操作检查并强制点击:
同步代码：
page.get_by_role("button").click(force=True)
异步代码：
await page.get_by_role("button").click(force=True) 程序化的点击 如果你不想在真实情况下测试你的应用程序，而想用任何可能的方法来 模拟点击，你可以通过在具有定位器的元素上分派一个点击事件locator.dispatch_event(type, **kwargs):来触发HTMLElement.click()行为 同步代码： • page.get_by_role("button").dispatch_event('click') 异步代码：
await page.get_by_role("button").dispatch_event('click') 输入字符
使用该方法 locator.type(text, **kwargs) 给指定控件输入字符。
同步代码：
# 按字符输入page.locator('#area').type('Hello World!')
异步代码：
# Type character by characterawait page.locator('#area').type('Hello World!') 这个方法会触发所有必要的键盘事件，包括keydown、keyup和keypress事件。甚至可以指定可选的按键之间的延迟，以模拟真实的用户行为。 请注意 大多数时候，page.fill(selector, value, **kwargs)都可以正常工作。如果 页面上有特殊的键盘操作，您只需要键入字符。
快捷键
同步代码：
# Hit Enterpage.get_by_text("Submit").press("Enter")# Dispatch Control+Rightpage.get_by_role("textbox").press("Control+ArrowRight")# Press $ sign on keyboardpage.get_by_role("textbox").press("$")
异步代码：
# Hit Enterawait page.get_by_text("Submit").press("Enter") # Dispatch Control+Rightawait page.get_by_role("textbox").press("Control+ArrowRight") # Press $ sign on keyboardawait page.get_by_role("textbox").press("$")
locator.press(key, **kwargs)方法聚焦所选元素并生成单个击键。它接受keyboardEvent中发出的逻辑键名。□键盘事件的Key属性:反引号，减，等于，反斜杠，退格，制表符，删除，转义，ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight，ArrowUp, F1 - F12, Digit0 - Digit9, KeyA - KeyZ等。
- 你也可以指定想要生成的单个字符，如"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')
异步代码：
# <input id=name>await page.locator('#name').press('Shift+A') # <input id=name> await page.locator('#name').press('Shift+ArrowLeft') 也支持“Control+o”或“Control+Shift+T”等快捷键。当用修饰符指定时，修饰符被按下，并且在按下下一个键时保持不变。 注意，要生成大写字符，仍然需要在Shift-A中指定大写字母A。Shift-a会生成一个小写字母，就像切换了大写字母一样。 上传文件 你可以使用locator.set_input_files(files, **kwargs)选择输入文件上传。 它期望第一个参数指向类型为"file"的输入元素。 可以在数组中传递多个文件。如果一些文件路径是相对的，它们将相对于 当前工作目录进行解析。清空选中的文件。
同步代码：
# Select one filepage.get_by_label("Upload file").set_input_files('myfile.pdf')# Select multiple filespage.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])# Remove all the selected filespage.get_by_label("Upload file").set_input_files([])# Upload buffer from memorypage.get_by_label("Upload file").set_input_files( files=[ {"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"} ],)
异步代码：
# Select one fileawait page.get_by_label("Upload file").set_input_files('myfile.pdf') # Select multiple filesawait page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt']) # Remove all the selected filesawait page.get_by_label("Upload file").set_input_files([]) # Upload buffer from memoryawait page.get_by_label("Upload file").set_input_files( files=[ {"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"} ], ) 如果手头没有input元素(它是动态创建的)，可以处理page.on("filechooser")事件，或者在操作时使用相应的等待方法:
同步代码：
with page.expect_file_chooser() as fc_info: page.locator("upload").click()file_chooser = fc_info.valuefile_chooser.set_files("myfile.pdf")
异步代码：
async with page.expect_file_chooser() as fc_info: await page.locator("upload").click()file_chooser = await fc_info.value await file_chooser.set_files("myfile.pdf") 让元素获得焦点
对于处理焦点事件的动态页面，可以用焦点来聚焦给定的元素locator.focus(**kwargs)。
同步代码：
page.get_by_label('password').focus()
异步代码：
await 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"))
异步代码：
await 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()
异步代码：
await page.locator("#item-to-be-dragged").hover()await page.mouse.down()await page.locator("#item-to-drop-at").hover()await page.mouse.up()
请注意
如果页面依赖于dragover事件被分派，那么在所有浏览器中至少需要两次鼠标移动才能触发该事件。为了可靠地发出第二次鼠标移动，重复方法mouse.move(x, y, **kwargs) 或者 locator.hover(**kwargs)两次。操作的顺序是:鼠标悬停拖动元素，鼠标向下，鼠标悬停放置元素，鼠标第二次悬停放置元素，鼠标向上。
如果觉得阿萨的内容对你有帮助，欢迎围观点赞。
