Playwright系列(9):常见操作HTML 元素方式

简介: Playwright系列(9):常见操作HTML 元素方式

大家好,我是阿萨。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)两次。操作的顺序是:鼠标悬停拖动元素,鼠标向下,鼠标悬停放置元素,鼠标第二次悬停放置元素,鼠标向上。

如果觉得阿萨的内容对你有帮助,欢迎围观点赞。

相关文章
|
3月前
|
缓存 前端开发 JavaScript
13个很酷但很少有人知道的HTML元素
13个很酷但很少有人知道的HTML元素
36 0
13个很酷但很少有人知道的HTML元素
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
65 1
|
3月前
|
JavaScript
用什么代码可以在页面添加html元素呢?
用什么代码可以在页面添加html元素呢?
|
6月前
|
编解码
HTML 里 img 元素的 src 和 srcset 属性有何区别?
HTML 里 img 元素的 src 和 srcset 属性有何区别?
60 0
|
4天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
19 10
|
14天前
|
JavaScript
Vue移动 HTML 元素到指定位置 teleport 标签
Vue移动 HTML 元素到指定位置 teleport 标签
|
1月前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
11 0
|
1月前
|
安全 数据安全/隐私保护
HTML表单元素
HTML表单元素
8 0
|
1月前
HTML <link> 元素
HTML <link> 元素。
16 5
|
1月前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素