跳至主要內容

Yihui大约 3 分钟

Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevToolsopen in new window 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headlessopen in new window 模式运行,但是可以通过修改配置文件运行“non-headless”模式。

在本文中,我将介绍 Puppeteer 的基本用法和一些实际的应用场景,例如网页截图、PDF 生成、自动化测试、网络爬虫等。我也将分享一些 Puppeteer 的最佳实践和常见问题的解决方法。

Puppeteer 的安装和启动

要使用 Puppeteer,首先需要安装 Node.js 和 npm。然后,在项目目录下运行以下命令:

npm install puppeteer  

这将下载最新版本的 Chromium,并将 Puppeteer 安装为项目的依赖项。如果你想使用其他版本的 Chromium 或 Chrome,你可以通过设置环境变量 PUPPETEER_EXECUTABLE_PATH 来指定浏览器的路径。

接下来,我们可以创建一个 JavaScript 文件,例如 index.js,并在其中编写以下代码:

const puppeteer = require('puppeteer');  
  
(async () => {  
// 启动浏览器  
const browser = await puppeteer.launch();  
// 创建一个新页面  
const page = await browser.newPage();  
// 访问一个网址  
await page.goto('https://example.com');  
// 关闭浏览器  
await browser.close();  
})();  

这段代码使用了 async/awaitopen in new window 语法,它可以让我们以同步的方式编写异步的代码。我们首先导入了 puppeteer 模块,然后使用 puppeteer.launch() 方法启动了一个浏览器实例,并返回了一个 browser 对象。然后,我们使用 browser.newPage() 方法创建了一个新页面,并返回了一个 page 对象。接着,我们使用 page.goto() 方法访问了一个网址,并等待页面加载完成。最后,我们使用 browser.close() 方法关闭了浏览器。

要运行这段代码,我们可以在命令行中输入:

node index.js  

这将在后台启动一个 headless 的浏览器,并访问指定的网址。如果我们想看到浏览器的界面,我们可以在启动浏览器时传入一个选项对象,例如:

const browser = await puppeteer.launch({ headless: false });  

这将以 non-headless 模式运行浏览器,并显示一个窗口。我们还可以通过其他选项来控制浏览器的行为,例如窗口大小、代理设置、用户代理字符串等。更多选项可以参考 Puppeteer 的文档open in new window

Puppeteer 的基本操作

有了 browser 和 page 对象,我们就可以对浏览器和页面进行各种操作。例如:

截取网页的屏幕截图或生成 PDF 文件:

// 截取网页的屏幕截图
await page.screenshot({path: 'example.png'});

// 生成 PDF 文件
await page.pdf({path: 'example.pdf'});

这两个方法都接受一个可选的配置对象,可以指定一些参数,如截图的质量、大小、裁剪区域等,或者 PDF 的格式、边距、打印背景等。具体的参数可以参考 Puppeteer 的文档。

除了截图和生成 PDF,Puppeteer 还可以实现以下常用的操作:

  • 导航到指定的 URL:await page.goto('https://example.com');
  • 等待页面加载完成:await page.waitForNavigation();
  • 等待指定的元素出现:await page.waitForSelector('#id');
  • 点击指定的元素:await page.click('#id');
  • 输入文本到指定的元素:await page.type('#id', 'text');
  • 获取指定元素的文本内容:const text = await page.$eval('#id', el => el.textContent);
  • 获取指定元素的属性值:const value = await page.$eval('#id', el => el.value);
  • 执行任意的 JavaScript 代码:await page.evaluate(() => { /* code */ });
  • 监听页面的事件:page.on('event', handler);

以上只是 Puppeteer 的一些基本操作,还有很多高级的功能,如模拟用户行为、拦截网络请求、处理弹窗、模拟设备等,可以让我们更灵活地控制浏览器和页面。Puppeteer 是一个强大而灵活的工具,可以用于网页爬虫、自动化测试、性能分析等场景。如果你想了解更多 Puppeteer 的用法,可以参考官方的示例和文档。