【python自动化】playwright长截图&切换标签页&JS注入实战

前言

「当前教程使用的playwright版本为1.37.0,selenium版本为3.141.0」

本文预计阅读时长：25min

官方文档：https://playwright.dev/Python/docs/screenshots

本教程目录如下

• 前言

• playwright各类截图源码阅读

• ElementHandle类下的截图

• Page类下的截图

• Locator类下的截图

• Playwright快速使用截图功能

• 两大框架标签页切换对比

• selenium切换标签页

• playwright切换标签页

• playwright切换标签页代码封装

• JS注入

• selenium使用js注入

• playwright使用js注入

• 综合实战

• **实战需求**

• **难点**

• **解决方案**

• 图像拼接封装

• 实战完整代码

playwright各类截图源码阅读

通过阅读源码：playwright -> sync_api -> _generated.py可知，可以在以下三种方式下进行screenshots截图。

返回值均为字节bytes

class ElementHandle(JSHandle):（官方不建议或弃用）
 def screenshot

class Page(SyncContextManager):（官方推荐整个页面截图）
 def screenshot

class Locator(SyncBase):（官方推荐元素定位截图）
 def screenshot

ElementHandle类下的截图

「官方建议不要用此方式，请使用Locator对象进行操作，后续可能会弃用此方式。」

该方法会截取页面的屏幕截图，并根据该特定元素的大小和位置进行裁剪。

如果该元素被其他元素覆盖，则在截图上实际上不可见。

如果该元素是可滚动容器，则截图上只会显示当前滚动的内容。

该方法在进行屏幕截图之前会等待 可操作性 检查，然后将元素滚动到视图中。

如果该元素从 DOM 中分离，该方法将抛出错误。

「用法」

element_handle.screenshot()
element_handle.screenshot(**kwargs)

「参数」

Page类下的截图

「用法」

page.screenshot()
page.screenshot(**kwargs)

「参数」

Locator类下的截图

该方法将截取页面的屏幕截图，并根据定位符匹配的特定元素的大小和位置进行裁剪。

如果该元素被其他元素覆盖，则在截图上实际上不可见。

如果该元素是可滚动容器，则截图上只会显示当前滚动的内容。

该方法会等待可操作性检查，然后将元素滚动到视图中，然后再进行截图。

如果该元素已从 DOM 中移除，则该方法会抛出一个错误。

「用法」

page.get_by_role("link").screenshot()
page.locator("#main-content").screenshot()

「参数」

「注意点」

locator类下的截图方法，是比page类下的截图方法少了两个可选参数。

「full_page」：对于元素截图不支持全页面滚动长截图。

「clip」：对于元素截图不支持裁剪。

Playwright快速使用截图功能

「当前页面截图」

page.screenshot(path="screenshot.png")

「当前页面长截图」

page.screenshot(path="screenshot.png", full_page=True)

「将截图转为字节存储在缓存中」

screenshot_bytes = page.screenshot()
print(base64.b64encode(screenshot_bytes).decode())

「根据元素截图」

page.locator(".header").screenshot(path="screenshot.png")

两大框架标签页切换对比

在Web UI测试中，我们点击某个带有超链接的元素，可能会在新的标签页打开。

实际上有时候浏览器还是停留在当前页面，并没有自己切到新页面，这时候就需要切换到新的标签页进行元素定位等相关操作。

selenium切换标签页

在selenium是通过handles句柄的方式进行切换。每个页面都有唯一的句柄，最新的页面可通过下标[-1]获取。

driver.switch_to.window(driver.window_handles[-1])

playwright切换标签页

在playwright的page类下有个将页面置于最前面（激活选项卡）方法，可以将目标标签页激活，并且在目标标签页进行元素定位等相关操作。

官方文档：https://playwright.dev/python/docs/api/class-page#page-bring-to-front

# 用法如下
Page.bring_to_front()

如何激活我们所需要激活的页面？

「1、通过url」

page.url

「2、通过title」

page.title

playwright切换标签页代码封装

个人感觉切换标签页selenium更方便一点，playwright需要我们自己封装一下。我封装的代码如下：

def switch_to_page(context: BrowserContext, url: str = None, title: str = None) -> Page:
    """
    切换到指定url
    :param context:传入一个浏览器上下文
    :param title: 当前标签页的标题
    :param url: 当前标签页的url
    :return: label_page:Page对象 返回对应的标签页,如果没找到则返回最新的标签页
    """
    for label_page in context.pages:
        if url:
            if url in label_page.url:
                label_page.bring_to_front()
                return label_page
        elif title:
            if title in label_page.title():
                label_page.bring_to_front()
                return label_page
    else:
        if title:
            print(f"没有找到【{title}】标题的标签页")
        if url:
            print(f"没有找到【{url}】网址的标签页")
    return context.pages[-1]

