【python自动化】Playwright基础教程(六)事件操作③单击&双击&计数&过滤&截图&JS注入

class Demo05:
    def __init__(self):
        """
        使用playwright连接谷歌浏览器
        :return:
        """
        self.playwright = sync_playwright().start()
        # 连接已经打开的浏览器，找好端口
        browser = self.playwright.chromium.connect_over_cdp("http://127.0.0.1:9223")
        self.default_context = browser.contexts[0]
        self.page = self.default_context.pages[0]

启动新的浏览器

class Demo06:
    def __init__(self, url):
        playwright = sync_playwright().start()
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        self.page = context.new_page()
        self.page.goto(url)
       
        
if __name__ == '__main__':
    mwj = Demo05(url="指定的url")
    mwj.Locator_testid()

点击 - click

单击一个元素

使用方法

page.get_by_role("button").click()

参数

参数	类型	释义
button	List[“left”, “middle”, “right”]	左、中、右可选，默认是左left
click_count	int	默认值为1，具体看：https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
delay	float	按下按键和松开按键之间时间（单位为毫秒），默认为0毫秒。
force	bool	是否绕过可操作性检查。默认值为 `false`
modifiers	List[“Alt”, “Control”, “Meta”, “Shift”]	要按下的修饰键，有四个可供选择。
position	Dict	{x: float, y: float}，相对于元素填充框的左上角的点，如果没有指定，则使用元素的某个可见点。
trial	bool	设置后，此方法仅执行可操作性检查并跳过操作。默认值为 `false` 。等到元素可以执行操作时再执行。
no_wait_after	bool	可以通过设置此标志来选择退出等待，只有在特殊情况下（例如导航到无法访问的页面）才需要此选项。默认值为 `false` 。
timeout	float	最长等待时间，单位毫秒，默认值为30000（30秒）。

官方示列

要求：按住Shift键再右键点击画布的特定位置。

page.locator("canvas").click(
    button="right", modifiers=["Shift"], position={"x": 23, "y": 32}
)

点击常用实战

案列需求

在搜索框输入梦无矶小仔，点击百度一下。

代码

def click_demo01(self):
    # 在搜索框中输入 梦无矶小仔
    self.page.locator("//input[@id='kw']").fill("梦无矶小仔")
    # 点击百度一下(id="su")
    self.page.locator("//input[@id='su']").click()

效果展示

双击 - dblclick

双击一个元素

使用方法

locator.dblclick()
locator.dblclick(**kwargs)

参数

参数	类型	释义
button	List[“left”, “middle”, “right”]	左、中、右可选，默认是左left
delay	float	按下按键和松开按键之间时间（单位为毫秒），默认为0毫秒。
force	bool	是否绕过可操作性检查。默认值为 `false`
modifiers	List[“Alt”, “Control”, “Meta”, “Shift”]	要按下的修饰键，有四个可供选择。
position	Dict	{x: float, y: float}，相对于元素填充框的左上角的点，如果没有指定，则使用元素的某个可见点。
trial	bool	设置后，此方法仅执行可操作性检查并跳过操作。默认值为 `false` 。等到元素可以执行操作时再执行。
no_wait_after	bool	可以通过设置此标志来选择退出等待，只有在特殊情况下（例如导航到无法访问的页面）才需要此选项。默认值为 `false` 。
timeout	float	最长等待时间，单位毫秒，默认值为30000（30秒）。

双击实战

实战测试网址：https://cps-check.com/cn/double-click-test

代码

def dblclick(self):
    for i in range(5):
        self.page.locator("#clicker").dblclick()

这里我们循环点击五次双击。

效果展示

网页显示说点了九次双击，大于我们设定的5次，这是因为我们的playwright太快啦！

如果只运行一次双击，那这里显示的双击就是一次。

计数 - count

返回与定位方式匹配的元素个数。（在之前的highlight中我们展示梦无矶元素的时候就能看到后面的计数。）

使用方法

count = page.get_by_role("listitem").count()

返回值

返回一个int类型的数值。

计数使用实战

统计搜索页面上有多少个梦无矶

代码展示

def count_operate(self):
    self.page.get_by_text("梦无矶").highlight()
    mwj_count = self.page.get_by_text("梦无矶").count()
    print(mwj_count)

输出结果

过滤 - filter

根据选项缩小现有定位方式的定位范围（如文本过滤），并且可以多级过滤。

使用方法

row_locator = page.locator("tr")
# ...
row_locator.filter(has_text="text in column 1").filter(
    has=page.get_by_role("button", name="column 2 button")
).screenshot()

参数

参数	类型	释义
has	Locator	匹配包含与内部定位器匹配的元素的元素。根据外部定位器查询内部定位器。例如， `article` 有 `text=Playwright` 匹配 `<article><div>Playwright</div></article>` 项。
has_not	Locator	和上面的相反，匹配不存在某个元素。
has_not_text	str	匹配不包含指定文本的元素，这些元素可能包含子元素或后代元素。传递 [string] 时，匹配不区分大小写并搜索子字符串。
has_text	str	匹配包含指定文本的元素，这些元素可能包含子元素或后代元素。传递 [string] 时，匹配不区分大小写并搜索子字符串。例如，“Playwright” 匹配 `<article><div>Playwright</div></article>` .

返回值

返回一个定位器，Locator

实用场景

有时候我们遇到的元素不好一步到位定位，我们就可以使用过滤一步步进行定位。
有多个相同定位的元素，但是某个属性不同，我们可以通过过滤进行定位需要的元素。
在翻页操作中，最后一页的>箭头一般是置灰不可操作，有is-disabled类似的属性，可以通过过滤该元素是否有次属性，从而判断我们现在是否翻页到了最后一页。

