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

相关文章
|
4月前
|
存储 Web App开发 编解码
Playwright截图与录屏功能深度教程
Playwright截图与录屏功能远超想象,本文分享实战中的隐藏技巧:从稳定截图、元素精确定位、全页滚动截长图,到多设备适配、视频录制优化及自动重试机制。结合懒加载处理、截图对比测试与错误兜底策略,助你构建高效、可靠的自动化视觉验证体系,真正提升测试质量与调试效率。
pip镜像源大全及配置
在中国使用pip时,可以配置国内镜像源来提高安装速度和稳定性。以下是一些常见的国内镜像源:
22644 0
|
Linux 数据处理 iOS开发
Python空间数据处理环境搭建
常用的空间数据处理Python库 GDAL 全能型的基础空间数据处理库 fiona 基于GDAL的空间矢量数据处理库 rasterio 基于GDAL的空间栅格处理库 basemap 基于matplotlib的空间制图库 GeoPandas 基于pandas的空间数据分析库 RSGISlib 针对遥感数据及GIS分析的高级库
365 0
|
6月前
|
人工智能 自然语言处理 JavaScript
Playwright MCP:AI驱动自动化测试,轻松告别传统脚本编写
本文介绍如何结合Playwright与MCP协议实现对话式UI自动化测试。通过自然语言指令驱动浏览器操作,显著降低脚本编写门槛,提升测试效率。文章涵盖环境配置、核心功能及实战案例,为构建智能自动化测试方案提供完整指南。
|
6月前
|
人工智能 自然语言处理 JavaScript
借助Playwright MCP实现UI自动化测试:全面指南与实战案例
本文介绍了Playwright与MCP协议结合的UI自动化测试新方法。通过自然语言指令替代传统脚本编写,详细讲解了环境搭建、核心工具和实战案例,展示了从登录测试到报告生成的完整流程。这种创新方式显著降低了技术门槛,让非专业人员也能快速创建可靠的自动化测试。
|
7月前
|
数据采集 开发框架 .NET
告别爬取困境:用Playwright完美抓取复杂动态网页
Playwright:动态网页爬虫新利器。跨浏览器支持、智能等待、网络拦截,轻松应对异步加载与反爬机制。实战案例+高效技巧,解锁复杂页面数据抓取。
1072 0
|
7月前
|
人工智能 自然语言处理 JavaScript
Playwright MCP在UI回归测试中的实战:构建AI自主测试智能体
Playwright MCP结合AI智能体,革新UI回归测试:通过自然语言驱动浏览器操作,降低脚本编写门槛,提升测试效率与覆盖范围。借助快照解析、智能定位与Jira等工具集成,实现从需求描述到自动化执行的闭环,推动测试迈向智能化、民主化新阶段。
|
8月前
|
人工智能 JavaScript 测试技术
当Playwright遇见MCP,AI智能体实现自主化UI回归测试
本文探讨如何通过Model Context Protocol(MCP)让AI智能体驱动Playwright实现端到端自动化测试。重点解析快照技术的实现原理与实战流程,同时深入剖析其在信息丢失、元素定位、成本效率及逻辑复杂性等方面的现实挑战。
|
9月前
|
自然语言处理 前端开发 测试技术
Playwright教程基础篇(2)元素定位策略大全
简介:本文深入解析Playwright元素定位技术,涵盖八大核心策略、动态元素处理、调试技巧及企业级最佳实践,助你提升自动化测试脚本稳定性,告别传统定位痛点。