拍摄多个截图¶
您可以使用 YAML 文件配置多个截图。创建一个名为 shots.yml 的文件，内容如下所示：
- output: example.com.png
url: http://www.example.com/
- output: w3c.org.png
url: https://www.w3.org/
然后运行该工具，如下所示：
shot-scraper multi shots.yml
这将创建两个图像文件，www-example-com.png 和 w3c.org.png，其中包含这两个 URL 的截图。
使用 - 从标准输入传递 YAML
echo "- url: http://www.example.com" | shot-scraper multi -
如果您使用 -n 或 --no-clobber 选项运行该工具，则将跳过输出文件已存在的任何截图。
您可以通过指定要创建的输出文件来指定要拍摄的截图子集。例如，要仅拍摄在 shots.yml 中定义的 one.png 和 three.png 的截图，请运行此命令：
shot-scraper multi shots.yml -o one.png -o three.png
url: 也可以设置为磁盘上文件的路径
- output: index.png
url: index.html
使用 --scale-factor 选项以特定的缩放因子捕获所有截图，这有效地模拟了不同的设备像素比例。此设置对于测试高清晰度显示器或模拟具有各种像素密度的屏幕非常有用。
例如，将 --scale-factor 3 设置为 3 会生成 CSS 像素比例为 3 的截图，这非常适合模拟高分辨率显示器，例如 Apple 的 iPhone 12 屏幕。
要以 3 倍缩放因子（分辨率提高三倍）拍摄截图，请运行以下命令：
shot-scraper multi shots.yml --scale-factor 3
这将把所有截图的宽度和高度都乘以 3，从而得到细节级别更高的图像，适用于需要捕获屏幕在高 DPI 显示器上显示的效果的场景。
使用 --retina 选项以 Retina 分辨率拍摄所有截图，将文件的尺寸加倍
shot-scraper multi shots.yml --retina
注意：--retina 选项不应与 --scale-factor 标志一起使用，因为它们是互斥的。如果同时提供两者，命令将引发错误以防止冲突。
要仅截取由 CSS 选择器定义的页面区域，请在 YAML 块中添加 selector
- output: bighead.png
url: https://simonwillison.net/
selector: "#bighead"
您可以使用 selectors: 列表传递多个选择器。您还可以使用 padding: 指定额外的填充
- output: bighead-multi-selector.png
url: https://simonwillison.net/
selectors:
- "#bighead"
- .overband
padding: 20
您可以使用 selector_all: 捕获与选择器匹配的所有元素，或者使用 selectors_all: 传递此类选择器的列表
- output: selectors-all.png
url: https://simonwillison.net/
selectors_all:
- .day
- .entry:nth-of-type(1)
padding: 20
--js-selector 和 --js-selector-all 选项可以使用 js_selector:、js_selectors:、js_selector_all: 和 js_selectors_all: 键提供
- output: js-selector-all.png
url: https://github.com/simonw/shot-scraper
js_selector: |-
el.tagName == "P" && el.innerText.includes("shot-scraper")
padding: 20
要在页面加载后但在拍摄截图之前执行 JavaScript，请添加一个 javascript 键
- output: bighead-pink.png
url: https://simonwillison.net/
selector: "#bighead"
javascript: |
document.body.style.backgroundColor = 'pink'
您还可以为每个项包含所需的 height、width、quality、wait 和 wait_for 选项
- output: simon-narrow.jpg
url: https://simonwillison.net/
width: 400
height: 800
quality: 80
wait: 500
wait_for: document.querySelector('#bighead')
记录到 HTTP Archive¶
与 shot-scraper har 命令 类似，shot-scraper multi 可以选择性地记录会话期间发出的请求的 HTTP Archive 文件。
添加 --har 标志将所有请求和响应记录到 trace.har JSON 文件，或者使用 --har-zip 记录到 trace.har.zip 文件。使用 --har-file filename.har 提供自定义文件名的路径 - 根据文件扩展名，它将记录为 JSON 或 zip。
如果您针对大量页面运行此命令，则应使用 --har-zip 以避免 JSON HAR 文件过大导致 Playwright 崩溃。
此示例
shot-scraper multi shots.yml --har
将输出如下内容：
Screenshot of 'http://www.example.com/' written to 'example.com.png'
Screenshot of 'https://www.w3.org/' written to 'w3c.org.png'
Wrote to HAR file: trace.har
在写入 HAR 时，您可以省略 YAML 文件中的 output: 键来跳过拍摄该文件的截图。例如，这个 shots.yml 文件
- url: https://example.com/
- url: https://datasette.com.cn/
像这样运行时
shot-scraper multi shots.yml --har-zip
将产生此输出，记录 HAR 但不拍摄任何截图
Skipping screenshot of 'https://example.com/'
Skipping screenshot of 'https://datasette.com.cn/'
Wrote to HAR file: trace.har.zip
在会话期间运行服务器¶
如果您需要在 shot-scraper multi 会话期间运行服务器，您可以使用 server: 块来指定，如下所示：
- server: python -m http.server 8000
server: 键也接受一个参数列表
- server:
- python
- -m
- http.server
- 8000
配置好服务器后，您现在可以截取 http://localhost:8000/ 以及该服务器托管的任何其他 URL 的截图
- output: index.png
url: http://localhost:8000/
当 shot-scraper multi 命令完成后，服务器进程将自动终止，除非您向 shot-scraper multi 传递 --leave-server 选项，在这种情况下服务器将保持运行 - 您可以使用控制台输出中显示的 PID，通过 kill PID 来终止它。
在步骤之间运行自定义代码¶
如果您正在截取单个应用程序的截图，您可能会发现在截图之间运行额外的步骤以某种方式修改该应用程序会很有用。
您可以使用 sh: 或 python: 键来做到这一点。这些键可以指定在拍摄截图之前运行的 shell 命令或 Python 代码
- sh: echo "Hello from shell" > index.html
output: from-shell.png
url: http://localhost:8000/
您也可以像这样指定一个 shell 参数列表
- sh:
- curl
- -o
- index.html
- https://www.example.com/
output: example.png
url: http://localhost:8000/
如果您在没有 url: 键的情况下指定这些步骤，它们仍将作为单独的任务执行，而不会同时拍摄截图
- sh: echo "hello world" > index.html
- python: |
content = open("index.html").read()
open("index.html", "w").write(content.upper())
shot-scraper multi --help¶
此命令的完整 --help 信息
Usage: shot-scraper multi [OPTIONS] CONFIG
Take multiple screenshots, defined by a YAML file
Usage:
shot-scraper multi config.yml
Where config.yml contains configuration like this:
- output: example.png
url: http://www.example.com/
For full YAML syntax documentation, see:
https://shot-scraper.datasette.io/en/stable/multi.html
Options:
-a, --auth FILENAME Path to JSON authentication context file
--scale-factor FLOAT Device scale factor. Cannot be used together
with '--retina'.
--retina Use device scale factor of 2. Cannot be used
together with '--scale-factor'.
--timeout INTEGER Wait this many milliseconds before failing
-n, --no-clobber Skip images that already exist
-o, --output TEXT Just take shots matching these output files
-b, --browser [chromium|firefox|webkit|chrome|chrome-beta]
Which browser to use
--browser-arg TEXT Additional arguments to pass to the browser
--user-agent TEXT User-Agent header to use
--reduced-motion Emulate 'prefers-reduced-motion' media feature
--log-console Write console.log() to stderr
--fail Fail with an error code if a page returns an
HTTP error
--skip Skip pages that return HTTP errors
--silent Do not output any messages
--auth-password TEXT Password for HTTP Basic authentication
--auth-username TEXT Username for HTTP Basic authentication
--leave-server Leave servers running when script finishes
--har Save all requests to trace.har file
--har-zip Save all requests to trace.har.zip file
--har-file FILE Path to HAR file to save all requests
--help Show this message and exit.