什么是 @passmarked/browser
@passmarked/browser 是一个基于 Node.js 的 npm 包,可以帮助我们测试网站在不同浏览器下的兼容性。
该包提供了一个命令行工具和一些 API,可以很方便地对指定的网站在多个主流浏览器下进行测试,并生成测试报告以帮助我们快速定位和解决问题。
如何安装
我们可以通过 npm 来安装 @passmarked/browser 包,首先需要先安装 Node.js(已经安装的可以跳过)。
$ npm install -g @passmarked/browser
如何使用
命令行工具
基本使用
在终端中输入以下命令:
$ passmarked-browser https://www.google.com
其中,参数 https://www.google.com
是需要测试的网站的 URL。
执行以上命令后,该工具会依次在多个浏览器版本中打开指定网站,并对其进行自动化测试。
测试结果可以通过查看控制台输出或访问浏览器中的测试报告地址来获取。
指定浏览器及版本
该工具支持在多个不同版本的浏览器中进行测试,比如指定 Chrome 的 69 和 70 两个版本:
$ passmarked-browser https://www.google.com -b chrome --min-version 69 --max-version 70
其中,参数 -b
或 --browser
指定浏览器类型,--min-version
和 --max-version
分别指定最小和最大浏览器版本。
其他常用参数
在实际使用中,可能还需要开启无头模式、指定测试超时时间等,以下是常用的一些参数:
--headless
启用无头模式;-t
或--timeout
指定测试超时时间(单位为毫秒);--user-agent
指定浏览器 User-Agent;--no-sandbox
禁用沙盒(用于解决一些在 Docker 中无法使用的问题);--no-check-certificate
忽略 SSL 证书错误。
查看测试报告
在测试完成后,该工具会自动生成一个文本报告和一份可视化报告(HTML 格式),可以通过访问地址 http://localhost:5000
来查看。
文本报告会在控制台中输出,样例如下:
* chrome (54.0.2840.99): [PASS] - Expected title to be 'Google', but got 'Google' [PASS] - Expected document to have css property 'font-size' set to '16px', but it was 'none' [FAIL] - Expected document to have no accessibility errors FAIL - 1/3 checks failed
示例代码
下面是一个简单的示例代码,该脚本会在多个浏览器下打开指定网站,等待 5 秒钟后退出。
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- ----- --- - ------------------------- ----- ------ - - -------- --------- ----------- --- ----------- --- -------- ----- --------- ----- -- ----- -------- ----- - ----- ------- - ----- --------------------------------- ----- ---------------------- ----- -------------------- ----- ---------------- - ----- -------- -- -------------------- ---------- -- ------------------
API
@passmarked/browser 包还提供了一些 API,可以在代码中直接调用,可用于更加灵活的测试需求。
launch(config)
该方法用于启动浏览器并返回一个 Browser
实例对象。
传入参数 config
是一个包含配置信息的对象,与命令行工具中的参数对应。具体参数可参考上一节的讲解。
async function run() { const browser = await passmarkedBrowser.launch(config); }
navigate(url)
该方法用于打开指定 URL。
await browser.navigate(URL);
await(ms)
该方法用于暂停指定毫秒数(默认是 1000 毫秒)。
await browser.await(5000);
getReport()
该方法用于获取测试报告,返回一个 Promise。
const report = await browser.getReport();
小结
通过使用 @passmarked/browser 包,我们可以很方便地进行浏览器兼容性测试,快速定位和解决问题,提升网站的兼容性和稳定性。
除此之外,还可以通过调用 API 对测试进行更加细致和灵活的控制。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600559e581e8991b448d7859