Puppeteer入门指南:掌控浏览器,开启自动化新时代

引言:什么是Puppeteer?

Puppeteer是一个由Google开发的Node.js库,它提供了一个高级API来通过DevTools协议控制Chrome或Chromium浏览器。Puppeteer默认以无头模式运行,但也可以配置为显示浏览器界面。它广泛应用于网页自动化、爬虫开发、自动化测试等领域。

环境准备

  • 项目初始化: 创建一个新目录,进入并初始化npm项目:

    bash 复制代码
    mkdir puppeteer-demo
    cd puppeteer-demo
    npm init -y

安装Puppeteer

bash 复制代码
npm install puppeteer
  • 这个命令会安装Puppeteer的最新版本,并自动下载一个与之兼容的Chromium浏览器(下载可能需要一些时间,取决于网络)。

注意:如果遇到如下问题,请按照提示操作,跳过浏览器的下载

bash 复制代码
### 国内的网络环境大概率是下载不成功的,以上的报错应该比较常见,下面是设置如何跳过下载的方式
# Windows (CMD)
set PUPPETEER_SKIP_DOWNLOAD=true && npm install puppeteer

# Windows (PowerShell)
$env:PUPPETEER_SKIP_DOWNLOAD="true"; npm install puppeteer

Hello Puppeteer! - 你的第一个脚本

创建一个 hello-puppeteer.js 文件:

javascript 复制代码
 const puppeteer = require('puppeteer');

 async function start() {
     // 启动浏览器
     const browser = await puppeteer.launch({
         executablePath:'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',  // 如果安装的时候跳过了下载浏览器,就需要指定本地已经下载的浏览器路径
         headless: false, // 不使用无头模式
         slowMo: 250, // 慢速模式,便于观察
         args: ['--window-size=1200,800'] // 设置窗口大小
     });

     // 打开新标签页
     const page = await browser.newPage();

     // 访问网站
     await page.goto('https://www.baidu.com');

     // 截图
     await page.screenshot({ path: 'example.png' });

     // 关闭浏览器
     await browser.close();
 }

 start();
  • 关键点:

    • puppeteer.launch(): 启动浏览器,返回一个Browser实例。headless: false 让我们能看到浏览器操作过程,非常适合调试。
    • executablePath:如果安装的时候跳过了下载浏览器,就需要指定本地已经下载的浏览器路径,反之可以不指定
    • browser.newPage(): 创建一个新的页面(标签页),返回Page对象,这是我们操作网页的主要接口。
    • page.goto(url): 导航到指定的URL。
    • page.screenshot(options): 截取当前页面的截图并保存到文件。
    • browser.close(): 关闭浏览器。务必在脚本结束时关闭,释放资源。

运行你的脚本

bash 复制代码
node hello-puppeteer.js

你应该能看到一个浏览器窗口打开,访问 https://www.baidu.com,然后截图保存为 example.png,最后浏览器关闭。恭喜!你成功运行了第一个Puppeteer脚本!

总结

如果你喜欢本教程,记得点赞+收藏!关注我获取更多JavaScript开发干货。

相关推荐
谎言西西里5 小时前
JS 高手必会:手写 new 与 instanceof
javascript
雪碧聊技术6 小时前
前端项目代码发生改变,如何重新部署到linux服务器?
前端·vue3·centos7·代码更新,重新部署
liulilittle7 小时前
C++ 浮点数封装。
linux·服务器·开发语言·前端·网络·数据库·c++
wordbaby7 小时前
Expo 进阶指南:赋予 TanStack Query “原生感知力” —— 深度解析 AppState 与 NetInfo
前端·react native
Moment7 小时前
从美团全栈化看 AI 冲击:前端转全栈,是自救还是必然 🤔🤔🤔
前端·后端·面试
天问一7 小时前
使用 Vue Router 进行路由定制和调用的示例
前端·javascript·vue.js
韩立学长8 小时前
【开题答辩实录分享】以《基于Vue的非遗文化知识分享平台的设计与实现》为例进行选题答辩实录分享
前端·javascript·vue.js
优弧8 小时前
离开舒适区100天,我后悔了吗?
前端·后端·面试
胡gh9 小时前
css的臂膀,前端动效的利器,还是布局的“隐形陷阱”?
前端·css·html
灵感菇_9 小时前
Flutter Riverpod 完整教程:从入门到实战
前端·flutter·ui·状态管理