初探无头浏览器与 Puppeteer

无头浏览器的奇妙世界

无头浏览器，听起来像是某个科幻电影中出现的黑科技，但它确实是现实中存在的一种神奇工具。简单来说，无头浏览器就是没有可见界面的浏览器，它在后台默默地运行，如同一个隐形的网络浏览器大师。无头浏览器通过模拟用户对网页的访问行为，使得我们能够获取网页的内容，执行 JavaScript 代码，填写表单，甚至是截取网页的截图。

Puppeteer：让无头浏览器做你的舞台指挥家

但是，要使用无头浏览器，我们还需要一个工具来操控它，这就是 Puppeteer。Puppeteer 是一个由 Google 开发的 Node.js 库，它提供了一套强大的 API，让我们可以轻松地控制无头浏览器。Puppeteer 的功能十分丰富，它可以帮助我们自动化网页操作，进行数据采集，编写自动化测试等等。不仅如此，Puppeteer 还能够与 Egg.js 这样的 Node.js 框架完美结合，为我们提供更便捷的方式来获取网页内容。

官方文档

在 Egg.js 中使用 Puppeteer 获取页面内容

这里以抓取页面内容为例，熟悉Puppeteer在Node中的使用。我们先用egg.js 搭建一个简单的node服务

• 搭建服务 使用官方脚手架

$ npm init egg --type=simple

搭建完项目后，进入项目根目录下 运行 npm install 安装依赖, 执行npm run dev 项目就可以运行起来了。

• 安装 puppeteer 这将安装 Puppeteer 包及其所需的 Chromium 浏览器二进制文件。

$ npm install puppeteer

• 使用puppeteer 在egg的控制器下编写代码

/app/controller/home.js

const puppeteer = require('puppeteer');
export.index = async ctx => {
    const { request } = ctx;
    const pageUrl = request.query.pageUrl;

    // 创建一个浏览器对象
    const browser = await puppeteer.launch({
        headless: false, // 默认是true, 表示以无头模式运行， false 表示有界面浏览器，适合在开发和调试模式下使用
    });
    // 创建一个Page
    const page = await browser.newPage();
    await page.goto(pageUrl,{
        /**
         * 满足什么条件认为页面跳转完成
         * load: 默认， 页面的load事件触发时
         * domcontentloaded： 页面的 DOMContentLoaded 事件触发时
         * networkidle0： 不再有网络连接时触发（至少500毫秒后）
         * networkidle2： 只有2个网络连接时触发（至少500毫秒后）
        */
        waitUntil: 'load',
        timeout: 0, // 跳转等待时间，默认30s，传0表示一直等待
    });
    // 获取页面的html
    const html = await page.content();
    // 关闭浏览器
    await browser.close();
    ctx.body = {
        data: html,
    };
}

注意： Puppeteer 的操作是异步的，因此需要使用 async/await 或 .then() 来处理 Promise，并确保在页面加载完成后获取内容。

来测试一下，服务运行在本地7001端口，直接如下连接访问：
http://127.0.0.1:7001?pageUrl=https://www.baidu.com

可以看到浏览器窗口弹出，页面内容显示。

OVER