前言
网页测试是前端开发过程中不可或缺的一部分。之前手动测试需要不断的手动点击网页和输入数据，非常费时费力。随着技术的进步,自动化测试成为了一个越来越流行的选择。本文将介绍一个npm包：phantomjs-shim，它能够模拟一个DOM环境和生成图像。
安装
为了使用这个npm包，我们首先需要安装它。通过以下命令可进行安装：
npm install phantomjs-shim
基本使用
在安装之后，我们就可以在代码中使用该包。我们来看一个简单的例子：
-- -------------------- ---- -------
----- --------- - -------------------------
---------------------------------
------------------ -
---------------
-------------------- -
--------------------------------
---------------------- -
----------------------------------------- -
----------------------- -------
---------
--
--
--
--
-------------------- -
----------------
--这段代码的作用是在Github主页上截取一个图像，保存到电脑上。下面我们来一步步详细解释一下这个程序的每个部分。
createPhantomInstance()
这个方法在上面的例子中由Phantomjs对象进行调用。它会返回一个Promise，在成功初始化phantomjs后进行resolve，否则进行reject操作。这个方法在你的程序中最好只调用一次。
createPage()
这个方法同样由Phantomjs对象进行调用， 它会返回一个Promise，在成功创建一个phontomjs页面后进行resolve，否则进行reject操作。
page.open()
page.open()方法可以被用来加载一个指定的URL。在上面的例子中，我们加载了Github的主页。如果加载成功，then操作会在成功的回调函数中执行。
page.render()
page.render()方法可以用来截取一个网页的截图， 截图的文件格式可以通过文件名的后缀来指定， 在上面的例子中我们保存了一个png格式的截图。一旦这个操作完成，then操作将在回调函数中执行， 程序最后退出。
ph.exit()
ph.exit()方法用来结束phantomjs的进程， 在createPhantomInstance方法的resolve或reject回调函数中调用，以确保所有的phantomjs进程被透明的终止。
深入理解
了解了基础用法之后，让我们深入理解这个npm包。
模拟DOM环境
谈及这个模块，不能不提它模拟了一个DOM环境。为什么需要模拟DOM环境，DOM是解析HTML文件之后生成的一个树结构，Javascript 就通过DOM来操作页面上的元素。我们通常使用的浏览器中都有一个内置处理DOM查询的引擎，比如 chrome 中的 Webkit 和 firefox 中的 Gecko。但是，有一些js engines 例如Node并没有内置处理DOM的引擎，这就导致了一些问题。在后端中无法处理DOM到底是一个好的还是一个坏的事情，因为它取决于你的开发环境和你使用的应用。但是，仅仅由于没有负责处理DOM的内容的引擎，将会产生一定程度上的不兼容。
页面截图
页面截图是一种很好的测试与调试工具。在web页面中， 开发者经常需要查看自动化运行后实际看到的页面。为了达到这个目的，可以使用page.render()方法。这个方法使得你的自动化工具可以像人一样浏览网页。
应用
页面截图：相比于手动的测试方式，爬虫等自动化运行方式非常的重要，Page.captureScreenshot() 提供了在无界面的API环境中抓取整体网页的截屏操作能力。
Web自动化测试：PhantomJS或是Selenium通过驱动浏览器来实现自动化测试，使用PhantomJS的好处显而易见，它可以使用高超的JS语言进行控制，而不必使用繁杂的SeleniumDSL。
浏览器适配性测试 ：Web页面适配性测试是前端开发不可避免的操作，而Page.evaluate()方法提供了把页面元素抽象为Js对象进行直接测试的能力。
结语
正如你所看到的那样，phantomjs-shim是一个强大且非常有用的npm包。它的用处不仅限于自动化测试，还可以用于实现页面截图以及浏览器的适配性测试等。希望这篇文章可以帮助那些想要了解如何使用phantomjs-shim的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a4b81e8991b448d7eae