Web 前端开发中，经常需要对页面进行截图进行测试、调试以及制作文档等。这时候，就可以使用 npm 包 browserscreenshot 来实现自动化的截图操作。本文将详细介绍 browserscreenshot 的使用方法，包括如何安装和使用 npm 包，如何进行基本的截图操作和如何定制化和高级的截图操作。
安装
首先，需要安装 browserscreenshot 包。在终端或命令行窗口中输入以下命令即可完成安装：
npm install browserscreenshot --save
注意：由于 browserscreenshot 使用了 Puppeteer 库进行截图操作，所以在安装过程中可能需要下载低版本的 Chrome 浏览器。如果下载速度很慢或者下载失败，可以使用以下命令切换下载源：
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors/
基本用法
安装完成后，就可以使用 browserscreenshot 完成基本的截图操作了。按照以下代码，导入 browserscreenshot 包并使用 captureScreenshot() 函数来截图：
const {captureScreenshot} = require('browserscreenshot');
(async () => {
await captureScreenshot({
url: 'https://www.google.com/',
output: 'google.png'
});
})();在上面的代码中，captureScreenshot() 函数需要传递一个对象参数，其中 url 属性指定要截图的页面地址，output 属性指定截图保存的文件名，可选。执行上述代码后，就可以在当前文件夹下找到名为 google.png 的截图文件。
在实际使用中，除了常规的截图操作外，还需要进行各种自定义的操作。下面将介绍一些常用的定制化和高级的截图操作。
定制化操作
修改浏览器窗口大小
默认情况下 browserscreenshot 截图大小为 1280x720，但是有时候需要截图指定大小的页面。这时候，只需在调用 captureScreenshot() 函数时指定 width 和 height 属性即可：
await captureScreenshot({
url: 'https://www.google.com/',
output: 'google.png',
width: 800,
height: 600
});在页面上进行指定操作
有时，需要在页面上进行某些指定操作，例如填写表单或点击按钮。这时候，可以在调用 captureScreenshot() 函数之前，在 browser 对象上执行某些操作，然后在 captureScreenshot() 函数中传递 pageFunction 参数来实现指定的操作：
-- -------------------- ---- -------
----- -------------------
---- --------------------------
------- -------------
------------- ----- -------- ------ -
----- ---------------------- ----------------- --------------
----- ----------------------- -----------------------
----- -------------------------
-
---在上述代码中，pageFunction 属性指定了一个异步函数，它包含了要在页面上执行的一些操作。这里，我们使用 page.type() 函数来在搜索框中填写关键字 "JavaScript"，然后使用 page.click() 函数来点击搜索按钮，最后使用 page.waitForNavigation() 函数等待页面加载完成。在这个过程中，会自动截取多个截图，最终保存为一个 GIF 文件。
使用定制化的选择器
有时，需要在页面上捕捉指定元素的截图，比如一个按钮或者一个列表。在这种情况下，可以使用 selector 属性来指定选择器，在 pageFunction 函数中找到该元素并进行截图：
await captureScreenshot({
url: 'https://www.google.com/',
output: 'google.png',
selector: '#viewport'
});高级操作
使用头文件
有时，需要模拟用户登录状态或者通过请求头文件来获取些特殊的截图。这时候，可以在调用 captureScreenshot() 函数时传递一个 headers 属性，来设置请求头文件：
await captureScreenshot({
url: 'https://www.google.com/',
output: 'google.png',
headers: {
cookie: 'xxx',
'user-agent': 'Mozilla/...'
}
});在这个过程中，会自动截取多个截图，最终保存为一个 PDF 文件。
使用定制的 Puppeteer 对象
browserscreenshot 是在 Puppeteer 之上封装的一个库，所以除了自带的一些默认参数外，也支持传入一个定制化的 Puppeteer 对象来实现各种高级操作：
-- -------------------- ---- -------
----- --------- - ---------------------
----- -------------------
---- --------------------------
------- -------------
---------- ------------------
----- -
---------------
--------------------------
-
--------------- -- -
------ -
--------
------ ------------------------------- --------------------
-------- ---------------------------------------
--
--
---总结
browserscreenshot 是一个非常便捷的 npm 包，能够方便的进行自动化截图操作。本文介绍了 browserscreenshot 的基本使用方法，并提供了一些定制化和高级的截图操作方法来满足各种需求。希望本文对大家在前端开发工作中，更快、更好、更准确的实现网页截图操作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80652