【python自动化】Playwright基础教程(五)事件操作②悬停&输入&清除精讲
【python自动化】Playwright基础教程(五)事件操作②悬停&输入&清除精讲
【python自动化】Playwright基础教程(五)事件操作②悬停&输入&清除精讲
鼠标悬停 - hover
有些元素，只有你鼠标移动到它那个位置上，他才会展开或者显示一些内容，这时候就要用到hover操作了。
「使用方法」
page.get_by_role("link").hover()
「参数」
参数 | 类型 | 释义 |
|---|---|---|
force | bool | 是否绕过可操作性检查。默认值为 false |
modifiers | List["Alt", "Control", "Meta", "Shift"] | 要按下的键，有四个可供选择。 |
no_wait_after | bool | 可以通过设置此标志来选择退出等待，只有在特殊情况下（例如导航到无法访问的页面）才需要此选项。默认值为 false 。 |
position | Dict | {x: float, y: float} |
timeout | float | 最长等待时间，单位毫秒，默认值为30000（30秒）。 |
trial | bool | 设置后，此方法仅执行可操作性检查并跳过操作。默认值为 false 。等到元素可以执行操作时再执行。 |
可操作性检查表：https://playwright.dev/python/docs/actionability
「此方法详细执行步骤」
- 等待元素的可操作性检查，除非
force设置为true - 如果需要的话，将元素滚动到视图中。
- 使用
page.mouse将鼠标悬停在元素的中心位置，或者是position所指定的位置。 - 等待启动的导航成功或失败，除非
no_wait_after设置为true。
鼠标悬停实战
「案列：」打开百度首页，鼠标放置在左上角的更多位置(悬浮)，会显示出百度的其他产品。
「需实现效果展示：」
「代码流程」
1、首先我们看一下更多这个元素如何定位
<a href="http://www.baidu.com/more/" name="tj_briicon" class="s-bri c-font-normal c-color-t" target="_blank">更多</a>
2、可以通过文本定位（但页面上有三个更多），这里这个更多是第一个，我们可以使用nth(0)或者first进行定位
self.page.get_by_text("更多").nth(0).hover()
self.page.get_by_text("更多").first.hover()
3、可以通过class定位，唯一
self.page.locator("[class='s-bri c-font-normal c-color-t']").hover()
4、可以通过name定位，唯一
self.page.locator("[name='tj_briicon']").hover()
在这里，class和name我均是使用的xpath定位，这个不熟悉的小伙伴可以单独学习一下。
「Xpath我常用的：」
使用元素的属性来定位元素，可以通过 [@属性名='属性值'] 的方式。 示例：//input[@id='username'] 选取 id 属性为 "username" 的 input 元素。
「xpath文本定位」
完全匹配文本 //*[text()="登录"]
包含某个文本 //*[contains(text(),"登录")]
「完整代码」
def hover_operate(self):
# 通过文本定位
# self.page.get_by_text("更多").nth(0).hover()
# self.page.get_by_text("更多").first.hover()
# 通过class定位
# self.page.locator("[class='s-bri c-font-normal c-color-t']").hover()
# 通过name定位
self.page.locator("[name='tj_briicon']").hover()
输入内容 - fill
在输入框中输入一个值。类似于selenium中的send_keys()
「使用方法」
# 在textbox中填入 梦无矶
page.get_by_role("textbox").fill("梦无矶")
「参数」
参数 | 类型 | 释义 |
|---|---|---|
value | str | 可输入文本的元素中需要输入的内容 |
force | bool | 是否绕过可操作性检查。默认值为 false |
no_wait_after | bool | 可以通过设置此标志来选择退出等待，只有在特殊情况下（例如导航到无法访问的页面）才需要此选项。默认值为 false 。 |
timeout | float | 最长等待时间，单位毫秒，默认值为30000（30秒）。 |
「此方法详细执行步骤」
- 此方法会先进行可操作性检查(force为默认值时)，聚焦元素，对目标元素进行
input输入。 - 如果你想清空此元素的内容，你可以传入空字符串，
value = ""。 - 如果目标元素无法输入文本，将会引发错误。
- 想要更加细致的输入操作，如模仿人为输入（每个字符之间有输入时间间隔），可以使用
locator.type()
输入内容实战
「案例：」在搜素框输入梦无矶的测试开发之路
搜索框网页源码：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
「定位」
1、根据ID定位
self.page.locator("#kw")
2、class定位
self.page.locator(".s_ipt")
3、xpath定位
self.page.locator("//input[@name='wd']")
# 或
self.page.locator("//input[@id='kw']")
# 或
self.page.locator("[class='s_ipt']")
想不到吧，小小的一个搜索框竟然有如此多的定位方式。
「完整代码」
def fill_operate(self):
# id定位
self.page.locator("#kw").fill("梦无矶的测试开发之路")
# 也可以这样写
self.page.fill("#kw","梦无矶的测试开发之路")
# class定位
# self.page.locator("[class='s_ipt']").fill("梦无矶的测试开发之路")
# self.page.locator(".s_ipt").fill("梦无矶的测试开发之路")
# xpath定位
# self.page.locator("//input[@name='wd']").fill("梦无矶的测试开发之路")
# self.page.locator("//input[@id='kw']").fill("梦无矶的测试开发之路")
「执行效果展示」
清空内容实战
通过参数我们可以发现，text如果传入一个空值，那么就是进行内容清空。
这里我们先输入一段文本，再输入一个空字符。
执行后发现确实被清空了。教程代码，如果在学习的小伙伴，建议自己写一下运行一下，这些代码我都辛辛苦苦调试好了的，不学好浪费啊！
def fill_clear(self):
# 先输入内容
self.page.locator("//input[@name='wd']").fill("梦无矶的测试开发之路")
# 为了看清楚操作，这里加一个等待
self.page.wait_for_timeout(2000)
# 清空内容
self.page.locator("//input[@name='wd']").fill("")
输入内容 - type
「Tips」
- 官方建议使用
locator.fill()进行输入，只有当页面上需要执行特殊的按键操作的时候，才使用locator.type() - 聚焦元素，输入文本时为文本中的每个字符执行
keydown,keypress/input, andkeyup事件。 - 若需要执行其他的特殊按键，比如
Control,ArrowDown，请使用locator.press()。在后续章节我们会讲到。
「使用方法」
element.type("hello") # 瞬间输入完毕
element.type("world", delay=100) # 像用户一样缓慢输入，每个字符间隔100毫秒
「参数」
参数 | 类型 | 释义 |
|---|---|---|
text | str | 在目标元素要输入的文本 |
delay | float | 两次按键之间的等待时间（单位为毫秒），默认为0毫秒。 |
no_wait_after | bool | 可以通过设置此标志来选择退出等待，只有在特殊情况下（例如导航到无法访问的页面）才需要此选项。默认值为 false 。 |
timeout | float | 最长等待时间，单位毫秒，默认值为30000（30秒）。 |
模拟按键输入内容实战
依旧是使用fill操作中的搜索框进行输入。
「完整代码」
def type_operate(self):
# 效果和fill一样
# self.page.locator("#kw").type("梦无矶的测试开发之路")
# 每个字符之间会停顿300毫秒
self.page.locator("#kw").type(text="梦无矶的测试开发之路", delay=300)
最终会在输入框中输入梦无矶的测试开发之路。这里就不截图了。
清除 - clear
清除输入字段
「使用方法」
# 清空textbox中的内容
page.get_by_role("textbox").clear()
「参数」
参数 | 类型 | 释义 |
|---|---|---|
text | str | 在目标元素要输入的文本 |
force | bool | 是否绕过可操作性检查。默认值为 false |
no_wait_after | bool | 可以通过设置此标志来选择退出等待，只有在特殊情况下（例如导航到无法访问的页面）才需要此选项。默认值为 false 。 |
timeout | float | 最长等待时间，单位毫秒，默认值为30000（30秒）。 |
清除内容实战
这个清除是不是很像我们的fill传入控制符？
这里我们依然是在搜索框中输入内容，再清空。
def clear_operate(self):
# 先输入一段文本
self.page.locator("//input[@name='wd']").fill("梦无矶的测试开发之路")
# 为了看清楚操作，这里加一个等待
self.page.wait_for_timeout(2000)
# 清除内容
self.page.locator("//input[@name='wd']").clear()