thal项目终极指南：用Puppeteer和Chrome Headless从零掌握网页爬虫-平芜编程栈

thal项目终极指南：用Puppeteer和Chrome Headless从零掌握网页爬虫

【免费下载链接】thal项目地址: https://gitcode.com/gh_mirrors/tha/thal

thal 是一个专为网页爬虫新手打造的开源项目，它基于 Puppeteer 与 Chrome Headless 技术，带你完成一次真实的网页爬虫实战：自动登录 GitHub、搜索目标用户、提取公开邮箱，并将结果保存到 MongoDB。无论你是想学习网页爬虫入门，还是希望掌握 Puppeteer 教程中的自动化操作技巧，跟随这个项目都能快速上手。下面，我们就从环境搭建到数据落地，一步步拆解这个爬虫项目的全部细节。

为什么网页爬虫要选 Puppeteer 和 Chrome Headless？🚀

在开始之前，先回答一个关键问题：市面上自动化工具那么多，为什么这个网页爬虫项目偏偏选择了Puppeteer和Chrome Headless？

答案是：Puppeteer 是 Google Chrome 团队官方推出的无头浏览器工具，拥有官方背书和持续维护。相比之下，曾经红极一时的 PhantomJS、Selenium IDE for Firefox 等自动化测试库已逐渐停止维护。Chrome 作为浏览器市场的领头羊，Chrome Headless 自然成为网页爬虫和自动化测试的行业标杆。

Puppeteer 的核心优势在于：它内置了指定版本的 Chromium，无需额外配置浏览器环境；同时提供page.goto、page.type、page.click、page.evaluate等丰富的 API，让"模拟真人操作"变得异常简单。

项目名thal源自巴基斯坦的塔尔沙漠（Thal Desert），寓意在互联网这片"数据沙漠"中穿越跋涉、搜寻数据——是不是很形象？😄

网页爬虫环境准备：只需 Node 和 MongoDB 两个工具

这个网页爬虫项目对环境的要求非常友好，你只需要安装两个基础工具：

Node.js：运行 JavaScript 脚本的运行时环境，建议 8.0 及以上版本（因为代码大量使用 async/await 语法）
MongoDB：用于存储爬取结果的 NoSQL 数据库

准备好这两个工具，你就拥有了搭建网页爬虫的全部基础。项目核心文件package.json中的依赖也很精简：puppeteer负责页面自动化，mongoose负责与 MongoDB 交互。

克隆项目并安装 Puppeteer 的快速步骤

最快的上手方式，是直接克隆这个已经写好的网页爬虫项目：

git clone https://gitcode.com/gh_mirrors/tha/thal

克隆完成后进入项目目录，执行npm install即可自动安装全部依赖。这里有个小提示：由于 Puppeteer 安装时会自动下载配套的 Chromium 浏览器，首次安装可能需要一点时间，请耐心等待。

安装完成后，项目的主要结构一目了然：

index.js：网页爬虫主入口脚本，包含登录、搜索、提取、存储全流程
models/user.js：定义 MongoDB 中用户数据的 Schema 结构
creds.js：存放你的 GitHub 登录凭据（注意加入.gitignore，切勿提交）
screenshots/与media/：存放爬虫演示截图

用 Puppeteer 写出你的第一个截图爬虫 📸

网页爬虫的第一步，是从最简单的"页面截图"开始。Puppeteer 官方文档中的示例代码只有寥寥几行：启动浏览器、打开新页面、跳转到目标网址、截图保存。核心逻辑就是通过puppeteer.launch()启动 Chrome Headless，然后调用page.screenshot()把网页渲染结果保存为图片。

运行node index.js，你会看到截图被自动保存到screenshots/目录下。别小看这个基础功能，它其实是网页爬虫的"开胃菜"——掌握了页面打开与渲染，后续的自动登录、数据提取就都顺理成章了。

爬虫登录 GitHub：Copy Selector 选择器技巧 🔑

接下来是这个网页爬虫项目最精彩的部分：自动登录。GitHub 上很多用户的邮箱只有在登录后才能看到，所以爬虫必须先模拟登录。

登录的关键在于获取页面元素的 CSS 选择器（Selector）。这里有一个非常实用的小技巧：在 Chrome 浏览器中打开登录页，右键点击"Username or email address"输入框，选择检查（Inspect），然后在开发者工具中右键高亮的代码，点击Copy > Copy selector，即可一键复制出精确的选择器。

用同样的方法复制出密码框和登录按钮的选择器，然后在脚本中通过page.type(选择器, 账号)填入用户名、密码，再调用page.click(选择器)点击登录按钮，一个自动登录爬虫就完成了。Puppeteer 还支持headless: false模式，让你能直观看到浏览器的一举一动，非常适合初学者调试。

提取网页数据：爬取 GitHub 用户邮箱 ✉️

登录成功后，网页爬虫就进入了核心阶段：数据提取。以搜索用户 "john" 为例，搜索结果页面中每个用户都位于 class 为user-list-item的容器内，而用户名、邮箱则藏在更深层的子元素中。

此时 Puppeteer 的page.evaluate方法派上了用场：它可以在浏览器上下文中直接执行 JavaScript，通过document.querySelectorAll批量获取所有用户信息，再用innerText提取文本内容，最后返回一个结构化的对象数组。

username -> email JohnSundell -> john@sundell.co JohnMcLear -> john@mclear.co.uk

当然，并不是所有用户都公开了邮箱，所以脚本中还加入了filter过滤逻辑，只保留有邮箱的记录。这样一次爬取就能拿到一份干净、可用的数据清单。

分页爬取策略：遍历搜索结果的每一页 📑

数据提取只是第一步，网页爬虫要想"吃得更饱"，还得学会翻页。搜索结果页顶部会显示总用户数（例如 70,134 users），用总人数除以每页显示的 10 个结果，就能算出总页数。

更巧妙的是，GitHub 的分页通过 URL 参数p控制，比如第 2 页的地址就是search?q=john&type=Users&p=2。因此，只需要写一个 for 循环，在 URL 后面拼接页码参数，就能自动遍历所有搜索结果页，把每一页的用户数据都收入囊中。

用 MongoDB 保存爬虫成果 💾

数据爬到了，接下来就是持久化存储。项目使用 Mongoose 作为 MongoDB 的 ODM 库，先在models/user.js中定义用户数据的 Schema（字段包括username、email、dateCrawled），然后通过findOneAndUpdate方法配合upsert: true选项实现"有则更新、无则新增"的去重写入逻辑。

这样即使重复爬取同一批数据，也不会产生重复记录。爬取完成后，在 MongoDB 命令行执行db.users.find().pretty()，就能看到所有爬取成果，成就感满满！🎉