介绍
simple-headless-chrome 是一个轻量级的 Node.js 模块，封装了 Google Chrome 浏览器的 headless 模式 API，并提供了易用的接口，可以方便地实现模拟用户操作、自动化测试、爬虫等功能。使用 simple-headless-chrome 可以实现以下功能：
- 加载网页并获取网页内容
- 模拟鼠标和键盘操作
- 截取网页截图
- 访问和修改浏览器的 cookie、localStorage、sessionStorage 等
安装
可以使用 npm 安装 simple-headless-chrome：
npm install simple-headless-chrome
基本用法
simple-headless-chrome 封装了 Chrome DevTools 协议，使用前需要启动 Chrome 浏览器的 headless 模式并开启 DevTools 协议。可以使用以下代码来启动浏览器并连接到 DevTools：
-- -------------------- ---- -------
----- --- - -----------------------------------
--------- -------- -- -
----- --------- ----- - -------
----- ------------------------------ ----------------
-- -- ---- ----- ---- ------- --- ---- -----
---------------
-------------- ----- -- -
--------------------- ------- -- ---------- -----
---其中 client 是一个对象，包含了与浏览器通信的各种 API（如 Network、Page 等）。在开始操作浏览器前，需要执行 await Promise.all([Network.enable(), Page.enable()]); 来激活网页的网络请求和页面渲染等功能。
下面将介绍 simple-headless-chrome 的各个功能及对应 API 的使用，需要先确保已成功连接到浏览器并正确激活了 Network 和 Page 功能。
加载网页
使用 simple-headless-chrome 可以加载指定 URL 的网页并获取网页内容。可以使用以下代码来实现：
-- -------------------- ---- -------
----- --- - -----------------------------------
----- -------------- - ---------------------------
----- ------ - ----------------------------------
------ ---------- -
----- ------ - --- --------
------- -
----- -----------
-
---
----- --------------
----- -------------------------------------
----- ----- - ----- --------------------
-------------------
----- ---------------
-----其中 chrome.init 方法用于启动浏览器，并返回一个可以执行各种操作的 Chrome 实例。chrome.goTo 方法用于加载指定 URL 的网页，随后可以使用 chrome.getRawHtml 方法获取网页内容。
截取网页截图
使用 simple-headless-chrome 可以截取加载网页的屏幕截图。可以使用以下代码来实现：
-- -------------------- ---- -------
----- --- - -----------------------------------
----- -------------- - ---------------------------
----- ------ - ----------------------------------
----- -- - --------------
------ ---------- -
----- ------ - --- --------
------- -
----- -----------
-
---
----- --------------
----- -------------------------------------
----- ---------- - ----- --------------------
---------------------------------- ------------
----- ---------------
-----其中 chrome.screenshot 方法用于获取网页的屏幕截图，返回一个 Buffer 类型的数据。
模拟鼠标和键盘操作
使用 simple-headless-chrome 可以模拟鼠标和键盘操作，例如点击元素、输入文本等。可以使用以下代码来实现：
-- -------------------- ---- -------
----- --- - -----------------------------------
----- -------------- - ---------------------------
----- ------ - ----------------------------------
------ ---------- -
----- ------ - --- --------
------- -
----- -----------
-
---
----- --------------
----- -------------------------------------
-- -----------
----- ------------------
----- ------------------ -- -
------------------------------------- ------------------- -- ------------
---
-- ---------
----- ------------------
----- ------------------ --------------------------
----- ---------------
-----其中 chrome.evaluate 方法用于执行 JavaScript 代码，如上例中用于模拟点击元素并输入文本。
访问和修改浏览器的 cookie、localStorage、sessionStorage 等
使用 simple-headless-chrome 可以访问和修改浏览器的 cookie、localStorage、sessionStorage 等。可以使用以下代码来实现：
-- -------------------- ---- -------
----- --- - -----------------------------------
----- -------------- - ---------------------------
----- ------ - ----------------------------------
------ ---------- -
----- ------ - --- --------
------- -
----- -----------
-
---
----- --------------
----- -------------------------------------
-- -- ------
----- ------- - ----- --------------------
---------------------
-- -- ------
----- ------------------
----- -------
------ ------
------- ------------
---
-- -- ------------
----- ------- - ----- -------------------------
---------------------
-- -- ------------
----- ----------------------------- ---------
----- ---------------
-----其中 chrome.getCookies、chrome.setCookie、chrome.getLocalStorage、chrome.setLocalStorage 等方法分别用于获取和设置浏览器的 cookie、localStorage 等信息。
总结
simple-headless-chrome 是一个非常实用的 Node.js 模块，封装了 Chrome 浏览器 headless 模式的 API，使用简单，功能强大。通过本文的介绍，你可以了解 simple-headless-chrome 的各种功能及使用方法，希望可以对你的前端工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5efc0dc6403f2923b035bae4