基于Node+HeadlessBrowser的浏览器自动化方案

基于Node+HeadlessBrowser的浏览器自动化方案

什么是无头浏览器(Headless Browser)？

无头浏览器，就像是一个没有用户界面的浏览器程序。你可以想象它就是一个“隐形”的浏览器，只不过它没有图形界面，但能做我们用普通浏览器所能做的大部分事情，比如打开网页、执行 JavaScript、进行页面互动等。无头浏览器最常用的场景就是在自动化测试、网页抓取、服务器上执行任务等不需要用户界面的场合。

使用无头浏览器，你无需打开真正的浏览器窗口就可以让程序去浏览网页、录制操作、生成截图等等，特别适合那些需要在没有人手动操作的情况下处理网页内容的任务。

• Playwright：适合需要多浏览器支持的项目，API 现代且跨平台，对新功能的支持很快。
• Puppeteer：专注于 Chromium，适合简单的自动化测试和爬虫任务。
• Selenium：对于复杂的跨浏览器测试任务是很好的选择，但需要较多的配置和学习。
• PhantomJS：虽然轻量且快速，但由于停止维护，而其使用逐渐减少，不建议用于新项目。

一、依赖安装

以下用Playwright为例，实现几个模拟浏览器操作的案例

// 安装无头浏览器依赖
npm i playwright --save
// 安装浏览器内核
npx playwright install

二、具体自动化操作

ScreenHotUtils.js提供了三个案例方法

• 对目标网页进行截取
• 获取目标页面的大标题
• 获取目标页面Window对象的任意属性

// 注入chromium内核
const { chromium } = require('playwright');/*** 异步暂停方法* @param {number} delay - 时长（以毫秒为单位）* @returns {Promise<void>}*/
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay));/*** 网页截屏方法* @param {string} webPageUrl - 目标网页地址* @param {number} loadDelay - 网页加载延时（以毫秒为单位）* @param {number} width - 浏览器宽度* @param {number} height - 浏览器高度* @param {boolean} fullPage - 是否进行全屏长截图* @returns {Promise<Buffer>} - 截图图像的Buffer*/
const captureWebPageScreenshot = async (webPageUrl,loadDelay = 1000,width = 1980,height = 1024,fullPage = false
) => {// 创建浏览器对象const browser = await chromium.launch();// 创建一个新的页面const page = await browser.newPage({viewport: {width,height,},});// 跳转到目标页await page.goto(webPageUrl);// 等待页面加载完成await page.waitForLoadState('load');// 页面加载延时await sleep(loadDelay);// 截图，并获取一个Bufferconst screenFileBuffer = await page.screenshot({ fullPage });// 关闭浏览器await browser.close();return screenFileBuffer;
};/*** 获取网页标题* @param {string} webPageUrl - 目标网页地址* @param {number} loadDelay - 网页加载延时（以毫秒为单位）* @returns {Promise<string>} - 网页标题*/
const getWebPageTitle = async (webPageUrl, loadDelay = 1000) => {// 创建浏览器对象const browser = await chromium.launch();const page = await browser.newPage();await page.goto(webPageUrl);await page.waitForLoadState('load');await sleep(loadDelay);// 获取页面标题const title = await page.title();await browser.close();return title;
};/*** 获取Window属性* @param {string} webPageUrl - 目标网页地址* @param {string[]} propertyNames - 要获取的属性名称列表* @returns {Promise<string>} - 获取的属性值*/
const getWindowProperty = async (webPageUrl, propertyNames) => {const browser = await chromium.launch();const page = await browser.newPage();await page.goto(webPageUrl);await page.waitForLoadState('load');// 使用 evaluate 在页面上下文中运行脚本const propertyValue = await page.evaluate(propertyNames => {const result = propertyNames.reduce((pre, prop) => {pre = pre[prop];return pre;}, window);return result;}, propertyNames);await browser.close();return propertyValue;
};module.exports = {getWebPageTitle,getWindowProperty,captureWebPageScreenshot,
};

三、执行测试

const {getWebPageTitle,captureWebPageScreenshot,getWindowProperty,
} = require('./ScreenHotUtils');
const fs = require('fs');
const path = require('path');(async () => {const webPageUrl = `http://www.baidu.com`;//   执行截图动作const fileBuffer = await captureWebPageScreenshot(webPageUrl);// 写入本地 | 上传OSS | 其他fs.writeFileSync(path.resolve(__dirname, './screenShot.png'), fileBuffer);//   获取页面标题const pageTitle = await getWebPageTitle(webPageUrl);console.log('PageTitle', pageTitle); // 百度一下 你就知道// 获取页面cookieconst cookie = await getWindowProperty(webPageUrl, ['document', 'cookie']);console.log('Cookie:', cookie); // cookie......
})();

效果：

就这样，我们可以轻松获得一个页面截图，通过代码就能在不打开浏览器的情况下获取到网页的图像，来实现一些自动化巡检&截图工具。