前言
在前端开发中，我们经常需要通过直接操作浏览器的方式来进行一些自动化测试或爬虫等工作。而 physical-chrome 就是一款能够通过 Node.js 直接操作 Google Chrome 浏览器的 NPM 包。其最大的优势在于，不管你是使用 Windows、Mac 还是 Linux 平台，都可以使用相同 API 与 Chrome 进行交互，不需要考虑操作系统限制带来的问题。
本文将介绍如何安装和使用 physical-chrome 进行网络爬虫等前端相关的操作。
安装
在使用 physical-chrome 之前，我们需要先安装 Node.js 12.xx 或更高版本。然后，我们可以通过npm安装。
npm install physical-chrome
使用
安装完成后，我们需要先启动 Chrome 浏览器：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=$TMPDIR/chrome-profiling
在 Windows 和 Linux 下启动也非常简单，在命令行中输入：
chrome --remote-debugging-port=9222 --user-data-dir=c:\temp
然后，创建 app.js 文件，并且输入以下内容：
-- -------------------- ---- -------
----- -------------- - ---------------------------
----- -------- ----------- -
----- ------- - ----- -----------------------
--------- ------
---
----- ---- - ----- ------------------
----- --------------------------------------------
----- ------ - ----- ---------------- -- -
----- ----- - ----------------------------- ----
----- --- - ----------------------------- ----
------ ------------------------- -- -- --
------ ------------
---- ------------
----
---
--------------------
----- ----------------
-
------------以上代码实现了 HTTP 请求，并打印了所有标题和链接。运行这个脚本：
node app.js
如果一切正常的话，你将看到以下输出内容：
-- -------------------- ---- -------
-
-
------ ----------------------------
---- ----------------------------------------------
--
-
------ -----------------
---- -----------------------------------
--
---
-这就是你所请求的 Github 页面的简略版。
深度分析
physical-chrome 这个包内部封装了 Chrome DevTools Protocol，提供了大量的 API，可以非常灵活地操作浏览器。
前置操作
我们需要启用 Chrome 远程调试端口，这样我们就可以通过 DevTools 连接到浏览器。启动 Chrome 后，我们使用 --remote-debugging-port=<port> 选项来设置远程调试的端口。接着，我们还需要指定 --user-data-dir=<dir> 参数来指定 Chrome 运行时的目录，以便运行多个实例（比如测试环境和生产环境）。
了解核心 API
physical-chrome 提供许多强大的 API，这些 API 提供了操作浏览器的不同层面。我们重点介绍下面这些 API。
PhysicalChrome.launch(options)
启动浏览器实例。可以设置 options 对象，其中包含了很多配置项，例如是否开启 headless 模式、使用什么版本的浏览器等。
browser.newPage()
创建一个新的页面。我们可以在这个页面中执行跳转、截图等操作，需要注意的是，这个函数会返回一个 Page 类型的实例。
page.goto(url, options)
跳转到指定的 URL 地址，这个函数返回一个 Promise 对象，可以在跳转完成后进行下一步操作。你可以在 options 中配置超时时间、跳转等待时间等。
page.waitFor(selectorOrFunction, options)
等待满足特定条件的元素的出现或执行特定的代码。
page.evaluate(pageFunction, ...args)
执行在浏览器上下文中的函数，和 page.evaluateHandle() 很相似。它可以获取到浏览器中的 DOM、cookie、localStorage 等信息，执行一些特定的操作。
browser.close()
关闭浏览器实例。
示例
现在我们来看一个 Page 对象的用例代码，基本上，它与 puppeteer 的使用非常之像。
-- -------------------- ---- -------
----- -------------- - ---------------------------
----- -------- ------- -
----- ------- - ----- -----------------------
--------- ------
---
----- ---- - ----- ------------------
----- -----------------------------------
-- -- --- ------
----- --------------------
-- ---- ---------- ---------------
----- -------- - ----- ---------------- -- -
----- ---- - ------------------------------
----- ---- - -----------------------------
------ -
----- ----------
---- ---------
------ -----------
------- ------------
--
---
----------------------
-- ------
----- ----------------- ----- ----------- ---
----- ----------------
-
--------以上代码实现了打开百度首页、等待百度 logo 元素渲染完成、通过 JavaScript 获取 logo 元素的位置信息并打印、最后截图保存下来的操作。
指导意义
在前端的开发中，我们需要操作浏览器的场景越来越多。有时候需要自动化测试、数据爬取、页面截图等等，这些操作相对比较琐碎，人工操作的推广也很难达到一定规模。而自动化测试可以解决这个问题，这里面最重要的部分就是实现浏览器的自动化。而 physical-chrome 就是一套助你搞定浏览器自动化的神器，值得大家好好研究和使用。
理解什么时候使用什么工具是非常关键的一点。使用正确的工具可以让你的开发效率倍增，这一点尤其是在操作一些重复性工作时表现更为明显。physical-chrome 的出现就提供了这一条无需编写繁杂脚本去操作浏览器的方便路径，开发者们可以轻松的完成基于浏览器的各种操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d430d0927023822a3e