npm 包 @passmarked/browser 使用教程

阅读时长 5 分钟读完

什么是 @passmarked/browser

@passmarked/browser 是一个基于 Node.js 的 npm 包,可以帮助我们测试网站在不同浏览器下的兼容性。

该包提供了一个命令行工具和一些 API,可以很方便地对指定的网站在多个主流浏览器下进行测试,并生成测试报告以帮助我们快速定位和解决问题。

如何安装

我们可以通过 npm 来安装 @passmarked/browser 包,首先需要先安装 Node.js(已经安装的可以跳过)。

如何使用

命令行工具

基本使用

在终端中输入以下命令:

其中,参数 https://www.google.com 是需要测试的网站的 URL。

执行以上命令后,该工具会依次在多个浏览器版本中打开指定网站,并对其进行自动化测试。

测试结果可以通过查看控制台输出或访问浏览器中的测试报告地址来获取。

指定浏览器及版本

该工具支持在多个不同版本的浏览器中进行测试,比如指定 Chrome 的 69 和 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 来查看。

文本报告会在控制台中输出,样例如下:

示例代码

下面是一个简单的示例代码,该脚本会在多个浏览器下打开指定网站,等待 5 秒钟后退出。

-- -------------------- ---- -------
----- ----------------- - -------------------------------

----- --- - -------------------------

----- ------ - -
  -------- ---------
  ----------- ---
  ----------- ---
  -------- -----
  --------- -----
--

----- -------- ----- -
  ----- ------- - ----- ---------------------------------
  ----- ----------------------
  ----- --------------------
  ----- ----------------
-

-----
  -------- -- --------------------
  ---------- -- ------------------

API

@passmarked/browser 包还提供了一些 API,可以在代码中直接调用,可用于更加灵活的测试需求。

launch(config)

该方法用于启动浏览器并返回一个 Browser 实例对象。

传入参数 config 是一个包含配置信息的对象,与命令行工具中的参数对应。具体参数可参考上一节的讲解。

navigate(url)

该方法用于打开指定 URL。

await(ms)

该方法用于暂停指定毫秒数(默认是 1000 毫秒)。

getReport()

该方法用于获取测试报告,返回一个 Promise。

小结

通过使用 @passmarked/browser 包,我们可以很方便地进行浏览器兼容性测试,快速定位和解决问题,提升网站的兼容性和稳定性。

除此之外,还可以通过调用 API 对测试进行更加细致和灵活的控制。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600559e581e8991b448d7859

纠错
反馈