过滤实战

案列需求：悬浮到产品，显示后定位悬浮框中计算的云服务器ECS。（我强行写的案列，实际操作可以一步到位。）

元素定位

产品的网页源码

<a class="global-menu-item" href="https://www.aliyun.com/product/list" target="_self" data-spm-anchor-id="5176.28055625.J_4VYgf18xNlTAyFFbOuOQe.2"><span>产品</span><i class="navIconfont icon-topnavput_away"></i></a>

这里我们看到class="global-menu-item",但是和产品同一行的这些文字，都有相同的class属性（有九个），通过高亮显示得知，这个是第一个，所以我们使用如下定位。

self.page.locator('[class="global-menu-item"]').nth(0)

计算源码

同理，计算这一列所有元素都有class="menu-type-title"，我们可以进行过滤计算这个文本进行定位。（这里是为了演示filter，如果用xpath会更简单，抬杠的自己从30楼倒立走到1楼，我都会给你秀一遍）
以下定位方式，都可以定位到计算

self.page.locator('[class="menu-type-title"]').filter(has_text="计算").first.highlight()

# Xpath 删除 计算 前后的空白字符进行匹配
self.page.locator('//a[normalize-space()="计算"]').highlight()
# Xpath文本匹配
self.page.locator('//a[text()="计算"]').highlight()
# Xpath 多级匹配
self.page.locator('//div[@class="menu-left-content"]//a[text()="计算"]').highlight()

云服务器ECS的网页源码

这里和计算的定位方式一样，这里就不赘述了。

完整代码

def filter_operate(self):
    # 本案例url= 'https://www.aliyun.com/'
    # 鼠标悬浮到 产品
    self.page.locator('[class="global-menu-item"]').nth(0).hover()
    self.page.wait_for_timeout(500)
    # 再悬浮到 计算
    self.page.locator('[class="menu-type-title"]').filter(has_text="计算").first.hover()
    # Xpath 删除 计算 前后的空白字符进行匹配
    # self.page.locator('//a[normalize-space()="计算"]').highlight()
    # Xpath文本匹配
    # self.page.locator('//a[text()="计算"]').highlight()
    # Xpath 多级匹配
    # self.page.locator('//div[@class="menu-left-content"]//a[text()="计算"]').highlight()

    # 再高亮云服务器ECS
    self.page.locator('//a[@class="menu-item-title"]').filter(has_text="云服务器 ECS").nth(0).highlight()

效果展示

截图 - screenshot

截取与定位器匹配的元素的屏幕截图

使用方法

page.get_by_role("link").screenshot()

参数

参数	类型	含义
timeout	Union[float, None]	最大等待时间，以毫秒为单位。默认为`30000`（30秒）。传入`0`以禁用超时。`browser_context.set_default_timeout()`或`page.set_default_timeout()`方法更改默认值。
type	Union[“jpeg”, “png”, None]	指定截图的类型，默认为png。
path	Union[pathlib.Path, str, None]	图像保存的文件路径。截图类型将根据文件扩展名进行推断。如果`path`是相对路径，则相对于当前工作目录解析。如果不提供路径，则图像将不会保存到磁盘。
quality	Union[int, None]	图像的质量，介于0到100之间。不适用于`png`图像。
omit_background	Union[bool, None]	隐藏默认的白色背景，允许使用透明度进行截图。不适用于`jpeg`图像。默认为`false`。
animations	Union[“allow”, “disabled”, None]	设置为`"disabled"`时，停止CSS动画、CSS过渡和Web动画。动画的处理方式取决于其持续时间：有限动画将快进到完成状态，因此它们会触发`transitionend`事件。无限动画将取消到初始状态，然后在截图后重新播放。默认为`"allow"`，即保持动画不变。
caret	Union[“hide”, “initial”, None]	设置为`"hide"`时，截图将隐藏文本插入符。设置为`"initial"`时，文本插入符的行为不会改变。默认为`"hide"`。
scale	Union[“css”, “device”, None]	设置为`"css"`时，截图上每个CSS像素将具有一个实际像素。对于高DPI设备，这将使截图保持较小的大小。使用`"device"`选项将使每个设备像素有一个实际像素，因此高DPI设备的截图将是两倍或更大。默认为`"device"`。
mask	Union[List[Locator], None]	指定在截图时应隐藏的定位符。被隐藏的元素将被叠加一个粉色框`#FF00FF`（由`maskColor`自定义），完全覆盖其边界框。
mask_color	Union[str, None]	指定被隐藏元素的覆盖框的颜色，以CSS颜色格式表示。默认颜色为粉色`#FF00FF`。

截图实战

参考之前的文章【截图】部分：【python自动化】playwright长截图&切换标签页&JS注入实战

执行js - evaluate

在页面中执行 JavaScript 代码，将匹配元素作为参数。

使用方法

tweets = page.locator(".tweet .retweets")
assert tweets.evaluate("node => node.innerText") == "10 retweets"

参数

参数	类型	释义
expression	str	在浏览器上下文中运行的 JavaScript 表达式。如果表达式的计算结果为函数，则会自动调用该函数。
arg	Evaluation Argument	参数参考JS：https://playwright.dev/python/docs/next/evaluating#evaluation-argument
timeout	float	最长等待时间，单位毫秒，默认值为30000（30秒）。

另外一个执行js的方法是evaluate_handle

page.evaluate（）和 page.evaluate_handle（）之间的唯一区别是 page.evaluate_handle（）返回 JSHandle。