封装HeadLess

基本操作，创建事件和关闭浏览器，封装getBrowser和closeBrowser事件。

const puppeteer = require('puppeteer')
const getBrowser = async options => {
  if (!global._browser) {
    try {
      const browser = await puppeteer.launch(
        Object.assign({}, options, {
          headless: true, //部署时为true 开发时为false
          ignoreDefaultArgs: ['--disable-extensions'],
          args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
            '--use-gl=egl',
            '--disable-web-security',
            '--disable-features=IsolateOrigins,site-per-process'
          ]
        })
      )
      global._browser = browser
    } catch (error) {
      console.log(error.message || 'puppeteer启动失败')
    }
  }

  return global._browser || null
}
const closeBrowser = async () => {
  if (global._browser) {
    await global._browser.close()
    global._browser = null
  }
}
module.exports = {
  getBrowser,
  closeBrowser
}

headless属性代表着是否前台显式打开浏览器，一般开发时便于调试设置为true。对headless不熟悉的可以参考文档。

因为基于无头浏览器操作有很多种，所以我们拆分一下接口结构，方便后面做拓展。新建index.js文件

const { getBrowser, closeBrowser } = require('./browser')

module.exports = {
  getBrowser,
  closeBrowser
}

测试脚本

我们以截取本人掘金首页为案例，设置固定区域截图为图片。接下来我们搞一个测试脚本，根目录创建test文件夹，并创建clipped.js文件。

const { getBrowser, closeBrowser } = require("../src/puppeteer/index");
const viewPort = { width: 1280, height: 800 };
const options = {
  path: "clipped_blindMonk.png",
  fullPage: false,
  clip: {
    x: 0,
    y: 72,
    width: 1280,
    height: 234,
  },
};
(async () => {
  try {
    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.setViewport(viewPort);
    await page.goto("https://juejin.cn/user/3016715636842622");
    await page.screenshot(options);
    await closeBrowser();
  } catch (e) {
    console.log(e);
  }
})();

ok,是不是很简单，我们运行一下看看结果

node ./test/clipped.js

ok，搞定，是不是没有过瘾，再来一个例子？

来个登录github.js?

const { getBrowser, closeBrowser } = require("../src/puppeteer/index");
const screenshot = "github.png";
(async () => {
  const browser = await getBrowser();
  const page = await browser.newPage();
  await page.goto("https://github.com/login");
  await page.type("#login_field", process.env.GITHUB_USER);
  await page.type("#password", process.env.GITHUB_PWD);
  await page.click('[name="commit"]');
  await page.waitForNavigation();
  await page.screenshot({ path: screenshot });
  closeBrowser();
  console.log("See screenshot: " + screenshot);
})();

在环境变量中填写自己的账号密码，即可实现自动登录，这里就不演示了。

如果喜欢我的文章，麻烦点个赞，评个论，收个藏，关个注。

手绘图，手打字，纯原创，摘自未发布的书籍：《高阶前端指北》，转载请获得本人同意。
如果喜欢我的文章，麻烦点个赞，评个论，收个藏，关个注。

手绘图，手打字，纯原创，摘自未发布的书籍：《高阶前端指北》，转载请获得本人同意。

《高阶前端指北》之Node爬虫脚手架(第七弹)

封装HeadLess

测试脚本