“木偶”浏览器

之前在团队内做了一次关于 Headless Browser 的分享，趁着周末，梳理成文字版本，主要内容涉及到 Selenium、PhantomJS、Puppeteer、Headeless Chrome。

内容有误的地方，欢迎指正

“木偶”浏览器

受 Puppeteer 启发，我在这里造了一个词，“木偶”浏览器，指通过调用 API 来操控浏览器行为，我们可以在此基础上构建一套自动化系统，以此解放开发人员的双手，目前主要应用在下面几个场景中：

• 页面自动化测试，产品上线前，进行一些重要路径的自动化测试
• Javascript 库自动化自测，提供 JS 运行环境
• 网页截图，在一些常见的前端监控系统中，网页出错了，通过这个功能进行网页截图记录
• 爬虫，面对一些反爬虫系统，无头浏览器可以模拟用户访问进行爬去数据

实现木偶浏览器，目前有两种方案，一种是 Selenium，一种是以 PhantomJS 为代表的 Headles Browser（无头浏览器），两个方案，在使用方式和应用的方向都有所区别，Selenium 多应用在产品自动化测试，而无头浏览器则更多被用于应对反爬虫系统和网页截图。

两种木偶

Selenium

Jason Huggins 在 2014 年开发了 Selenium，作为 ThoughtWorks 的内部工具，之后 Paul Hammant 加入开发团队，领导开发了新一版操作逻辑，即经典的的 "Selenium Remote Control"（Selenium-RC），并选择在当年开源。

Selenium 出现前，市面上流行着 Mercury 公司的自动化功能测试软件 QTP，Selenium 的命名源于 Huggins 在邮件里开的一个玩笑，“you can cure mercury poisoning by taking selenium supplements”，你可以通过服用硒(selenium)补充剂来治疗汞(mercury)中毒。

2007 年 Huggins 加入 Google，继续 Selenium-RC 的开发维护，与此同时，还在 ThoughtWorks 的 Simon Stewart 开发出了大名鼎鼎的 WebDriver，接着就到了 2009 Selenium 与 WebDriver 的合并，开启 Selenium 2.0 时代，合并之后，Selenium-RC 和 WebDriver 共存，直到 2016 年，跳票 3 年之久的 Selenium 3.0 发布，Selenium-RC 被抛弃，项目完全投向 WebDriver API。

还有一个重要的时间点，2018 年 Philippe Hanrigou 开发了 “Selenium Grid”，使 Selenium 支持分布式执行测试，可以控制多台机器多个浏览器执行测试用例。

以 Selenium 2.0 为例，完整的组成结构应该是

Selenium = Selenium IDE + Selenium WebDriver + Selenium Remote Control + Selenium Grid

这里简要解释下这几个名词，配合下图（途中略去 RC 部分）食用效果更佳：

Selenium IDE

Selenium IDE 是 firefox/Chrome 浏览器的插件，提供简单的脚本录制、编辑与回放功能。

Selenium Client API

Selenese 是 Selenium 的指令集，除了使用 Selenese，Selenium 还开放了编程语言调用接口，通过调用 Selenium Client API 中的方法与 WebDriver 进行通信，目前支持 JAVA、C#、Javascript、Python。

2.0 版本之后，引入了新的 Client API（以 WebDriver 为中心组件），不过仍向下兼容。

Selenium Grid

Grid 上文已经介绍了，用于对测试脚本进行分布式处理，目前已经集成到 Selenium Server 中。

WebDriver & Selenium-RC

RC 通过 Javascript 驱动网页，这使得整个过程与网页的内容高度耦合，得益于此，Selenium 也是第一批支持 Ajax 和一些高动态网页的自动化测试工具之一，同时，一个绕不过的问题，自动化代码运行在 Javascript 沙箱内，这就要求 Selenium-RC 服务必须跟对应网页保持同源。

而 WebDriver 则是通过浏览器原生接口协议驱动浏览器，并且开放了不同语言对应的 API，虽然浏览器、不同编程语言的适配会耗费很长的人力、时间成本，但带来的是 RC 无可替代的使用体验。

WebDriver 和 Selenium 合并，WebDriver 解决了 RC 绕不过 JS 沙箱问题，带来了更友好的 API，同时，WebDriver 也得支持更多的浏览器。

Headles Browser

关于无头浏览器，这里分别介绍下 PhantomJS 和 Headless Chrome。

PhantomJS

2011 年 1 月 23 号，Ariya Hidayat 发布了 PhantomJS，这是真正意义上第一个无头浏览器。

PhantomJS 基于 webkit 内核打造，并且提供一系列的 Javascript API 供开发者操控浏览器行为，项目发布后，一石激起千层浪，到目前为止，已经被上千家组织或公司使用，并在原有的基础上衍生出了 CasperJS 和 Yslow 两个项目

这样的场景直到 2017 年被打破，Chrome 59 宣布支持在 headless 环境下运行 Chrome，同时因为长期缺乏代码提交，2018 年 5 月 4 号，Ariya 宣布了暂停项目的开发维护，版本号最终停在 2.1.1。

