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

相关文章
|
9月前
|
存储 Web App开发 编解码
Playwright截图与录屏功能深度教程
Playwright截图与录屏功能远超想象,本文分享实战中的隐藏技巧:从稳定截图、元素精确定位、全页滚动截长图,到多设备适配、视频录制优化及自动重试机制。结合懒加载处理、截图对比测试与错误兜底策略,助你构建高效、可靠的自动化视觉验证体系,真正提升测试质量与调试效率。
|
12月前
|
数据采集 开发框架 .NET
告别爬取困境:用Playwright完美抓取复杂动态网页
Playwright:动态网页爬虫新利器。跨浏览器支持、智能等待、网络拦截,轻松应对异步加载与反爬机制。实战案例+高效技巧,解锁复杂页面数据抓取。
1473 0
|
11月前
|
人工智能 自然语言处理 JavaScript
Playwright MCP:AI驱动自动化测试,轻松告别传统脚本编写
本文介绍如何结合Playwright与MCP协议实现对话式UI自动化测试。通过自然语言指令驱动浏览器操作,显著降低脚本编写门槛,提升测试效率。文章涵盖环境配置、核心功能及实战案例,为构建智能自动化测试方案提供完整指南。
|
11月前
|
敏捷开发 Devops 测试技术
测试用例生成太慢?我们用RAG+大模型,实现了分钟级全覆盖
在敏捷与DevOps时代,测试用例生成常成瓶颈。传统方法效率低、覆盖差、维护难。本文提出RAG+大模型方案,通过检索企业知识库(PRD、API文档等)为大模型提供上下文,精准生成高质量用例。实现从“小时级”到“分钟级”的跨越,提升覆盖率与知识复用,助力测试智能化升级。
|
6月前
|
人工智能 IDE 编译器
Karpathy的LLM Wiki:一种将RAG从解释器模式升级为编译器模式的架构
Andrej Karpathy提出的LLM Wiki,摒弃传统RAG“每次查询重检索”的模式,转而让大模型将原始资料**编译为结构化、可链接、自更新的Markdown Wiki**,实现知识的持久沉淀与复利增长——Obsidian为IDE,LLM为程序员,Wiki即代码库。
3756 7
Karpathy的LLM Wiki:一种将RAG从解释器模式升级为编译器模式的架构
|
人工智能 JavaScript 前端开发
LangGraph架构解析
本文深入解析了传统Agent开发的三大痛点:状态管理碎片化、流程控制复杂及扩展性差,提出使用LangGraph通过有向图模型重构工作流,将LLM调用与工具执行抽象为节点,实现动态流程跳转。文中详述LangGraph四大核心组件——状态机引擎、节点设计、条件边与工具层集成,并结合生产环境最佳实践,如可视化调试、状态持久化与人工干预机制,最终对比LangGraph与传统方案的性能差异,给出选型建议。
2790 1
|
9月前
|
Linux Android开发 iOS开发
新一代的抓包神器——Reqable
本文介绍全平台抓包工具Reqable,支持Windows、Mac、Linux及Android、iOS,操作简单,无需复杂配置,可轻松抓取HTTP/HTTPS和WebSocket请求,适合开发者快速分析数据,提升调试效率。
4853 0
|
人工智能 自然语言处理 JavaScript
Playwright MCP在UI回归测试中的实战:构建AI自主测试智能体
Playwright MCP结合AI智能体,革新UI回归测试:通过自然语言驱动浏览器操作,降低脚本编写门槛,提升测试效率与覆盖范围。借助快照解析、智能定位与Jira等工具集成,实现从需求描述到自动化执行的闭环,推动测试迈向智能化、民主化新阶段。
|
Web App开发 人工智能 自然语言处理
利用Playwright MCP与LLM构建复杂的工作流与AI智能体
本文介绍如何通过Playwright MCP与大语言模型(LLM)结合,构建智能AI代理与自动化工作流。Playwright MCP基于Model Context Protocol,打通LLM与浏览器自动化的能力,实现自然语言驱动的网页操作。涵盖环境配置、核心组件、智能任务规划、自适应执行及电商采集、自动化测试等实战应用,助力高效构建鲁棒性强、可扩展的AI自动化系统。