Puppeteer 入门

Puppeteer 是一款优雅而强大的工具，它可以进行自动化网页测试、抓取和数据提取、浏览器控制和调试、自动化网页交互等任务，提高工作效率。它采用 JavaScript 语言编写，可用于编写复杂的自动化脚本，并支持多种浏览器和平台。Puppeteer 具有简洁易用的 API，可以帮助我们快速实现自动化任务，同时保证了代码的可读性和可维护性。

下面是一个简单的 Puppeteer 入门示例:

准备工作

node环境，vscode（或其他）

安装 Puppeteer

首先，需要使用 npm 或 yarn 安装 Puppeteer:

npm install puppeteer

或者

yarn add puppeteer

控制浏览器

使用 Puppeteer 的 JavaScript API 来编写脚本来模拟用户交互并自动化网页操作。这些脚本来运行在浏览器上下文中，并使用 Chrome DevTools 的 API 来模拟用户交互。

Puppeteer 提供了一些 API，用于控制浏览器。下面是一个简单的打开掘金示例，用于打开一个网页 （这里设置了headless默认是看不到页面的）:

const puppeteer = require("puppeteer");
(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto("https://www.juejin.cn");
})();

在上面的示例中，我们引入 Puppeteer ，并使用 await page.goto('https://www.juejin.cn') 方法打开了一个网页。

扩展：

{
    headless: false, // 显示浏览器窗口
    args: [
      '--disable-gpu', // 禁用GPU加速
      '--disable-dev-shm-usage', // 禁用共享内存
      '--disable-setuid-sandbox', // 禁用沙盒模式
      '--no-first-run', // 不需要首次运行
      '--no-sandbox', // 无沙盒模式
      '--no-zygote', // 禁用子进程
      '--disable-infobars', // 禁用自动化提示栏
      '--disable-browser-side-navigation', // 禁用自动化导航
      '--disable-features=site-per-process', // 禁用单独进程
    ], // 添加参数模拟真实用户使用浏览器
  }

执行自动化任务

使用 Puppeteer 的页面元素 API 来获取页面中的元素,这些元素通常是通过 CSS 选择器和 ID 来定位, 然后进行一系列的操作如选中、删除、修改和移动元素等。 Puppeteer 还提供了一些 API，用于执行自动化任务。下面是一个简单的示例，用于抓取掘金网页标题:

const puppeteer = require("puppeteer");
(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto("https://www.juejin.cn");
    const title = await page.evaluate(() => document.title);
    console.log(title) // 稀土掘金
    await browser.close()
})();

在上面的示例中，我们使用 await page.evaluate() 方法执行了一个异步函数，该函数获取了网页的标题。最后，我们可以使用 await browser.close() 方法关闭浏览器窗口。

本章简单的Puppeteer入门就完成了，后满会继续深入了解Puppeteer的等多用法，如自动化网页测试，自动登录签到抽奖，自动定时爬取数据等等。

github:github.com/puppeteer/p…