Headless Chrome

上面也提到，2017 年 Chrome 开始支持 headless 环境，紧接着，用于控制 Chrome 的 Node 库开源项目 Chromeless 出现，不过随着 Chrome 团队发布了官方库 Puppeteer，Chromeless 作者宣布项目停止开发，并建议用户迁移 Puppeteer。

读到这里，关于这两种无头浏览器的关系，你可能有些疑惑，主要的区别是 PhantomJS 集成了 浏览器（webkit）和 API，而 Google 的做法则是将浏览器（Chrome）和 Node API（pupteer-core） 独立，可以用下面这个等式表示：

Chrome + Puppeteer-core/Chromeless = PhantomJS

Puppeteer、Puppeteer-core、Chrome 和 PhantomJS 的关系如下：

Puppeteer = Puppeteer-core + Chromium = PhantomJS

木偶提线

PhantomJS

举个例子，下面是使用 PhantomJS 访问掘金首页并截图的代码：

  // 为了方便演示，我们引入 npm phantom 包
  const phantom = require('phantom')
  const log = console.log
  const imgPath = './capture.jpg'
  const targetUrl = 'https://juejin.im/'
  const picSet = {
    format: 'jpg',
    qualiity: '80'
  }
  const getTime = () => {
    return (new Date()).getTime()
  }
  const genPic = async () => {
    let start = getTime()
    const instance = await phantom.create()
    const page = await instance.createPage()
    await page.on('onResourceRequested', function(requestData) {
      log('Requesting =>> ', requestData.url)
    })
    const status = await page.open(targetUrl)
    log('page download: ', (getTime() - start))
    page.property('viewportSize', {width: 375*2, height: 627*2})
    page.property('zoomFactor', 2)
    log(status)
    // const content = await page.property('content')
    // console.log(content)
    await page.render(imgPath, picSet)
    log('pic rendered: ', (getTime() - start))
    await instance.exit()
  }
  genPic()
复制代码

Puppeteer

Puppeteer 基于 DevTools Protocol 控制 Chrome 或 Chromium，安装时，默认下载最新版本的 Chromium，不过从 1.7 版本开始，官方提供了 puppeteer-core，不会下载 Chromium 包的版本。

网页截图 Puppeteer 版本：

  const puppeteer = require('puppeteer')
  const shotSet = {
    path: './screenshot.png',
    fullPage: true
  }
  const viewPortSet = {
    width: 375,
    height: 627,
    isMobile: true,
    deviceScaleFactor: 1
  }
  const genPic = async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.setViewport(viewPortSet)
    await page.goto('https://juejin.im/')
    console.log(await page.content())
    await page.screenshot(shotSet)
    await browser.close()
  }
  genPic()
复制代码

Puppeteer 操控 GUI Chrome 访问 juejin.im：

  const search = async () => {
    const browser = await puppeteer.launch({
      headless: false,
      timeout: 30000
    })
    const page = await browser.newPage()
    // viewPortSet 参见上一段截图代码
    await page.setViewport(viewPortSet)
    await page.goto('https://juejin.im/')
    let menu = '.main-nav-list'
    await page.click(menu)
    let pin = '.pin'
    await page.waitForSelector(pin)
    await page.click(pin)
    let login = '.nav-item.auth'
    await page.waitForSelector(login)
    await page.click(login)
    await page.type('[name="loginPhoneOrEmail"]', 'xxxxxxxxxx@xx.com')
    await page.type('[name="loginPassword"]', 'xxxxxxxxxx')
    let loginBtn = '.panel .btn'
    await page.waitForSelector(loginBtn)
    await page.click(loginBtn)
    await browser.close()
  }
  search()
复制代码

因为脚本控制，速度很快，我在关键操作后增加了延时，录了个 gif，效果如下，有兴趣的同学可以直接拷贝代码，安装依赖之后即可执行：

Selenium WebDriver VS Puppeteer

上文已经对 WebDriver、Puppeteer 的概念做了阐述，那么两者的区别在哪？

实际上，WebDriver 是 Selenium 根据不同的浏览器（Chrome、Safari、IE、Firefox）的接口定制的规范统称，面对不同浏览器，使用的 Driver 不同，官网目前提供了 IE Driver、Safari Driver、Chrome Driver、Firefox Driver，可以通过下图加深理解，以 Chrome 为例，Puppeteer-core 和 ChromeDriver 都是通过 devtools-protocol 控制浏览器，区别是 Puppeteer-core 是开发者直接可用的 Node 库，ChromeDriver 则需要用户通过 Selenium Client API 进行调用

原文地址：“木偶”浏览器-Leeon

参考：

• PhantomJS WikiPedia
• Webkit WikiPedia
• Selenium
• Selenium
• Chrome DevTools Protocol
• 自动化之 selenium
• Selenium发展史
• 紫云飞
• relationship between Selenium-RC and WebDriver