代码注释都写的很清楚了，这里就不单独做解析了。

JS注入

在一些特殊的情况下，我们需要执行原生js，从而达到我们一些框架无法完成的操作。

selenium使用js注入

使用execute_script方法

def execute_script(self, script, *args):
    """
    在当前窗口/框架中同步执行JavaScript。

    :参数:
     - script: 可执行的JavaScript脚本.
     - *args: 任何适用的JavaScript参数.

    :使用方法:
     driver.execute_script('return document.title;')
    """

「实战示列」

我要通过js在浏览器创建一个新标签并打开我博客首页。

from selenium import webdriver
driver = webdriver.Chrome()
driver.execute_script(f'window.open("https://blog.csdn.net/qq_46158060", "_blank");')

playwright使用js注入

官方文档：https://playwright.dev/python/docs/api/class-page#page-evaluate

使用evaluate方法或evaluate_handle方法。

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

def evaluate(
        self, expression: str, arg: typing.Optional[typing.Any] = None
    ) -> typing.Any:

传入的是一个表达式，返回一个序列化值。

官方有挺多个示列。

```py
result = await page.evaluate("([x, y]) => Promise.resolve(x * y)", [7, 8])
print(result) # prints "56"
```

```py
result = page.evaluate("([x, y]) => Promise.resolve(x * y)", [7, 8])
print(result) # prints "56"
```

A string can also be passed in instead of a function:

```py
print(await page.evaluate("1 + 2")) # prints "3"
x = 10
print(await page.evaluate(f"1 + {x}")) # prints "11"
```

```py
print(page.evaluate("1 + 2")) # prints "3"
x = 10
print(page.evaluate(f"1 + {x}")) # prints "11"
```

「实战示列（1）」

我要通过js在浏览器创建一个新标签并打开我博客首页。

page.evaluate(f'window.open("https://blog.csdn.net/qq_46158060", "_blank");')

「实战示列（2）」

通过js定位一个id为main-content的元素，并且滚动该元素。

js = 'document.getElementById("main-content").scrollTo(600,800)'
page.evaluate(js)
# 或
# page.evaluate_handle(js)

综合实战

需要操作的页面如下

「实战需求」

1、使用playwright连接本地指定端口浏览器

2、通过浏览器在新标签页打开指定项目ID下的相关页面

3、页面分为左右两栏，可以分别滚动，需要滚动右侧栏，并且进行长截图

4、要求一个页面只能有一张图

「难点」

1、playwright如何连接本地指定端口浏览器进行操作

2、前文中提到，页面截图，默认是第一个滚动条（暂未找到切换滚动条方案），这里需要定位右侧栏，也就是第二个滚动条

3、执行playwright按键操作进行滚动，默认是第一个滚动条，需要结合多种定位和键位，操作复杂

4、前文中提到，如果通过定位右侧栏大框元素进行截图，只能固定截图，无法长截图

「解决方案」

1、playwright连接本地浏览器详细教程参考我之前写过的文章：playwright连接已有浏览器操作

2、使用js定位右侧框的元素

3、使用js定位右侧框的元素进而执行滚动操作

4、通过js滚动进行多次截图。每滚动一次截图一次，至于滚动的范围需要自己先进行调试，最后将多张图进行拼接成一张图片。

图片拼接技术参考之前文章：web自动化之selenium的特殊用法汇总篇 , 这篇文章的特殊网页无法长截图，使用多图拼接技术章节。

图像拼接封装

下载三方库

pip install pillow==8.4.0

封装代码

from PIL import Image
# 拼接图片的代码
def stitch_images(imgPath_1: str, imgPath_2: str, newImgPath: str) -> str:
    """
    :param imgPath_1: 第一张图片的路径,
    :param imgPath_2: 第二张图片的路径,
    :param newImgPath: 拼接图片的路径,
    :return: newImgPath
    """
    # 获取JPG、png图像的路径
    im_list_1 = [imgPath_1, imgPath_2]
    im_list = [Image.open(fn) for fn in im_list_1]
    # 图片转化为相同的尺寸
    ims = []
    for i in im_list:
        new_img = i.resize((1920, 961), Image.BILINEAR)
        ims.append(new_img)
    # 单幅图像尺寸
    width, height = ims[0].size
    # 创建空白长图
    result = Image.new(ims[0].mode, (width, height * len(ims)))
    # 拼接图片
    for i, im in enumerate(ims):
        result.paste(im, box=(0, i * height))
    # 保存图片
    result.save(newImgPath)
    return newImgPath

