浏览器操作作业 · 截图保存

整页截图 / base64 / 元素级截图(Selenium 4.0+)

首页 浏览器操作导航

页面导读 · 截图保存

save_screenshot / as_base64 / as_png 三种 API + 元素级截图

学习目标
掌握三种截图 API 的返回值差异,理解视口截图只截当前可见区域
核心 API
save_screenshot("x.png") · get_screenshot_as_base64() · get_screenshot_as_png() · element.screenshot()
作业数量
4 题基础 · +1 进阶可选
难度:⭐⭐⭐ 中等
⚠️ 前置注意: driver 级截图都是视口(当前可见区域),不自动滚动;元素级截图是 Selenium 4 新增;整页截图需用 CDP
参数配置 打开关闭 页面导航 窗口控制 页面信息 元素交互 Cookie操作 截图保存 超时等待

操作 8:页面截图

save_screenshot 保存为文件 · get_screenshot_as_file / base64 / png 三种格式;元素级截图 save_screenshot(element)。

为什么截图是自动化测试的必备?
自动化测试执行完毕后(尤其是失败时),一张截图是"留证据"的核心手段——让你直观看到当时页面状态,是调试和测试报告的关键素材。
save_screenshot
最常用,存本地文件,返回 True/False
get_screenshot_as_file
等价写法(遗留 API),同 save_screenshot
get_screenshot_as_base64
返回 base64 字符串,嵌入 Allure/pytest-html 报告
get_screenshot_as_png
返回 PNG bytes 二进制,上传 AI/OCR
element.screenshot
只截某个元素,Selenium 4+ 独有
⚠️ 重要认知:所有 driver 级截图都是视口截图(viewport)——只截取当前视口的浏览器内容可见区域,不包含浏览器 UI(地址栏、标签栏、工具栏),也不会自动滚动去截上下方的内容!全页截图需 headless Chrome --full-page-screenshot 或 JS 滚动拼接。

练习目标:点击上方 API 卡片或下方按钮,体验不同截图方式

👆 driver 截图只截这里
https://demo.autotest.com/index.html
🏠 自动化测试首页
📷 灰顶=地址栏(不截图)· 白底=视口(截图范围)
截图结果
—
—
点击上方按钮生成截图
# 截图 4 种方式
driver.save_screenshot("page.png")          # 方式 1:最常用
driver.get_screenshot_as_file("page.png")   # 方式 2:等价写法
b64 = driver.get_screenshot_as_base64()     # 方式 3:返回 base64 字符串(邮件/API 上传)
png = driver.get_screenshot_as_png()        # 方式 4:返回 PNG bytes

# 元素级截图(Selenium 4)
el = driver.find_element(By.ID, "demoInput")
el.save_screenshot("element.png")

# ✅ 最佳实践:截图 + 时间戳命名
import os, time
name = f"fail_{int(time.time())}.png"
driver.save_screenshot(os.path.join("screenshots", name))

📝 作业要求

  1. 打开页面 → 用 3 种不同方法截图:save_screenshot() / get_screenshot_as_file() / get_screenshot_as_png() → 对比生成文件的大小
  2. 写一个"异常自动截图"装饰器:函数里 try/except,except 里自动截图 + 把文件名写到日志里,装饰任意一个测试函数试试
  3. 元素级截图:打开本页面 → 定位模拟浏览器里的 .mb-logo("AT"圆形 logo)或 #shotMockBtn("登录 / 注册"按钮),直接 el.save_screenshot("logo.png"),验证它只截元素本身不是整页
  4. driver.get_screenshot_as_base64() 实战:拿到 base64 字符串 → import base64; open("shot.png","wb").write(base64.b64decode(b64_str)) 解码保存 → 对比和 save_screenshot() 生成的文件是否一样大;再用它拼一个 HTML:f'<img src="data:image/png;base64,{b64_str}">',直接把截图嵌进测试报告正文
  5. 进阶 · 可选 Selenium 默认只能截视口(屏幕可见区域),要截整页需用 CDP(Chrome DevTools Protocol):driver.execute_cdp_cmd("Page.captureScreenshot", {"captureBeyondViewport": True}),拿到 base64 后自己解码存文件,对比视口和整页截图的差异
💡 提示:base64 截图适合发邮件 / 上传到接口,不用保存文件

关于我们

Python 自动化测试学习平台是一个面向软件测试工程师、开发人员及在校学生的交互式在线学习平台,专注于 Selenium WebDriver 与 Python unittest 自动化测试技能的教学与实践。

我们以"理论 + 实战 + 可交互演示"为核心特色,将八种常规元素定位和Javascript定位、元素操作、自动化测试工具、单元测试、测试模型等知识体系拆分为模块化课程,每个模块都配有可点击、可输入、可运行的模拟练习页面。

平台致力于降低自动化测试的入门门槛,让学习者从"看懂代码"到"动手实操",逐步掌握企业级自动化测试框架的设计与落地能力。

联系方式

📧邮箱:lq@selenium-auto-test.com

📞电话:0755-12345678

📍地址:深圳

💬微信公众号:Selenium自动化测试

🐙GitHub:github.com/selenium-auto-test

免责声明

1. 本平台所有示例代码、演示页面及教程内容均仅供学习交流使用,不构成任何商业推广或技术服务承诺。

2. 平台中的 Selenium API 描述、Python 语法说明均以官方文档为准,如有版本差异请以对应官方文档为准。

3. 学习者在实际项目中应用平台所学内容时,应结合自身项目环境进行充分测试,本平台不对因直接使用示例代码而产生的任何直接或间接损失承担责任。

4. 本平台所引用的第三方库(Selenium、ChromeDriver、unittest 等)版权归其各自作者及维护者所有。

5. 如涉及版权问题或内容建议,请及时通过联系方式与我们沟通,我们将第一时间处理。