【backstopjs】入门安装环境

1.首先全局安装BackstopJS

npm install -g backstopjs

安装失败,常见报错&解决办法：

报错：

(venv) D:\workspace\Otaku\backstop>npm install -g backstopjs
npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key
 value, which is much more comprehensive and powerful.
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: The package has been renamed to `open`
npm warn cleanup Failed to remove some directories [
npm warn cleanup   [
npm warn cleanup     'C:\\Program Files\\nodejs\\node_global\\node_modules\\backstopjs\\node_modules',
npm warn cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Program Files\nodejs\node_global\node_modules\backstopjs\node_modules\send\node_modules'] {
npm warn cleanup       errno: -4048,
npm warn cleanup       code: 'EPERM',
npm warn cleanup       syscall: 'rmdir',
npm warn cleanup       path: 'C:\\Program Files\\nodejs\\node_global\\node_modules\\backstopjs\\node_modules\\send\\node_modules'
npm warn cleanup     }
npm warn cleanup   ]
npm warn cleanup ]
npm error code 1
npm error path C:\Program Files\nodejs\node_global\node_modules\backstopjs\node_modules\puppeteer
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c node install.mjs
npm error PUPPETEER_DOWNLOAD_HOST is deprecated. Use PUPPETEER_DOWNLOAD_BASE_URL instead.
npm error Error: ERROR: Failed to set up Chrome v127.0.6533.88! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to skip download.
npm error     at file:///C:/Program%20Files/nodejs/node_global/node_modules/backstopjs/node_modules/puppeteer/lib/esm/puppeteer/node/install.js:58:23
npm error     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
npm error     at async Promise.all (index 0)
npm error     at async downloadBrowser (file:///C:/Program%20Files/nodejs/node_global/node_modules/backstopjs/node_modules/puppeteer/lib/esm/puppeteer/node/install.js:90:9) {
npm error   [cause]: Error [ERR_TLS_CERT_ALTNAME_INVALID]: Hostname/IP does not match certificate's altnames: Host: npm.taobao.org. is not in the cert's altnames: DNS:*.tbcdn.cn, DNS:*.tao
bao.com, DNS:*.alicdn.com, DNS:*.cmos.greencompute.org, DNS:cmos.greencompute.org, DNS:m.intl.taobao.com, DNS:*.mobgslb.tbcache.com, DNS:*.alikunlun.com, DNS:alikunlun.com, DNS:*.django.t.
taobao.com, DNS:alicdn.com, DNS:*.tbcache.com, DNS:*.tmall.com, DNS:*.1688.com, DNS:*.3c.tmall.com, DNS:*.alibaba.com, DNS:*.aliexpress.com, DNS:*.aliqin.tmall.com, DNS:*.alitrip.com, DNS:
*.aliyun.com, DNS:*.cainiao.com, DNS:*.cainiao.com.cn, DNS:*.chi.taobao.com, DNS:*.chi.tmall.com, DNS:*.china.taobao.com, DNS:*.dingtalk.com, DNS:*.etao.com, DNS:*.feizhu.cn, DNS:*.feizhu.
com, DNS:*.fliggy.com, DNS:*.fliggy.hk, DNS:*.food.tmall.com, DNS:*.jia.taobao.com, DNS:*.jia.tmall.com, DNS:*.ju.taobao.com, DNS:*.juhuasuan.com, DNS:*.lw.aliimg.com, DNS:*.m.1688.com, DN
S:*.m.alibaba.com, DNS:*.m.alitrip.com, DNS:*.m.cainiao.com, DNS:*.m.etao.com, DNS:*.m.taobao.com, DNS:*.m.taopiaopiao.com, DNS:*.m.tmall.com, DNS:*.m.tmall.hk, DNS:*.mei.com, DNS:*.taopia
opiao.com, DNS:*.tmall.hk, DNS:*.trip.taobao.com, DNS:*.xiami.com, DNS:1688.com, DNS:alibaba.com, DNS:aliexpress.com, DNS:alitrip.com, DNS:aliyun.com, DNS:cainiao.com, DNS:cainiao.com.cn,
DNS:dingtalk.com, DNS:etao.com, DNS:feizhu.cn, DNS:feizhu.com, DNS:fliggy.com, DNS:fliggy.hk, DNS:juhuasuan.com, DNS:mei.com, DNS:taobao.com, DNS:taopiaopiao.com, DNS:tmall.hk, DNS:xiami.c
om, DNS:tmall.com, DNS:*.cloudvideocdn.taobao.com, DNS:cloudvideocdn.taobao.com, DNS:tbcdn.cn
npm error       at Object.checkServerIdentity (node:tls:337:12)
npm error       at TLSSocket.onConnectSecure (node:_tls_wrap:1695:27)
npm error       at TLSSocket.emit (node:events:519:28)
npm error       at TLSSocket._finishInit (node:_tls_wrap:1085:8)
npm error       at ssl.onhandshakedone (node:_tls_wrap:871:12) {
npm error     code: 'ERR_TLS_CERT_ALTNAME_INVALID',
npm error     reason: "Host: npm.taobao.org. is not in the cert's altnames: DNS:*.tbcdn.cn, DNS:*.taobao.com, DNS:*.alicdn.com, DNS:*.cmos.greencompute.org, DNS:cmos.greencompute.org, DNS:
m.intl.taobao.com, DNS:*.mobgslb.tbcache.com, DNS:*.alikunlun.com, DNS:alikunlun.com, DNS:*.django.t.taobao.com, DNS:alicdn.com, DNS:*.tbcache.com, DNS:*.tmall.com, DNS:*.1688.com, DNS:*.3
c.tmall.com, DNS:*.alibaba.com, DNS:*.aliexpress.com, DNS:*.aliqin.tmall.com, DNS:*.alitrip.com, DNS:*.aliyun.com, DNS:*.cainiao.com, DNS:*.cainiao.com.cn, DNS:*.chi.taobao.com, DNS:*.chi.
tmall.com, DNS:*.china.taobao.com, DNS:*.dingtalk.com, DNS:*.etao.com, DNS:*.feizhu.cn, DNS:*.feizhu.com, DNS:*.fliggy.com, DNS:*.fliggy.hk, DNS:*.food.tmall.com, DNS:*.jia.taobao.com, DNS
:*.jia.tmall.com, DNS:*.ju.taobao.com, DNS:*.juhuasuan.com, DNS:*.lw.aliimg.com, DNS:*.m.1688.com, DNS:*.m.alibaba.com, DNS:*.m.alitrip.com, DNS:*.m.cainiao.com, DNS:*.m.etao.com, DNS:*.m.
taobao.com, DNS:*.m.taopiaopiao.com, DNS:*.m.tmall.com, DNS:*.m.tmall.hk, DNS:*.mei.com, DNS:*.taopiaopiao.com, DNS:*.tmall.hk, DNS:*.trip.taobao.com, DNS:*.xiami.com, DNS:1688.com, DNS:al
ibaba.com, DNS:aliexpress.com, DNS:alitrip.com, DNS:aliyun.com, DNS:cainiao.com, DNS:cainiao.com.cn, DNS:dingtalk.com, DNS:etao.com, DNS:feizhu.cn, DNS:feizhu.com, DNS:fliggy.com, DNS:flig
gy.hk, DNS:juhuasuan.com, DNS:mei.com, DNS:taobao.com, DNS:taopiaopiao.com, DNS:tmall.hk, DNS:xiami.com, DNS:tmall.com, DNS:*.cloudvideocdn.taobao.com, DNS:cloudvideocdn.taobao.com, DNS:tb
cdn.cn",
npm error     host: 'npm.taobao.org',
npm error     cert: {
npm error       subject: [Object: null prototype],
npm error       issuer: [Object: null prototype],
npm error       subjectaltname: 'DNS:*.tbcdn.cn, DNS:*.taobao.com, DNS:*.alicdn.com, DNS:*.cmos.greencompute.org, DNS:cmos.greencompute.org, DNS:m.intl.taobao.com, DNS:*.mobgslb.tbcache.co
m, DNS:*.alikunlun.com, DNS:alikunlun.com, DNS:*.django.t.taobao.com, DNS:alicdn.com, DNS:*.tbcache.com, DNS:*.tmall.com, DNS:*.1688.com, DNS:*.3c.tmall.com, DNS:*.alibaba.com, DNS:*.aliex
press.com, DNS:*.aliqin.tmall.com, DNS:*.alitrip.com, DNS:*.aliyun.com, DNS:*.cainiao.com, DNS:*.cainiao.com.cn, DNS:*.chi.taobao.com, DNS:*.chi.tmall.com, DNS:*.china.taobao.com, DNS:*.di
ngtalk.com, DNS:*.etao.com, DNS:*.feizhu.cn, DNS:*.feizhu.com, DNS:*.fliggy.com, DNS:*.fliggy.hk, DNS:*.food.tmall.com, DNS:*.jia.taobao.com, DNS:*.jia.tmall.com, DNS:*.ju.taobao.com, DNS:
*.juhuasuan.com, DNS:*.lw.aliimg.com, DNS:*.m.1688.com, DNS:*.m.alibaba.com, DNS:*.m.alitrip.com, DNS:*.m.cainiao.com, DNS:*.m.etao.com, DNS:*.m.taobao.com, DNS:*.m.taopiaopiao.com, DNS:*.
m.tmall.com, DNS:*.m.tmall.hk, DNS:*.mei.com, DNS:*.taopiaopiao.com, DNS:*.tmall.hk, DNS:*.trip.taobao.com, DNS:*.xiami.com, DNS:1688.com, DNS:alibaba.com, DNS:aliexpress.com, DNS:alitrip.
com, DNS:aliyun.com, DNS:cainiao.com, DNS:cainiao.com.cn, DNS:dingtalk.com, DNS:etao.com, DNS:feizhu.cn, DNS:feizhu.com, DNS:fliggy.com, DNS:fliggy.hk, DNS:juhuasuan.com, DNS:mei.com, DNS:
taobao.com, DNS:taopiaopiao.com, DNS:tmall.hk, DNS:xiami.com, DNS:tmall.com, DNS:*.cloudvideocdn.taobao.com, DNS:cloudvideocdn.taobao.com, DNS:tbcdn.cn',
npm error       infoAccess: [Object: null prototype],
npm error       ca: false,
npm error       modulus: 'B1FED974A8DBDD9B0C84BD8312F2498247CCA50EDC8A46C7E706F64563000E9C95873B3C89B86813E25B1DDD8579981AB3E148F1010C688FA3CDF3A5815DCDE95CEEEA225EC9EA0F0E783649FC2CEFAE90
C64EE1B0EA06E2D1A9CEE93BFCE4D5A94A312716F0818E2599662DD89C377FB03E2395DB3718FA816A95D4441F1D002AC72D1CB46B479685E8DBCCABD159A96635DD1183C41C9F04A4A46C467CBF9CBD53146968DCDB1CB6F73DE3579DF6
57C8EB2F993DFF70C07BCA428B6379F1B141FE387B4E69D96BFD1BA69A577A789738D230F4E7DE3C3BD54841C9260ED598C1AE41959F8CDFD1C0CB0D9AF38F96877F3F5B75F846761F1687CF80C0EF1083',
npm error       bits: 2048,
npm error       exponent: '0x10001',
npm error       pubkey: <Buffer 30 82 01 22 30 0d 06 09 2a 86 48 86 f7 0d 01 01 01 05 00 03 82 01 0f 00 30 82 01 0a 02 82 01 01 00 b1 fe d9 74 a8 db dd 9b 0c 84 bd 83 12 f2 49 82 47 ... 24
4 more bytes>,
npm error       valid_from: 'Jun 19 09:06:02 2024 GMT',
npm error       valid_to: 'Jul 21 09:06:01 2025 GMT',
npm error       fingerprint: 'C8:28:74:DB:88:66:17:4F:5C:A5:AB:AD:F0:E1:14:74:AC:F8:FE:8F',
npm error       fingerprint256: '1F:79:7E:2E:52:1A:9D:9B:55:77:E6:DC:04:AA:1A:2B:D5:77:17:ED:E8:ED:AB:C3:F1:24:B4:CD:94:41:73:F8',
npm error       fingerprint512: '4F:0F:25:D3:0D:97:E1:AE:EF:FC:C6:E5:7E:17:46:21:9D:E1:31:23:A3:81:79:EA:49:1C:33:A9:CE:B0:03:09:45:CA:35:BD:06:B1:C3:33:52:F5:48:92:31:A2:EB:93:02:D5:7F:F8
:80:AA:1F:5B:E9:7F:D9:B6:B4:2D:A2:88',
npm error       ext_key_usage: [Array],
npm error       serialNumber: '1CD8E5CD92BA9D28AFF779CC',
npm error       raw: <Buffer 30 82 0b 30 30 82 0a 18 a0 03 02 01 02 02 0c 1c d8 e5 cd 92 ba 9d 28 af f7 79 cc 30 0d 06 09 2a 86 48 86 f7 0d 01 01 0b 05 00 30 66 31 0b 30 09 06 03 ... 2818
more bytes>,
npm error       issuerCertificate: [Object]
npm error     }
npm error   }
npm error }
npm error A complete log of this run can be found in: C:\Users\xx\AppData\Local\npm-cache\_logs\2024-10-12T03_38_06_265Z-debug-0.log

