【python自动化】Playwright基础教程(五)事件操作②悬停&输入&清除精讲

本章目录

鼠标悬停 – hover

鼠标悬停实战

输入内容 – fill

输入内容实战
清空内容实战

输入内容 – type

模拟按键输入内容实战

清除 – clear

清除内容实战

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。

鼠标悬停实战

「案列：」打开百度首页，鼠标放置在左上角的更多位置(悬浮)，会显示出百度的其他产品。

「需实现效果展示：」

【python自动化】Playwright基础教程(五)事件操作②悬停&输入&清除精讲

「代码流程」

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, and keyup 事件。
若需要执行其他的特殊按键，比如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()