跳至内容

如何在不写代码的情况下自动化网页截图

选择无代码的网页截图自动化方式:网址列表批量截图、带截图 API 的自动化平台、监控工具或浏览器辅助工具。

9 分钟阅读网页截图作者:Temposhot Team

Website Capture of three URLs with four concurrent browsers

Playwright 和 Puppeteer 这类基于脚本的工具能很好地截取网页,但需要 Node.js、代码编辑器,还需要有人维护脚本。营销人员、设计师、QA 负责人和研究人员常常需要同样的图片,却不想做这些环境配置。下面四类无代码工具能覆盖大多数这类任务。

本文全程使用一个示例:某营销团队每周一截取 30 个公开页面,每个页面各截取一次桌面尺寸和一次移动端尺寸。每周共 60 张截图,每月约 258 张。用这些数字可以比较各选项在时间、存储和费用模式上的差异。

示例任务的四项统计:30 个网址、2 种设备尺寸、每周 60 张截图、按每月 4.3 周计算约 258 张截图。

先确定任务,再选工具

用三个问题可以快速缩小范围:

  1. 需要截取多少页面? 一个页面、20 个页面,还是几百个页面。
  2. 多久截取一次? 只做一次、需要时手动执行,还是按固定计划执行。
  3. 之后怎么使用结果? 图片文件夹、给客户的 PDF、页面变化时的提醒,还是把文件发送到其他应用。

只截取一个页面的一次性任务只需要浏览器。每天截取 50 个页面并在变化时提醒,则需要托管服务。大多数实际任务介于两者之间。

先写下任务单,再比较工具

供应商页面描述的是功能,而不是你的任务。写一份简短的任务单,把上面三个问题转换为可以逐项核对的数字。填写一次,并与网址列表放在一起保存。

需要确认的七个项目清单:网址数量、设备尺寸、频率、是否需要登录、等待时间、输出格式以及文件存放位置。

示例任务的任务单内容如下:60 行,Desktop 和 Mobile,每周一次,无需登录,4 个页面内容加载较晚,输出为一个包含图片的 ZIP 和一个供团队查看的 PDF,文件保存在共享云盘。下面每个选项都会按照这份任务单进行评估。

按截图次数计算,而不是按页面数量

托管工具的价格和本地工具的运行时间都与截图次数相关。一次截图指一个网址、一种设备尺寸在某一时刻的一次捕获。示例任务有 30 个页面,但每次运行产生 60 次截图,每月约 258 次。

在多数托管套餐中,全页截图比视口截图更贵,所有工具的耗时也更长。一个长落地页的高度可能是 8 到 12 个屏幕。应尽早确定团队需要整页还是只需要第一屏。

方式一:网址列表截图工具

网址列表工具接收粘贴的网址列表,在浏览器中逐个加载页面,并为每个网址保存一张图片。在 Mac 上,Temposhot Website Capture 采用这种方式,完全在本地计算机上运行。

Website Capture of three URLs with four concurrent browsers
  1. 粘贴列表

    按 Command+2 打开 Website Capture(网页截图),选择 Bulk insert,然后每行粘贴一个网址。

  2. 选择布局

    选择 Desktop(1920×1080)、Tablet(768×1024)或 Mobile(390×844),以及 Viewport(视口)或 Full page(整页)。

  3. 设置截图时机

    大多数网站保持 Load 作为等待条件。对于内容加载较晚的页面,使用 Network idle 并加上几秒的 delay。

  4. 运行并导出

    选择 Start Capture。当各行显示 Capture complete 时,可将结果导出为 ZIP、Images、PDF 或 MP4。

每一行都可以设置自己的参数,因此某个加载较慢的页面可以单独等待更长时间,而不影响其他行。最多可以同时运行 10 个浏览器,默认为 4 个。Cookie 横幅采用尽力处理的方式,提供四种模式:Reject banners(拒绝横幅)、Accept minimal(仅接受必要项)、Hide only(仅隐藏)和 Leave unchanged(保持不变)。

这种方式适合按需执行的公开页面批量截图。Mac 关机时它不会按计划运行。

用 30 个网址生成 60 行列表

Website Capture 中每一行只对应一种设备尺寸。若要同时截取同一页面的桌面和移动端尺寸,该页面需要占两行。将 30 个网址保存在纯文本文件中,粘贴两次即可。