解决办法：

以管理员身份重新运行命令：
- 打开一个具有管理员权限的终端窗口（在命令提示符或终端上右键单击并选择“以管理员身份运行”）。
- 然后尝试再次运行 npm install -g backstopjs 命令。
设置环境变量跳过下载：
- 尝试设置一个环境变量 PUPPETEER_SKIP_DOWNLOAD，值为 1，以跳过 Puppeteer 的下载过程。您可以使用以下命令设置该环境变量：
```
set PUPPETEER_SKIP_DOWNLOAD=1
```
更换 npm 源：
- 尝试更换 npm 的镜像源为默认的 npmjs.org 镜像，通过以下命令更改：
- npm config set registry https://registry.npmjs.org/
在更换源后再次运行 npm install -g backstopjs 命令。

2.创建前端项目

在项目根目录创建src文件夹,在控制台执行命令：

backstop init

使用npm init 生成一个Package.json

接着使用backstop init命令，生成一个backstop的初始项目

3.修改配置文件

上述步骤2执行完成后，项目文件被初始化完成。生成的目录如下

（1）backstop.json文件

修改url文件

（2）新增UI对比文件

需要在backstop_data里面创建一个文件夹 backstop_reference,在这个里面放入ui 图片（用于对比UI图），要和生成的截图命名一样

安装浏览器插件命令：

npx puppeteer browsers install chrome

执行命令： backstop test

常见报错

1.报错1

已经执行过了【npx puppeteer browsers install chrome】

但是运行 backstop test还是报错如下

解决办法：

【backstopjs】入门安装环境

1.首先全局安装BackstopJS

安装失败,常见报错&解决办法：

报错：

解决办法：

2.创建前端项目

3.修改配置文件

（1）backstop.json文件

（2）新增UI对比文件

常见报错

1.报错1

悦读