影刀RPA 网页全页面截图与局部截图的正确方法作者林焱截图在RPA流程里用得非常多采集数据时截图存证、流程出错时截图排查、生成报告时附带页面快照、监控页面变化时做前后对比。但很多新手截图的时候遇到各种问题——只截了可视区域、长页面截不全、截图模糊、截图时机不对导致内容还没加载。这篇文章把影刀里各种截图方式的应用场景和坑讲清楚。一、影刀的截图指令1.1 网页截图影刀提供【网页截图】指令专门用于截取浏览器页面的内容【网页截图】 网页对象选择目标网页 截图方式全页面 / 可视区域 / 指定元素 保存路径D:\screenshots\page.png三种截图方式的区别方式截取范围适用场景全页面整个网页包括需要滚动才能看到的部分存档、报告附图可视区域当前浏览器窗口能看到的部分快速截取当前状态指定元素只截取某个元素的区域截取表格、图表、特定区块1.2 屏幕截图【屏幕截图】指令截取的是整个电脑屏幕不只是浏览器【屏幕截图】 截图范围全屏 / 指定区域 / 指定窗口 保存路径D:\screenshots\screen.png适用场景截取桌面操作、系统弹窗、非浏览器应用的界面。二、全页面截图的坑2.1 固定导航栏重叠很多网站有固定在顶部的导航栏position: fixed全页面截图时滚动到不同位置导航栏一直叠在上面导致截图里导航栏区域的内容被遮挡。解决方法截图前用JS隐藏固定定位的元素// 隐藏所有固定定位的元素document.querySelectorAll(*).forEach(function(el){varstylewindow.getComputedStyle(el);if(style.positionfixed||style.positionsticky){el.style.displaynone;}});截图完成后再恢复刷新页面即可。2.2 懒加载图片没加载全页面截图时页面会自动滚动但如果图片是懒加载的滚动到可见时才加载截图时图片可能还没加载完截出来是空白。店群矩阵自动化突破运营极限解决方法截图前先滚动到页面底部让所有图片触发加载等2-3秒后再截图1. 【执行JavaScript】滚动到底部 window.scrollTo(0, document.body.scrollHeight) 2. 【延时等待】3秒 3. 【执行JavaScript】滚动到顶部 window.scrollTo(0, 0) 4. 【延时等待】1秒 5. 【网页截图】全页面截图2.3 页面太长导致截图被截断有些超长页面比如无限滚动的列表全页面截图可能会因为内容太长被截断或者内存不足。这种情况不适合全页面截图改用分段截图1. 获取页面总高度 2. 按视口高度分段 3. 每段滚动到对应位置 4. 【网页截图】可视区域截图 5. 多张图片拼接用Python PIL2.4 截图文件太大全页面截图保存的PNG文件可能有几MB甚至十几MB占用存储空间。如果对图片质量要求不高可以转成JPGfromPILimportImageimportos png_pathget_variable(screenshot_path)jpg_pathpng_path.replace(.png,.jpg)imgImage.open(png_path)img.save(jpg_path,JPEG,quality85)os.remove(png_path)# 删除PNG原图set_variable(screenshot_path,jpg_path)三、指定元素截图3.1 基本用法【网页截图】 截图方式指定元素 目标元素定位到要截取的元素 保存路径D:\screenshots\element.png适用场景只截取页面上的表格、图表、商品图片区域、评论区域等。3.2 元素截图的定位元素截图的关键是准确定位到目标元素。定位策略场景1截取表格 → XPath: //table[classdata-table] 场景2截取图表区域 → XPath: //div[idchart-container] 场景3截取商品主图 → XPath: //div[classmain-image]//img坑元素被遮挡目标元素上方有浮层遮挡比如广告浮层、cookie提示条截图把浮层也截进去了。截图前先关闭浮层document.querySelector(.ad-overlay).style.displaynone;document.querySelector(.cookie-banner).style.displaynone;3.3 元素超出可视区域目标元素在页面下方需要滚动才能看到。影刀的元素截图通常能自动滚动到元素位置再截图但有些情况下需要手动滚动1. 【执行JavaScript】滚动到目标元素 document.querySelector(#target).scrollIntoView() 2. 【延时等待】1秒 3. 【网页截图】指定元素截图四、截图时机什么时候截4.1 等待页面加载完成再截图1. 【打开网页】打开页面 2. 【等待元素】等待页面核心内容元素出现 3. 【延时等待】2秒等图片和样式加载 4. 【网页截图】全页面截图坑截到了加载中的页面页面HTML已经加载但CSS和图片还没加载完截图是错乱的。等待元素出现只能确认DOM加载了不能确认渲染完成。加一个额外延时让浏览器完成渲染。4.2 动画和过渡效果有些页面有动画效果淡入、滑入等截图时动画还没结束截到的是中间状态。等动画完成后再截图1. 触发操作点击按钮等 2. 【延时等待】1-2秒等动画完成 3. 【网页截图】截图4.3 动态内容截图页面内容是动态更新的比如通过AJAX刷新了数据需要在数据更新完成后再截图。监听数据容器的内容变化1. 触发数据刷新 2. 【等待元素】等待数据容器内容变化/加载完成 3. 【延时等待】1秒 4. 【网页截图】截图五、截图在流程中的实际应用5.1 出错时自动截图在Try-Catch的Catch块里加截图出错时自动保存现场Try 【点击】点击某个按钮 【等待元素】等待结果出现 Catch 【网页截图】截取当前页面 保存路径 D:\\error_screenshots\\error_ timestamp .png 【日志输出】操作失败已截图 保存路径 End Try这是最实用的截图场景。出问题时截图能帮你快速定位原因不用反复跑流程复现问题。5.2 采集数据时附带截图每采集一条数据附一张截图作为凭证1. 遍历采集列表 a. 【获取元素文本】采集商品名称 b. 【获取元素文本】采集商品价格 c. 【网页截图】指定元素截图截取商品区域  d. 保存路径 D:\\evidence\\ 商品编号 .png e. 把截图路径也存入采集结果5.3 监控页面变化定期截图对比发现页面变化1. 【打开网页】打开监控页面 2. 【网页截图】截图 → current.png 3. Python节点和上次的截图 last.png 对比 from PIL import Image import imagehash img1 imagehash.average_hash(Image.open(last.png)) img2 imagehash.average_hash(Image.open(current.png)) if img1 - img2 5: # 差异大于阈值 set_variable(page_changed, True) else: set_variable(page_changed, False) 4. 把 current.png 重命名为 last.png为下次对比准备 5. 如果 page_changed → 发送告警5.4 报告中插入截图生成HTML报告时插入截图report_htmlf html body h2采集报告/h2 p采集时间{datetime.now()}/p img srcscreenshot.png stylewidth:100% [video(video-bSR9vYlr-1784657071755)(type-csdn)(url-https://live.csdn.net/v/embed/524992)(image-https://v-blog.csdnimg.cn/asset/b59aed2f01d4fe8583467562aaf4dcfd/cover/Cover0.jpg)(title-temu店群自动化报活动案例)] /body /html 六、截图的文件管理6.1 文件命名规范别用1.png、2.png这种名字三天后你不知道是什么。用有意义的命名截图文件名格式{场景}_{日期}_{时间}.png 示例product_list_20260701_143025.png 示例error_login_20260701_091530.png Python生成文件名fromdatetimeimportdatetime timestampdatetime.now().strftime(%Y%m%d_%H%M%S)filenamefproduct_list_{timestamp}.png6.2 自动清理旧截图截图文件积累多了很占空间。定期清理超过30天的截图importosimporttime screenshot_dirD:\\screenshotsnowtime.time()max_age30*24*3600# 30天forfilenameinos.listdir(screenshot_dir):filepathos.path.join(screenshot_dir,filename)ifos.path.isfile(filepath):file_agenow-os.path.getmtime(filepath)iffile_agemax_age:os.remove(filepath)6.3 截图路径用变量管理不要在每一步硬编码路径用一个变量统一管理1. 【赋值】screenshot_dir D:\\screenshots\\ 2. 【赋值】today 当前日期字符串 3. 所有截图路径 screenshot_dir today \\ 文件名七、避坑清单坑1截图保存路径不存在保存路径的目录不存在截图保存失败。截图前先创建目录importos os.makedirs(D:\\screenshots\\2026-07,exist_okTrue)坑2截图时浏览器最小化了浏览器最小化或被其他窗口遮挡【屏幕截图】截到的是其他窗口。用【网页截图】而不是【屏幕截图】网页截图不受窗口遮挡影响。坑3高分辨率屏幕截图模糊高DPI屏幕上截图可能模糊。在影刀的浏览器设置里调整设备像素比DPR或者在截图指令中设置缩放比例。坑4截图是黑屏浏览器开启了硬件加速截图可能是黑屏。在浏览器设置里关闭硬件加速或者切换到内置浏览器。坑5文件名包含特殊字符从页面提取的文本直接用作文件名如果包含/、\、:等特殊字符文件保存失败。保存前清洗文件名importre safe_namere.sub(r[\\/:*?|],_,original_name)