# @duckduckgo/ddg-screen-diff 中文文档

规范地址：https://npmcn.com/package/%40duckduckgo/ddg-screen-diff/

版本：0\.4\.6
npm 元数据更新时间：2023-05-09T21:10:07.097Z
中文译文更新时间：2026-11-12T23:46:32.831Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40duckduckgo/ddg-screen-diff
原文对照：https://npmcn.com/package/%40duckduckgo/ddg-screen-diff/?lang=original
项目主页：https://github.com/duckduckgo/ddg-screen-diff#readme
源码仓库：https://github.com/duckduckgo/ddg-screen-diff

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：69.4 kB，14 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：8 个
- 首次发布：2018-08-09T10:47:44.234Z
- 最新版本发布：2023-05-09T21:10:06.923Z
- 近 30 天下载量：3153（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

DuckDuckGo 的可视回归工具

## 安装

```sh
npm install @duckduckgo/ddg-screen-diff
```

也可以使用：`pnpm add @duckduckgo/ddg-screen-diff`、`yarn add @duckduckgo/ddg-screen-diff`、`bun add @duckduckgo/ddg-screen-diff`

## README

# 屏幕驱动工具

这个 `ddg-screen-diff` 工具可以取出一个特定页面的截图 / search / IA,相对于任何主机名,有多个浏览器.

这是一个内部工具,仍在积极开发之中。 我们的优先事项是:

1.  尽量对我们的内部团队有用.
2.  使它对我们的开源贡献者有用.
3.  将其拆分成一个通用的国家预防机制模块,其中有一个基于插件的架构,任何人都可以用于自己的网站.

如果你有任何想法 如何实现这一点, 感觉自由 创建一个问题或拉请求.

## 设置

您需要安装 [节点JS](https://nodejs.org/) - 首选方法取决于你的方位。 我们只是用v10.37测试过,但是 _应_ 与新版本的NodeJS一起工作.

```
$ sudo npm install -g ddg-screen-diff
```

使用基于 Debian 的 Linux distro 您可能会遇到一个错误 `node: not found`的固定方式是安装 `nodejs-legacy` 软件包( r)`sudo apt-get install nodejs-legacy`) (中文(简体) ).

其他依存关系:

-   铬浏览器(第59版及以上)
-   铬-铬河
-   图像映射或图形映射

您可能需要添加 `/usr/lib/chromium-browser/` 给你的$PATH.

## 使用量

```
$ ddg-screen-diff -h

Usage: ddg-screen-diff [--version] [--help] <command> ... [options]

Commands:
  search  Create a screenshot against a search query
  path    Create a screenshot against an arbitrary path
  ia      Create a screenshot against an IA
  group   Create a screenshot against a pre-defined group

Options:
  --version   Show version number                                                          [boolean]
  -h, --help  Show help                                                                    [boolean]

```

## 搜索命令

### 路径

```
Usage: ddg-screen-diff path <path> [<host|env> ...] [options]
```

对任意路径进行截图 用于对需要很多查询字符串参数的查询进行截图,以及静态页面.

```
$ ddg-screen-diff path "?q=big+apple"
$ ddg-screen-diff path "bangs"
```

### 搜索

```
Usage: ddg-screen-diff search <query> [<host|env> ...] [options]
```

对任意查询进行截图.

```
$ ddg-screen-diff search "big apple"
```

(这与 `ddg-screen-diff path "?q=big+apple"`. ) (中文(简体) )

### 亚

```
Usage: ddg-screen-diff ia <ia name> [--query <query>] [<host|env> ...] [options]
```

取一个IA名字的截图.

```
$ ddg-screen-diff ia products
```

默认情况下,此选项从 IA 元数据中取出示例查询, 所以上面相当于 `ddg-screen-diff path "?q=ipad+2&ia=products`。 。 。 .

要检查此 IA 对不同的查询, 请通过 `-q`编号 :`--query` 参数 :

```
$ ddg-screen-diff ia products --query "kitchen sink"
```

### 组

```
Usage: ddg-screen-diff group <group name> [<host|env> ...] [options]
```

预定义命令列表的截图 。 可用于测试跨多个不同IA等的模板. 这些在JSON文件中定义. 这些是假设在 `groupDir`,在配置中指定.

这是 `example` 组,定义于 `example.json` 在该文件夹中 :

```json
[
    { "command": "search", "commandValue": "kitchen sink" },
    { "command": "path", "commandValue": "?q=kitchen+sink&kz=-1" },
    { "command": "ia", "commandValue": "products", "query": "kitchen sink" }
]
```

