精准记录:使用 Playwright 实现屏幕截图

简介: Playwright是用于自动化浏览器的库,提供简洁的API进行屏幕截图。要截屏,调用`page.screenshot()`方法,指定保存路径。若需全页截图,设置`full_page=True`。还能捕获图片数据流,不写入文件,以及截取特定元素,如`.header`。Playwright的截图功能比Selenium更强大,便于开发和测试人员分析应用界面。

image.png

前言

在软件开发和测试中,屏幕截图是一种常用的工具,用于记录应用程序的状态、错误信息等。Playwright 提供了一种简单而强大的方式来实现屏幕截图,帮助开发人员和测试人员轻松捕获和分析应用程序的界面。本文将介绍如何使用 Playwright 实现屏幕截图。

screenshot 截图

在 Playwright 中,要实现屏幕截图非常简单。你只需要调用 page 对象的 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://ceshiren.com")
    print(page.title())
    page.screenshot(path="screenshot.png")

截取图像如下:

image.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://ceshiren.com")
    print(page.title())
    page.screenshot(path="screenshot.png", full_page=True)

截取的图像如下:

image.png

捕获图片数据流

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

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")

截图效果如下:

image.png

总结

本文主要讲解了playwright的截图操作,比起selenium,playwright的截图功能更加强大,更加方便使用,这也是playwright相对于selenium的强大优势。Playwright 提供了简单而强大的 screenshot() 方法,帮助开发人员轻松捕获和分析应用程序的界面。希望本文能够对你有所帮助,让你更好地掌握 Playwright 的使用技巧!

相关文章
|
开发工具 git
Playwright系列(6):如何集成到GitHub
Playwright系列(6):如何集成到GitHub
329 0
Playwright系列(6):如何集成到GitHub
|
测试技术 Shell API
Playwright系列(3):运行测试用例
Playwright系列(3):运行测试用例
443 1
|
前端开发 JavaScript
Playwright系列(9):常见操作HTML 元素方式
Playwright系列(9):常见操作HTML 元素方式
657 0
|
Linux 数据处理 iOS开发
Python空间数据处理环境搭建
常用的空间数据处理Python库 GDAL 全能型的基础空间数据处理库 fiona 基于GDAL的空间矢量数据处理库 rasterio 基于GDAL的空间栅格处理库 basemap 基于matplotlib的空间制图库 GeoPandas 基于pandas的空间数据分析库 RSGISlib 针对遥感数据及GIS分析的高级库
232 0
|
7月前
|
机器学习/深度学习 算法
广义优势估计(GAE):端策略优化PPO中偏差与方差平衡的关键技术
广义优势估计(GAE)由Schulman等人于2016年提出,是近端策略优化(PPO)算法的核心理论基础。它通过平衡偏差与方差,解决了强化学习中的信用分配问题,即如何准确判定历史动作对延迟奖励的贡献。GAE基于资格迹和TD-λ思想,采用n步优势的指数加权平均方法,将优势函数有效集成到损失函数中,为策略优化提供稳定梯度信号。相比TD-λ,GAE更适用于现代策略梯度方法,推动了高效强化学习算法的发展。
809 3
广义优势估计(GAE):端策略优化PPO中偏差与方差平衡的关键技术
|
前端开发 测试技术
使用 Playwright 进行元素定位
本文介绍了Playwright在自动化测试和网页爬取中如何定位页面元素。通过CSS选择器、XPath和文本内容等方式,Playwright的`locator`对象允许灵活定位。示例代码展示了使用`query_selector()`、XPath表达式以及`with_text()`方法找到元素并获取其文本。此外,文章还提到了其他内置定位方法,如根据角色、标签文本、占位符等属性进行定位,并提供了相关使用示例。总之,Playwright提供了丰富的元素定位方法,便于高效地进行网页操作。
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页爬取——Playwright的使用(一)
JavaScript动态渲染页爬取——Playwright的使用(一)
1128 2
|
11月前
playwright Test 录制视频
playwright Test 录制视频
278 3
|
JavaScript 前端开发 API
JavaScript动态渲染页爬取——Playwright的使用(二)
JavaScript动态渲染页爬取——Playwright的使用(二)
644 1
|
IDE 测试技术 开发工具
从零开始:使用 Playwright 脚本录制实现自动化测试
Playwright提供了一种便捷的脚本录制功能,类似于Selenium IDE。通过运行`playwright codegen`命令,你可以启动一个浏览器并记录你的操作,生成Python或异步代码。在示例中,展示了如何录制登录百度的过程,生成的代码可以直接用于自动化测试。Playwright Inspector允许你编辑和转换测试代码,支持生成Pytest格式的测试用例,方便Python开发者使用。这个功能使Playwright成为强大的Web自动化测试工具。