四个编号步骤:用 Bulk insert 粘贴 30 个网址,将前 30 行设为 Desktop,再次粘贴同样的列表,并将新增的 30 行设为 Mobile。

Temposhot 会为 example.com 这类不带协议的域名自动补全 https://,因此文本文件中可以只写域名。若协议不是 HTTP 或 HTTPS,界面会显示 “Enter a valid HTTP or HTTPS URL.”。同时修正文本文件中的这些行,使下周粘贴的内容保持正确。

每周运行的默认行设置

需要逐周比较的页面必须每次使用相同的设置。不同的等待时间或拦截选项会导致图片无法对齐。下表中的值适用于几秒内即可加载完成的定价页和落地页。

桌面行的设置面板:Desktop 设备、整页区域、Load 等待、2 秒延迟、仅隐藏 Cookie、JPEG 质量 85、拦截广告和追踪器。

Hide only(仅隐藏)会移除横幅但不做任何选择,最接近回访用户看到的页面布局。Reject banners(拒绝横幅)在某些网站上可能触发页面重新加载。如果页面在重新加载后显示不同,先与 Leave unchanged(保持不变)的预览进行比较,再决定是否修改。

为慢速页面和移动端行设置覆盖值

示例中的 30 个页面里有 4 个在 load 事件之后通过脚本加载定价表。这些行保留默认值,仅延长 delay。移动端行只使用视口,因为团队希望查看手机用户首先看到的第一屏。

移动端行的设置面板:Mobile 390 × 844 设备、Viewport 区域、Load 等待、5 秒延迟、PNG 格式、保持拦截追踪器。

在行面板中选择 Render preview(渲染预览),可以在运行前测试覆盖值。双击预览可以放大查看。如果之后修改了某个值,预览会显示 Out of date(已过期),直到重新渲染为止。

估算运行时间

运行时间取决于页面大小、网络速度和延迟设置。用秒表测量一行的耗时,再乘以行数即可。示例中,从开始到保存文件,一行约需 8 秒。

60 行的运行时间对比:1 个浏览器约 8 分钟,4 个浏览器约 2 分钟,10 个浏览器约 48 秒。

对于这种规模的每周任务,默认值 4 已经足够。只有当列表增长到几百行且 Mac 有空闲内存时,才需要把 Concurrent browsers(并发浏览器)提高到接近 10。当 Mac 负载较高时,Temposhot 会显示一条提示,建议降低该值。

跟踪一行在运行中的状态

每一行都有自己的状态,与批次中的其他行互不影响。下面的时间线展示一个设置了 2 秒延迟的桌面行。逐行观察,可以解释大多数时间问题。

单行时间线:0 秒为 pending,1 秒开始 capturing,5 秒触发 load 事件,7 秒延迟结束并截图,8 秒 complete 完成。

某行长时间停留在 Capturing 状态,通常是在等待其等待条件。对于持续轮询网络的页面,Network idle 可能会超时。这类行请改为 Load 并设置较短的延迟。

不重新开始即可处理失败的行

某一行失败不会中止整个批次。该行出现 Retry 控件后,选择它一次,该行会回到 Retry pending(等待重试)。如果已知失败原因,先修改其设置。

四种失败原因的对比:每种情况的行表现以及选择 Retry 前需要修改的设置。

当批次结束时存在部分失败,会话状态显示 Partial(部分完成)。已完成的截图仍可导出。Stop Capture(停止截图)会结束剩余的任务,已完成的截图同样会保留。

导出并归档结果

导出文件保存到 Settings > General 中设置的 Export path(导出路径)。Open Export Folder(打开导出文件夹)会在访达中显示该文件夹。对于示例任务,团队会导出一个用于归档的 ZIP 和一个用于周一会议的 PDF。

共享归档的文件树:年份文件夹,周文件夹,每个周文件夹内包含图片 ZIP、PDF 和网址列表文本文件。

将 urls.txt 复制到每个周文件夹中,可以准确记录该次运行包含哪些页面。如果第 45 周新增了一个网址,之后可以直接看出这一变化。文件夹名称由你自行决定;Temposhot 把导出文件写入导出路径,之后由你将其移动到归档目录。

如果导出路径中已存在同名文件,Temposhot 会在新文件名后添加编号,不会覆盖原文件。每次运行也会作为一个会话保存在 Capture History(截图历史)中,默认保留 30 个会话。

每周重复执行任务

设置稳定后,每周的操作很简单。顺序很重要:导出前先检查各行,导出完成后再开始下一周的运行。