这些行与使用工具的命令行呼叫相同. 因此,以下几率相当:

```
$ ddg-screen-diff group "example"

and

$ ddg-screen-diff search "kitchen sink"
$ ddg-screen-diff path "?q=kitchen+sink&kz=-1"
$ ddg-screen-diff ia products -q "kitchen sink"
```

不同的是,前者的调用会输出产生的截图和diff同页.

可能的数值 `command` 属性是 `group`,所以你可以调用 组 - 只是小心不要重现!

#### 添加新组

要创建新组, 请在 `groupDir`。 。 。 .

说你加了 `[groupDir]/attribution.json`。您可以调用此组 :

```
$ ddg-screen-diff group "attribution"
```

#### 使用脚本构建组

在某些情况下,也许应该根据一个列表来构建一个组合,这个列表会有所改变——说您有一份不断变化的IA列表.

剧本可以是:

-   返回上方看起来像组 JSON 文件的 JSON 字符串
-   可以在 shell 上执行( 因此它需要 `chmod +x` 和弹跳)

例如,你可以有一个Perl脚本,为所有的作弊表创建一个组(这假设你有 `DDG::Meta::Data` 已安装 :

```perl
#!/usr/bin/env perl

use strict;
use warnings;
use DDG::Meta::Data;
use JSON;

my $meta = DDG::Meta::Data->by_id;

my @results;

while (my ($id, $data) = each $meta){
    next if $data->{perl_module} ne "DDG::Goodie::CheatSheets";
    next if $data->{dev_milestone} ne "live";

    my $result = {
        "command" => "ia",
        "commandValue" => $data->{id}
    };

    push(@results, $result);
}

print encode_json(\@results);
```

#### 选项

其他截图命令的所有选项都在这里工作. 所以,说,你的例子 `foo`。呼叫:

```
$ ddg-screen-diff group "example" foo bar -b firefox chrome -d
```

共有12个截图

```
http://foo.duckduckgo.com/?q=kitchen+sink on firefox
http://bar.duckduckgo.com/?q=kitchen+sink on firefox
http://foo.duckduckgo.com/?q=kitchen+sink on chrome
http://bar.duckduckgo.com/?q=kitchen+sink on chrome
http://foo.duckduckgo.com/?q=kitchen+sink&kz=-1 on firefox
http://bar.duckduckgo.com/?q=kitchen+sink&kz=-1 on firefox
http://foo.duckduckgo.com/?q=kitchen+sink&kz=-1 on chrome
http://bar.duckduckgo.com/?q=kitchen+sink&kz=-1 on chrome
http://foo.duckduckgo.com/?q=kitchen+sink&ia=products on firefox
http://bar.duckduckgo.com/?q=kitchen+sink&ia=products on firefox
http://foo.duckduckgo.com/?q=kitchen+sink&ia=products on chrome
http://bar.duckduckgo.com/?q=kitchen+sink&ia=products on chrome
```

还可以指定一个组项目运行的大小和浏览器列表,以及动作名称. 这些覆盖通过 CLI 的设置 。 所以,比如说,由于下面的小组叫 `override`数字 :

```json
[
    {"command": "search", "commandValue": "kitchen sink", "browsers": ["ie8", "firefox"], "sizes": ["s"]},
    {"command": "search", "commandValue": "glass hammer"}
]
```

并以下呼唤:

```
$ ddg-screen-diff group "override" -b chrome -s xl m
```

将拍摄以下截图:

```
http://foo.duckduckgo.com/?q=kitchen+sink on firefox at size s
http://foo.duckduckgo.com/?q=kitchen+sink on ie8 at size s
http://foo.duckduckgo.com/?q=glass+hammer on chrome at size xl
http://foo.duckduckgo.com/?q=glass+hammer on chrome at size m
```

## 主机名称

默认情况下,任何搜索命令都会对您当前正在运行的实例进行搜索.

传递一个单一主机名将会运行该工具以对抗该主机名 :

```
$ ddg-screen-diff ia products foo
```

您可以指定一个主机名列表, 该工具将抓取每个主机的截图 :

```
$ ddg-screen-diff ia products foo bar baz qux
```

也可以通过 `-d`编号 :`--diff` 运行两个主机之间的图像 diff.

通过 `prod` 或者说 `production` 作为主机名会将其化名到制作服务器.

### 港口

您可以用端口通过子域 。 所以说:

```
$ ddg-screen-diff search "kitchen sink" foo:5000
```

将生成一个截图 URL :

```
http://foo.duckduckgo.com:5000/?q=kitchen+sink
```

### 其他域

您通过的任何主机名 `.` 将被假定不是一个子域。 这意味着你可以:

```
$ ddg-screen-diff path "forum" duck.co
```

你会得到一个截图:

```
http://duck.co/forum
```

## 行动

如果有任何截图命令,您就可以通过 `--action`编号 :`-a` 选项,在取取截图之前指定要运行的动作的名称。 这些定义在下面指定的文件夹中 `actionDir` 在你的配置.

这里有一个实例动作文件,叫做 `click_button_and_mouse_out.json`数字 :

```json
[
    { "action": "click", "target": "#button_id" },
    { "action": "mouseMove", "target": { "x": 10, "y": 10 }
]
```

你通过跑步来引用:

```
$ ddg-screen-diff search "foo" --action click_button_and_mouse_out
```

目前支持的数值 `action` 为: `click`, (中文(简体) ), `mouseMove`, (中文(简体) ), `mouseUp` 财务报告和审定财务报表 `mouseDown`。 。 。 .

目前支持的数值 `target` cSS 选择字符串或对象 `x` 财务报告和审定财务报表 `y` 坐标.

## 其他选择

### `-b`编号 :`--browsers`

在浏览器列表中传递以运行该查询。 默认情况下, 查询会用无头 Chromium 运行 .

任何其他浏览器都运行在浏览器Stack的服务上,因此它们会运行得更慢.

如果您有账户, 请将您的登录权限设置在 env 变量中 `DDG_BROWSERSTACK_USERNAME` 财务报告和审定财务报表 `DDG_BROWSERSTACK_KEY`。 。 。 .

例如,如果您想要在 IE8 上运行工具,则可以运行:

```
$ ddg-screen-diff ia products -b ie8 headless-chromium firefox
```

通过 `desktop` 化名为最新版本的IE,Firefox,Chrome和Safari.

通过 `mobile` iOS和Android浏览器的最新(可用)版本的别名.

通过 `all` 中所有浏览器的别名 `desktop` 财务报告和审定财务报表 `mobile` 列表.

类型 `ddg-screen-diff search -h` 以查看所支持浏览器的完整列表.

### `-s`编号 :`--sizes`

传递一个或多个大小来运行查询.

可用的屏幕大小是基于我们的断点.

类型 `ddg-screen-diff search -h` 以查看所支持的屏幕大小的完整列表。 默认是"m",或630x354 - 就在我们的移动断点上方.

**说明:** 这只针对桌面, 对于移动浏览器, 屏幕大小取决于设备 .

### `-l`编号 :`--landscape`

仅限移动/iOS. 以地貌模式拍摄截图 .

### `-m`编号 :`--max-parallel-tasks`

需要并行运行多少个截图任务 。 默认为 2. 如果运行于第三方服务,您可能会限制您可以同时运行多少任务.

### `-d`编号 :`--diff`

在截图之间运行图像 diff .

如果你通过两个主机, diff在这两个之间. 如果你在一个东道主中通过,另一个被假定是你的当地东道主.

在任何其他情况下,应用程序都会出错.

### `--qs`

在 ddg-screen-diff 中添加任意查询字符串 。 例如,通过下列方法测试黑暗的主题:

```
$ ddg-screen-diff ia products --qs="kae=d"
```

## 常见问题

### @duckduckgo/ddg-screen-diff 是什么？

DuckDuckGo 的可视回归工具

### 如何安装 @duckduckgo/ddg-screen-diff？

在项目目录运行 npm install @duckduckgo/ddg-screen-diff，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 ddg-screen-diff，可以用 npx ddg-screen-diff 直接运行。

### @duckduckgo/ddg-screen-diff 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/duckduckgo\_\_ddg-screen-diff 是否存在。

### @duckduckgo/ddg-screen-diff 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @duckduckgo/ddg-screen-diff 可以商用吗？

@duckduckgo/ddg-screen-diff 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @duckduckgo/ddg-screen-diff 的下载量有多少？

根据 npm 官方下载统计，@duckduckgo/ddg-screen-diff 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,153 次，日均约 105 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @duckduckgo/ddg-screen-diff 还在维护吗？

最新版本 0\.4\.6 发布于 2023/05/10（3 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。