实战完整代码

步骤：

1、使用playwright连接本地浏览器（含用户数据，免登陆，懒加载）

2、使用js在新标签页打开相关网址

3、切换至指定标签页

4、定位右侧栏，结合js滚动进行多图截取

5、使用PIL库进行多图拼接

注：本教程为示列代码，业务代码为方便阅读未进行封装，相关代码都进行了注释。

# -*- coding: utf-8 -*-
"""
@Time : 2023/6/25 14:50
@Email : Lvan826199@163.com
@公众号 : 梦无矶的测试开发之路
@File : PW_001_截图.py
"""
__author__ = "梦无矶小仔"

import time

from playwright.sync_api import sync_playwright, BrowserContext, Page
from PIL import Image


def switch_to_page(context: BrowserContext, url: str = None, title: str = None) -> Page:
    """
    切换到指定url
    :param context:传入一个浏览器上下文
    :param title: 当前标签页的标题
    :param url: 当前标签页的url
    :return: label_page:Page对象 返回对应的标签页,如果没找到则返回最新的标签页
    """
    for label_page in context.pages:
        if url:
            if url in label_page.url:
                label_page.bring_to_front()
                return label_page
        elif title:
            if title in label_page.title():
                label_page.bring_to_front()
                return label_page
    else:
        if title:
            print(f"没有找到【{title}】标题的标签页")
        if url:
            print(f"没有找到【{url}】网址的标签页")
    return context.pages[-1]


# 拼接图片的代码
def images_stitch(imgPath_1: str, imgPath_2: str, newImgPath: str) -> str:
    """
    :param imgPath_1: 第一张图片的路径,
    :param imgPath_2: 第二张图片的路径,
    :param newImgPath: 拼接图片的路径,
    :return: newImgPath
    """
    # 获取JPG、png图像的路径
    im_list_1 = [imgPath_1, imgPath_2]
    im_list = [Image.open(fn) for fn in im_list_1]
    # 图片转化为相同的尺寸
    ims = []
    for i in im_list:
        new_img = i.resize((1920, 961), Image.BILINEAR)
        ims.append(new_img)
    # 单幅图像尺寸
    width, height = ims[0].size
    # 创建空白长图
    result = Image.new(ims[0].mode, (width, height * len(ims)))
    # 拼接图片
    for i, im in enumerate(ims):
        result.paste(im, box=(0, i * height))
    # 保存图片
    result.save(newImgPath)
    return newImgPath

# 主代码

playwright = sync_playwright().start()
# 连接已经打开的浏览器，找好端口
browser = playwright.chromium.connect_over_cdp("http://127.0.0.1:9223")
default_context = browser.contexts[0]
print(type(default_context))
page = default_context.pages[0]

projectID = 6691166666666666666
gameID = 497566666666666666
timeRange = 7

# 官方教程 https://playwright.dev/python/docs/api/class-page#page-evaluate

url123 = f'https://play.google.com/console/u/0/developers/{projectID}/app/{gameID}/vitals/metrics/overview?days={timeRange}'

page.evaluate(
    f'window.open("https://play.google.com/console/u/0/developers/{projectID}/app/{gameID}/vitals/metrics/overview?days={timeRange}", "_blank");'
)  # 执行js代码

page.wait_for_timeout(5000)

page = switch_to_page(default_context, url123)

### 进行截图
# 官方教程 https://playwright.dev/python/docs/screenshots#full-page-screenshots
now_time = time.time_ns()
page.wait_for_timeout(1000)
page.locator("#main-content").click()
page.wait_for_timeout(1000)

image_path_1 = f'./img-{now_time}.png'
page.locator("#main-content").screenshot(path=f'img-{now_time}.png')
print("截图成功001")

page.wait_for_timeout(1000)
js = 'document.getElementById("main-content").scrollTo(600,800)'
# page.evaluate_handle(js)
page.evaluate(js)
print("执行了js滚动")
page.wait_for_timeout(1000)
now_time = time.time_ns()
image_path_2 = f'./img-{now_time}.png'
page.locator("#main-content").screenshot(path=f'img-{now_time}.png')
print("截图成功002")

# 截图拼接
new_image_path = './image_result.png'
result_img_path = images_stitch(image_path_1,image_path_2,new_image_path)
print(f"完整长截图路径：{result_img_path}")

「最终长截图效果展示」