之前在团队内做了一次关于 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 进行通信,目前支持 JAVAC#JavascriptPython

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 供开发者操控浏览器行为,项目发布后,一石激起千层浪,到目前为止,已经被上千家组织或公司使用,并在原有的基础上衍生出了 CasperJSYslow 两个项目

这样的场景直到 2017 年被