npm 包 @passmarked/browser 使用教程

什么是 @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


猜你喜欢

  • npm 包 git-linter-service 使用教程

    前言 在进行前端开发的过程中,我们经常需要将代码托管到 Git 上。如果项目的代码仓库中的代码质量不高,就会影响代码的可维护性和代码的健壮性。因此,在团队开发的过程中,需要使用代码质量检查工具来协助开...

    2 年前
  • npm 包 angular2-echarts 使用教程

    前言 随着 Web 技术的不断发展,前端开发正在变得越来越重要。随之而来的是越来越多的技术选项和库。在这个技术浩瀚的时代,选取一个合适的工具和库对于 Web 开发至关重要。

    2 年前
  • NPM包 Angular2-UI-Switch-Patched 使用教程

    介绍 Angular2-UI-Switch-Patched是一个开源的基于Angular2的库,它提供了一个简单易用的开关按钮UI组件。这个库是基于Angular2-UI-Switch的基础之上做了优...

    2 年前
  • npm 包 ng2-stomp-service-fixed 使用教程

    概述 ng2-stomp-service-fixed 是一个可以让 Angular 应用快速连接和订阅 STOMP WebSocket 消息服务的 npm 包。它提供了一个轻量级的服务来处理 STOM...

    2 年前
  • npm 包 react-native-alphabetlist 使用教程

    介绍 react-native-alphabetlist 是一个在 React Native 中实现字母列表的组件库,可以方便地实现按字母索引的列表。该组件库在实现上极为简洁,同时提供了丰富的自定义选...

    2 年前
  • npm 包 @langa/mapnik 使用教程

    简介 @langa/mapnik 是一个基于 Node.js 的 Mapnik 插件,用于生成矢量地图,并提供了丰富的样式配置和数据源支持。它可以帮助开发人员更高效地生成地图,并提供了可定制化的选项和...

    2 年前
  • npm 包 @langa/tilelive-mapnik 使用教程

    @langa/tilelive-mapnik 是一个基于 Node.js 平台的 npm 包,提供了一种简单而又强大的方式来生成地图瓦片。它使用了 Mapnik 库来渲染地图,支持多种地图数据格式,如...

    2 年前
  • NPM 包 cpr-query-builder 使用教程

    前言 cpr-query-builder 是一款轻量级的 JavaScript 库,用于构建查询条件。它允许用户通过简单的组合方式,使用自然语言来构建查询条件。cpr-query-builder 可以...

    2 年前
  • npm 包 redux-segments 使用教程

    简介 redux-segments 是一个用于分析 Redux 应用的工具,是一个用于对 Redux 中的 action 进行分组和统计的插件。它可以帮助开发者快速了解应用的行为,并做出更好的决策。

    2 年前
  • npm 包 ngx-string-replace-pipes 使用教程

    在前端开发中,字符串的处理是一个非常重要的基础操作。针对字符串的处理需求,ngx-string-replace-pipes 提供了一种方便、简单的解决方案。 安装 使用 npm 安装: --- ---...

    2 年前
  • npm 包 vue_modal 使用教程

    在前端开发中,我们经常需要实现弹窗组件以方便用户操作。vue_modal 是一个非常好用的 npm 包,它可以帮助我们轻松实现各种类型的弹窗。本文将介绍如何使用 vue_modal,让你快速打造出漂亮...

    2 年前
  • npm 包 brazilian-states-provider 使用教程

    如今,随着全球化进程的加速,越来越多人开始关注各国家的文化、语言等方面。而对于 Web 开发者来说,如果需要开发针对某个国家或地区的网站或 Web 应用,了解该国家的各种信息就显得尤为关键。

    2 年前
  • npm 包 github-issue-server 使用教程

    前言 github-issue-server 是一个基于 Node.js 的 npm 包,可以将 Github Issue 转换成 RESTful API,以便于进行前端开发。

    2 年前
  • npm 包 jest-slack-reporter 使用教程

    在前端开发中,单元测试是非常重要的一环,而 Jest 是一个很好的 JavaScript 测试框架。在使用 Jest 进行测试时,我们可能需要一些工具来帮助我们更好地管理测试结果。

    2 年前
  • npm 包 jQuery FileTree 使用教程

    jQuery FileTree 是一个基于 jQuery 和 PHP 的组件,用于在网页上展示本地或服务器中的文件和文件夹。本文将介绍如何使用 npm 包 jqueryfiletree 来使用 jQu...

    2 年前
  • npm 包 clear-desktop 使用教程

    简介 npm 包 clear-desktop 是一个用于清理桌面的工具。它可以将桌面上的所有文件和文件夹移动到指定文件夹,帮助用户更好地整理桌面。 安装 在使用 clear-desktop 之前,需要...

    2 年前
  • npm 包 generator-redub 使用教程

    前言 在现代 web 开发中,使用构建工具可以提高开发效率和团队协作能力。generator-redub 是一个基于 Yeoman 的 npm 包,旨在简化 React 应用程序的开发流程。

    2 年前
  • npm 包 spring-slack 使用教程

    在现代的软件开发中,团队协作是非常重要的一环。而在团队协作中,实时的消息通知对于提高团队效率来说非常有帮助。Slack 是一种流行的团队沟通工具,它提供了丰富的 API,可以通过 API 自动化发送消...

    2 年前
  • npm 包 @savvy-css/spacing-utilities 使用教程

    前端开发过程中,样式表是非常重要的一部分。@savvy-css/spacing-utilities 是用于设置边距的 npm 包,提供了一种简便的方法来定义和应用网页中的各种空间维度。

    2 年前
  • npm 包 warning-message 使用教程

    在前端开发中,我们经常需要给用户提示一些警告信息。而 warning-message 是一个轻量级的 npm 包,非常适合用来生成这些警告信息。本文将详细介绍 warning-message 的使用方...

    2 年前

相关推荐

    暂无文章