精准记录:使用 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 的使用技巧!

相关文章
|
5月前
|
存储 Web App开发 编解码
Playwright截图与录屏功能深度教程
Playwright截图与录屏功能远超想象,本文分享实战中的隐藏技巧:从稳定截图、元素精确定位、全页滚动截长图,到多设备适配、视频录制优化及自动重试机制。结合懒加载处理、截图对比测试与错误兜底策略,助你构建高效、可靠的自动化视觉验证体系,真正提升测试质量与调试效率。
|
8月前
|
数据采集 开发框架 .NET
告别爬取困境:用Playwright完美抓取复杂动态网页
Playwright:动态网页爬虫新利器。跨浏览器支持、智能等待、网络拦截,轻松应对异步加载与反爬机制。实战案例+高效技巧,解锁复杂页面数据抓取。
1217 0
|
JavaScript 前端开发 API
JavaScript动态渲染页爬取——Playwright的使用(二)
JavaScript动态渲染页爬取——Playwright的使用(二)
1035 1
|
8月前
|
人工智能 自然语言处理 JavaScript
Playwright MCP在UI回归测试中的实战:构建AI自主测试智能体
Playwright MCP结合AI智能体,革新UI回归测试:通过自然语言驱动浏览器操作,降低脚本编写门槛,提升测试效率与覆盖范围。借助快照解析、智能定位与Jira等工具集成,实现从需求描述到自动化执行的闭环,推动测试迈向智能化、民主化新阶段。
|
消息中间件 NoSQL 物联网
设计一个百万级的消息推送系统
原文:设计一个百万级的消息推送系统 前言 首先迟到的祝大家中秋快乐。 最近一周多没有更新了。其实我一直想憋一个大招,分享一些大家感兴趣的干货。 鉴于最近我个人的工作内容,于是利用这三天小长假憋了一个出来(其实是玩了两天)。
4962 0
|
9月前
|
人工智能 JavaScript 测试技术
当Playwright遇见MCP,AI智能体实现自主化UI回归测试
本文探讨如何通过Model Context Protocol(MCP)让AI智能体驱动Playwright实现端到端自动化测试。重点解析快照技术的实现原理与实战流程,同时深入剖析其在信息丢失、元素定位、成本效率及逻辑复杂性等方面的现实挑战。
|
11月前
|
Web App开发 安全 测试技术
Playwright-MCP浏览器会话复用全解析
本文深入解析Playwright-MCP实现浏览器会话复用的核心技术,包括状态持久化(cookies/localStorage存储)和直接连接已打开浏览器实例(通过CDP协议)。通过多上下文隔离与安全机制设计,提供企业级应用场景的优化方案,帮助开发者提升测试效率并降低资源消耗。
|
Linux 数据处理 iOS开发
Python空间数据处理环境搭建
常用的空间数据处理Python库 GDAL 全能型的基础空间数据处理库 fiona 基于GDAL的空间矢量数据处理库 rasterio 基于GDAL的空间栅格处理库 basemap 基于matplotlib的空间制图库 GeoPandas 基于pandas的空间数据分析库 RSGISlib 针对遥感数据及GIS分析的高级库
391 0
|
算法 Java 数据安全/隐私保护
App逆向百例|06|某App mfsig分析
App逆向百例|06|某App mfsig分析
1868 0