软件测试|web自动化测试神器playwright教程（七）

前言

有时候我们需要通过屏幕截图来验证我们测试是否正常执行，selenium提供了截图的功能，我们可以截取当前整个屏幕的内容，playwright更加强大，除了截取当前屏幕，还可以截长图，也可以对某个元素截图。

下面我们就分别来介绍一下playwright截取当前屏幕，截取长图以及截取某个元素。

screenshot 截图

捕获屏幕截图并将其保存到文件中的快速方法：

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

使用示例

from playwright.sync_api import sync_playwright


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    context = browser.new_context()  # 创建上下文，浏览器实例1

    page = context.new_page()    # 打开标签页
    page.goto("https://www.baidu.com/")
    print(page.title())
    page.screenshot(path="screenshot.png")

截取图像如下：

截取长图

设置full_page=True 参数 screenshot 是一个完整的可滚动页面的屏幕截图，就好像你有一个非常高的屏幕并且页面可以完全容纳它。

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

完整代码如下：

from playwright.sync_api import sync_playwright


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    context = browser.new_context()  # 创建上下文，浏览器实例1

    page = context.new_page()    # 打开标签页
    page.goto("https://www.baidu.com/")
    print(page.title())
    page.screenshot(path="screenshot.png", full_page=True)

截取的图像如下：

捕获图片数据流

获取包含图像的缓冲区并对其进行后处理或将其传递给第三方像素差异工具，而非写入文件

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

截取单个元素

除了截取整个当前页面，或者截取长图，playwright还支持截取元素，截取方法如下：

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

例如截图百度首页的form 表单输入框和搜索按钮

from playwright.sync_api import sync_playwright



with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    context = browser.new_context()  # 创建上下文，浏览器实例1

    page = context.new_page()    # 打开标签页
    page.goto("https://www.baidu.com/")
    print(page.title())
    page.screenshot(path="screenshot.png")
    page.locator(".form").screenshot(path="screenshot.png")

截图效果如下：

总结

本文主要讲解了playwright的截图操作，比起selenium，playwright的截图功能更加强大，更加方便使用，这也是playwright相对于selenium的强大优势。