由五个方框和箭头组成的流程:粘贴网址列表、渲染一个预览、开始截图、重试失败的行、将 ZIP 和 PDF 导出到周文件夹。

粘贴新列表前先选择 Clear all(全部清除),以免上周的行被重复执行。通过 Bulk insert 添加的行会使用运行默认值。将行覆盖设置列表保存在单独的文件中,例如 overrides.txt,每次粘贴后重新应用。

方式二:自动化平台加截图 API

通用自动化平台通过触发器和操作连接各类应用。与截图 API配合使用时,它们可以在向电子表格添加一行、提交表单或定时触发器触发时截取页面。之后图片会被转存到云存储、聊天频道或数据库中。

这种方式通常不需要编写代码,但需要分别注册各服务的账户、配置 API 密钥,并仔细设置字段映射。平台和 API 的费用通常都与用量相关。使用前需在各供应商的当前套餐页面核实价格。

示例任务在这种方式下的样子

定时触发器每周一 08:00 启动。一个步骤从电子表格读取 30 个网址,一个循环对每个网址分别以桌面和移动端宽度调用截图 API 两次。最后一个步骤将 60 张图片上传到云端文件夹。

大多数平台将每个步骤或每次循环计为一个计费任务。每周 60 次 API 调用加 60 次上传,可能被计为 120 多个任务。乘以 4.3 周后,再与各套餐的每月任务额度比较。

开始构建前需要检查的要点

  • 超时。 自动化平台通常限制单个步骤的运行时长。对于较重的页面,整页截图的耗时可能超过步骤的时间上限。
  • 等待选项。 检查 API 是否提供延迟或等待条件。没有这些选项时,加载较晚的价格会显示为空白。
  • 失败处理。 确定某次调用失败时的处理方式。遇到第一个错误就停止的循环,会丢失之后尚未完成的截图。
  • 存储。 图片在到达你的文件夹之前,会经过 API 供应商和自动化平台。分别核实两家供应商的数据保留条款。

方式三:网站监控工具

网站监控服务按计划截取页面,并将每次截图与上一次进行比较。当差异超过阈值时发送提醒。部分服务会保存每次截图的存档。

这类工具回答的是“这个页面是否发生了变化”,而不是“给我一个截图文件夹”。它们适合价格跟踪、合规检查和竞争对手页面监控。页面、计划和图片都保存在供应商的服务器上。

监控何时更适合示例任务

如果每周一的截图只为发现定价变化,监控服务可以省去人工核对。它在所有 Mac 都关机时也能运行,并且只在页面变化时发送提醒。团队只需打开 2 个发生变化的页面,而不必查看 60 张图片。

如果团队需要图片本身,例如用于季度演示文稿,监控服务的适用性较低。从托管服务导出存档可能需要额外步骤,且格式由供应商决定。

使用本地工具手动比较截图

网址列表工具的本地运行不具备自动变化检测。同一页面的两次每周截图可以并排比较。免费的 Compare Images 工具提供滑块、淡入淡出、并排视图和像素差异视图。

只有两次截图使用了相同的设备、区域、等待、延迟和拦截设置时,比较才有意义。否则,差异视图会显示布局偏移,而这些偏移并非真实变化。

方式四:浏览器扩展和一次性辅助工具

所有主流浏览器都可以在不安装额外软件的情况下保存至少一个页面:

  • Chrome 和 Edge DevTools。 打开 DevTools,按 Shift+Command+P 打开命令菜单,然后运行 “Capture full size screenshot”。
  • Firefox。 右键点击页面,选择 Take Screenshot,再选择 Save full page。
  • Safari。 选择 File,再选择 Export as PDF,将页面保存为 PDF。

整页扩展会添加一个工具栏按钮,它会滚动页面、截取图像,并将各部分拼接为一张图片。免费的 Temposhot 整页截图扩展适用于 Chrome 116 及以上版本,在本地以 Retina 分辨率拼接各视口,并下载一张 PNG 图片。

这些辅助工具在你自己的浏览器会话中运行,因此已登录的页面可以正常截取。每次操作只处理一个标签页。

截图完成后,Image Converter 可以将 PNG 转换为 JPG 或 WebP,Stitch Screenshots 可以将多张截图拼接为一张长图。两者都在浏览器中运行,不会上传文件。

单页截图的快捷操作

