我的GitHub

无星的小窝

技术为辅,业务为主

0%

无星的自动化之旅（四）—— PlayWright内网升级ms-playwright

发表于 更新于 分类于 阅读次数：
本文字数： 4.7k 阅读时长 ≈ 4 分钟

背景

事情是这样的，因为工作的重复率太高，我不得不开发一些脚本来 摸鱼 提高工作效率

但是问题是这样的

我在的单位内外网是隔离的，我所在的分支机构没有开发人员，总部有研发中心，但是并不会理会我们这些分支机构

内网的npm私有库有一个很老的playwright@1.23.4版本，而我的脚本需要用到一些比较新的特性

我拥有的设备

1
2
3
4
5
6
7
8
9
内网机：
统信UOS（主要跑脚本的机子）
Windows10（办公常用）

外网机：
Windows11

自己的设备：
MacOS（Intel版）

而不同版本的playwright依赖的webdriver又不一样

而我集齐了windows,mac,linux三种设备。。。

这就意味着我不太好下载对应版本的ms-playwright（总不能为了下载对应的webdriver去装个虚拟机吧）

1.确认webdriver放置的位置

管理浏览器二进制文件

2.如何获取不同系统的webdriver

首先，我们需要知道下载那些浏览器，以及这些浏览器的版本号和包名

需要安装的浏览器

我们可以通过
npx playwright install --help
或
pnpm dlx playwright install --help
查看可以安装的浏览器和版本

2.1 如何确定要安装哪些浏览器

其实这个要看你自己，因为在启动的代码有channel指定需要用的浏览器

1
2
3
4
5
6
7
8
const browser = await chromium.launch({
        headless: false,
        // 使用edge浏览器
        channel: 'msedge',
        // 开启控制台。不然无法自动播放视频
        devtools: true,
        args: ["--start-maximized",]
});

一般是推荐下载chromium firefox webkit这三个，基本能覆盖需求。

当然如果你不需要其中的某个，也可以不下载，实测是不会影响代码运行的。

2.2 确定当前playwright依赖的webdriver版本号

1
pnpm dlx playwright@version install webdriver

这里我以当前最新版本1.37.1下载chromium举例

1
pnpm dlx playwright@1.37.1 install chromium

1.png

可能看不太清，我复制出来

1
https://playwright.azureedge.net/builds/chromium/1076/chromium-mac.zip

可以通过这种方式，了解当前playwright依赖的webdriver版本，例如我这个就是1076

那么我只要下载对应的链接解压到ms-playwright即可

2.3 那么如何下载其他系统需要的webdriver呢？

除了用相关的系统以外，我们还可以通过查看源码的方式去确认其他系统的下载路径

源码地址：Github.playwright

文件路径:playwright/packages/playwright-core/src/server/registry/index.ts

这里就是我们下载的各种webdriver路径了

2

我们可以看到，各种系统，还有各种版本

这时候可能还是不知道怎么查看，怎么办?

那我们可以先新建一个项目，然后下载playwright作为依赖

在node_modules里面找到playwright-core，单独将它打开

这里因为我用的是pnpm，路径都是link的，所以我需要找到原项目
3

4
5
6

并用vscode打开它

7

我们直接访问playwright-core/src/server/registry/index.ts

前面的解析过程比较无聊，无非是找关键字，判断系统啊，下载路径拼接之类的，我这里就直接跳过，只点出几个关键的地方

2.3.1 构造函数

8
关键在Registry的构造函数里

其中有一个_executables

所有最后构造出来的下载路径都被push到_executables中了

因此我们到构造函数的末尾，添加一下_executables的遍历打印，即可打印出所有的下载路径

1
2
3
4
// 打印所有下载路径
   this._executables.forEach((item)=>{
     console.log(item.downloadURLs?.[0]);
   })

然后用vscode启动当前这个index文件

9

10

显而易见，所有的下载路径都被打印出来了

但是问题来了，我这都是当前系统的，其他系统的呢？

2.3.2 系统判断hostPlatform

地址：lib/utils/hostPlatform
11

系统判断都在这里，只保留自己需要的系统，注视掉其他的，重新运行即可。

例如我需要linux的

12

重新运行

13

可以看到，路径都变成linux的了

另外要注意芯片架构，arm的和非arm的自行注意哈

总结

最后总结一下各个版本可能需要的路径和包名，版本自行替换哈

域名可替换

1
2
3
'https://playwright.azureedge.net'
'https://playwright-akamai.azureedge.net'
'https://playwright-verizon.azureedge.net'

windows

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
https://playwright.azureedge.net/builds/chromium/1076/chromium-win64.zip

https://playwright.azureedge.net/builds/chromium/1076/chromium-with-symbols-win64.zip

https://playwright.azureedge.net/builds/chromium-tip-of-tree/1136/chromium-tip-of-tree-win64.zip

https://playwright.azureedge.net/builds/firefox/1422/firefox-win64.zip

https://playwright.azureedge.net/builds/firefox-beta/1422/firefox-beta-win64.zip

https://playwright.azureedge.net/builds/webkit/1883/webkit-win64.zip

https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-win64.zip

https://playwright.azureedge.net/builds/android/1000/android.zip

mac(Intel)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
https://playwright.azureedge.net/builds/chromium/1076/chromium-mac.zip

https://playwright.azureedge.net/builds/chromium/1076/chromium-with-symbols-mac.zip

https://playwright.azureedge.net/builds/chromium-tip-of-tree/1136/chromium-tip-of-tree-mac.zip

https://playwright.azureedge.net/builds/firefox/1422/firefox-mac-13.zip

https://playwright.azureedge.net/builds/firefox/1422/firefox-asan-mac-13.zip

https://playwright.azureedge.net/builds/firefox-beta/1422/firefox-beta-mac-13.zip

https://playwright.azureedge.net/builds/webkit/1883/webkit-mac-13.zip

https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-mac.zip

https://playwright.azureedge.net/builds/android/1000/android.zip

linux

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
https://playwright.azureedge.net/builds/chromium/1076/chromium-linux.zip

https://playwright.azureedge.net/builds/chromium/1076/chromium-with-symbols-linux.zip

https://playwright.azureedge.net/builds/chromium-tip-of-tree/1136/chromium-tip-of-tree-linux.zip

https://playwright.azureedge.net/builds/firefox/1422/firefox-ubuntu-20.04.zip

https://playwright.azureedge.net/builds/firefox/1422/firefox-asan-ubuntu-20.04.zip

https://playwright.azureedge.net/builds/firefox-beta/1422/firefox-beta-ubuntu-20.04.zip

https://playwright.azureedge.net/builds/webkit/1883/webkit-ubuntu-20.04.zip

https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-linux.zip

https://playwright.azureedge.net/builds/android/1000/android.zip

阿星在这为大家提供一些版本依赖的下载地址

记得下载完成的标记为touch INSTALLATION_COMPLETE哦

1
2
3
4
5
6
7
8
9
10
11
12
# 1.46.0

https://cdn.npmmirror.com/packages/playwright/1.46.0/playwright-1.46.0.tgz

https://cdn.npmmirror.com/packages/playwright-core/1.46.0/playwright-core-1.46.0.tgz

https://playwright.azureedge.net/builds/chromium/1129/chromium-linux.zip

https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-linux.zip

https://playwright.azureedge.net/builds/webkit/2051/webkit-ubuntu-20.04.zip

我是阿星，阿星的阿，阿星的星！