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

相关文章
|
12天前
|
数据采集 Web App开发 监控
捕获抖音截图:如何用Puppeteer保存页面状态
随着抖音直播的兴起,实时动态和互动元素吸引了大量用户。为了捕获直播页面的实时信息,本文介绍了如何使用 Puppeteer 和代理 IP 服务,解决页面动态加载、反爬虫机制等问题,实现自动化抓取和截图保存。通过安装 Puppeteer、配置代理 IP 和编写简单脚本,可以高效地捕获抖音直播页面的状态。
89 51
|
1月前
|
数据采集 Web App开发 JavaScript
Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容
本文介绍了如何使用Selenium爬虫技术抓取抖音评论,通过模拟鼠标悬停操作和结合代理IP、Cookie及User-Agent设置,有效应对动态内容加载和反爬机制。代码示例展示了具体实现步骤,帮助读者掌握这一实用技能。
Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容
|
4月前
|
数据采集 Web App开发 JavaScript
探索Puppeteer的强大功能:抓取隐藏内容
**摘要:** 本文探讨了如何使用Puppeteer无头浏览器抓取动态网页的隐藏内容,如模拟点击、滚动、表单提交和延时加载。Puppeteer是Google维护的Node库,能自动化控制Chrome。文章还讲解了结合爬虫代理IP、User-Agent和Cookie来增强爬取的稳定性和效率,提供了相关JavaScript代码示例,展示了如何配置代理、设置User-Agent、处理Cookie以及模拟用户交互来获取隐藏信息。这些技巧对于现代网页的爬取至关重要。
150 4
探索Puppeteer的强大功能:抓取隐藏内容
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
229 1
|
6月前
|
API Python
Airtest结合Poco对控件实施精准截图,学起来!
Airtest结合Poco对控件实施精准截图,学起来!
|
运维 Android开发
使用logcat让Android应用支持查看实时日志并输出至界面显示功能
使用logcat让Android应用支持查看实时日志并输出至界面显示功能
|
Rust 数据可视化 IDE
分析浏览器使用记录
分析浏览器使用记录
76 0
|
Web App开发 数据采集 测试技术
如何隐藏Selenium特征实现自动化网页采集
Selenium是一个流行的自动化网页测试工具,可以通过模拟用户在Chrome浏览器中的操作来完成网站的测试。然而,有些网站会检测浏览器是否由Selenium驱动,如果是,就会返回错误的结果或拒绝访问。为了避免这种情况,我们需要隐藏Selenium的特征,让网站认为我们是正常的用户。
861 0
如何隐藏Selenium特征实现自动化网页采集
|
监控 测试技术
【实测】selenium脚本解决随机弹窗广告问题
【实测】selenium脚本解决随机弹窗广告问题
|
Java Android开发 内存技术