熟悉键盘操作路径后,浏览器辅助工具会更快。下表列出浏览器快捷键,以及每周流程中使用的 Temposhot 快捷键。

快捷键列表:Option Command I 打开 Chrome DevTools,Shift Command P 打开其命令菜单,Command 2 打开 Website Capture,Command N 新建会话。

已登录页面的限制

Website Capture 会在独立的私密浏览器会话中打开每个页面,该会话不在两次运行之间保留 Cookie 或站点数据。它不会使用你自己浏览器的登录状态。仪表盘或账户页面会以未登录访客的视角被截取,通常显示为登录表单。

对示例团队而言,他们关心的页面中有 2 个位于合作方登录之后。这 2 个页面通过扩展在已登录的浏览器中截取,其余 58 次截图仍使用网址列表运行。

仍应使用代码的情况

以下情况下,无代码工具不再是更短的路径:

  • 截图需要在每次部署时通过 CI 流水线运行
  • 每个页面在截图前需要执行脚本步骤,例如填写表单或打开菜单
  • 输出必须遵循严格的命名或存储规则
  • 截图是测试套件中的一个步骤,例如视觉回归测试

以上情况可以从 如何使用 Playwright 自动化网页截图 开始。

无代码方案不再适用的信号

切换方案通常不会在第一天发生。当手动环节所花的时间超过编写脚本的时间时,才需要切换。以下信号通常最先出现。

做与不做列表:公开页面的定时或按需截图保留无代码方式;当每个页面都需要点击、登录或按部署运行时,迁移到代码。

如果文件名必须遵循严格的规则,例如 pricing__mobile__2026-11-02.png,脚本会更合适。在无代码运行中,每周手动重命名 60 个文件所花的时间,可能超过截图本身。Playwright 截图测试指南介绍了测试场景下的脚本方案。

简单的决策规则

情况选择
只需要一个页面,立即执行浏览器辅助工具或扩展
按需截取公开页面列表,文件保存在本地网址列表截图工具
截图需要自动发送到其他应用自动化平台加截图 API
需要按计划在页面变化时提醒网站监控工具
截图在测试或部署中运行代码

将规则应用于示例任务

示例团队最终采用混合方案。58 个公开页面的截图在每周一上午作为网址列表批量运行。2 个已登录页面通过浏览器扩展截取。

如果团队之后需要在价格变化后数小时内收到提醒,定价页面会改用监控服务。网址列表运行则只保留报告中使用的页面。网址数量、频率或输出形式发生变化时,都应重新检查任务单。

常见问题

无需代码能否截取需要登录的页面?

使用浏览器辅助工具或扩展,因为它们在你已登录的浏览器中运行。使用自有浏览器的网址列表工具只能截取未登录访客看到的内容。

无代码截图的质量是否低于脚本截图?

本质上并不低。两者都在真实的浏览器引擎中加载页面。质量取决于视口尺寸、等待时机和图片格式,而大多数无代码工具都会将这些项作为设置提供。

运行网址列表时是否需要保持 Mac 唤醒?

本地工具需要。Website Capture 在 Mac 上的受管浏览器中运行,因此需要保持应用打开,直到所有行完成。

同一行能否同时截取桌面和移动端尺寸?

不能。每行只有一个 Device 设置。同一个网址需要添加两次,一行设为 Desktop,另一行设为 Mobile。

每周归档应选择哪种格式?

JPEG 质量 85 能让较长的整页截图保持较小的体积。PNG 适合需要清晰呈现小号界面文字的页面。WebP 也可用,质量范围与 JPEG 相同,为 1 到 100。

为什么同一页面与我自己的浏览器看起来不同?

Website Capture 默认拦截广告和追踪器,并根据行设置处理 Cookie 横幅。它也不使用你的 Cookie 运行。若要更接近正常访问,请关闭该行的拦截功能,并将 Cookies 设为 Leave unchanged(保持不变)。

需要无代码的网页截图自动化?

Temposhot Website Capture 可以将粘贴的网址列表在 Mac 上转换为一个截图文件夹、一个 PDF 或一个 MP4。参见网页截图自动化,或按照 Website Capture 快速入门 操作。

no-codewebsite-capturescreenshotsautomation

本文使用的术语: full page screenshot, playwright, puppeteer, screenshot api, screenshot automation

把重复性截图整理为成品

Temposhot 可按定时或每次点击进行截图,并将结果导出为 PDF、图片、ZIP 或 MP4。

相关文章