本文详解 puppeteer 抓取 livescore 数据时常见的「联赛归属错乱」和「比赛条目重复」问题，指出 dom 元素选择逻辑缺陷，并提供基于结构化选择（$$eval + closest）的健壮解决方案，同时推荐更优的 api 直接调用方式。
本文详解 puppeteer 抓取 livescore 数据时常见的「联赛归属错乱」和「比赛条目重复」问题，指出 dom 元素选择逻辑缺陷，并提供基于结构化选择（$$eval + closest）的健壮解决方案，同时推荐更优的 api 直接调用方式。
在使用 Puppeteer 进行网页抓取时，一个典型误区是：将不同层级的 DOM 元素独立选取后强行“配对”。您原始代码中的核心问题正在于此：
- 外层循环遍历所有 .Gd（联赛区块），但每次均执行 page.$$(".Ip") —— 即获取全页所有比赛元素，而非当前联赛区块内的子元素；
- 因此，每个联赛都会重复处理全部比赛，导致 competition: 'Premier League'、competition: 'LaLiga' 等被多次写入相同比赛，造成数据爆炸式重复；
- 同时，currentComp 变量在循环中被反复覆盖，但未与具体比赛建立父子关系，最终所有比赛都错误地绑定到最后一个读取到的联赛名（或因异步执行顺序混乱而随机错配）。
✅ 正确做法：尊重 DOM 嵌套结构
应采用 bottom-up（自底向上）策略：先定位最小语义单元（单场比赛 .Ip），再通过 .closest() 向上查找其所属的联赛容器（如带 data-known-size 属性的父级），从而确保每场比赛与其真实联赛严格绑定。
以下是优化后的 Puppeteer 代码（兼容 Puppeteer v21+）：
const puppeteer = require("puppeteer");
const url = "https://www.livescore.com/en/";
let browser;
(async () => {
browser = await puppeteer.launch({ headless: true });
const [page] = await browser.pages();
await page.goto(url, { waitUntil: "domcontentloaded" });
await page.waitForSelector(".Ip"); // 确保比赛列表已加载
const content = await page.$$eval(".Ip", (matches) =>
matches.map((matchEl) => {
// 安全提取文本：避免空节点报错
const text = (selector, container = matchEl) => {
const el = container.querySelector(selector);
return el ? el.textContent.trim() : "";
};
// 向上查找最近的联赛容器（.Gd 或带 data-known-size 的祖先）
const leagueEl = matchEl.closest(".Gd") || matchEl.closest("[data-known-size]");
const competition = leagueEl
? leagueEl.querySelector(".Hd")?.textContent?.trim() || "Unknown"
: "Unknown";
return {
matchTime: text("[id*='status-or-time']"),
homeTeam: text("[id*='home-team-name']"),
awayTeam: text("[id*='away-team-name']"),
homeScore: text("[id*='home-team-score']") || null,
awayScore: text("[id*='away-team-score']") || null,
competition,
};
})
);
console.log(`✅ 成功抓取 ${content.length} 条比赛记录`);
console.log(content.slice(0, 5)); // 查看前5条示例
})()
.catch((err) => console.error("❌ 抓取失败：", err))
.finally(() => browser?.close());? 关键改进说明：
- 使用 $$eval 在浏览器上下文中一次性执行全部逻辑，避免频繁跨进程通信；
- matchEl.closest(".Gd") 精准关联比赛与其直接所属联赛区块，彻底消除跨联赛误配；
- 所有 querySelector 均限定在局部作用域（matchEl 或 leagueEl），杜绝全局污染；
- 内置空值防护（?.textContent?.trim()），提升鲁棒性。
⚠️ 注意事项与最佳实践
- 切勿依赖固定索引或全局选择器配对：.Gd 和 .Ip 在 DOM 中无严格一一对应关系，且页面可能动态加载/懒加载内容；
- 避免在循环中调用 page.$() 多次：每次调用均为异步 RPC，性能差且易受竞态影响；
- 启用 waitUntil: "domcontentloaded"：比默认 networkidle0 更快启动，适合静态结构抓取；
-
添加超时与重试机制（生产环境必备）：
await page.waitForSelector(".Ip", { timeout: 15_000 });
? 更优方案：绕过前端，直连官方 API
Livescore 提供稳定、结构化、免解析的公开 API（无需 Puppeteer）：
# 示例：获取 2023-08-21 足球赛事（含联赛名称、比分、状态）
curl -s "https://prod-public-api.livescore.com/v1/api/app/date/soccer/20230821/-7?MD=1&countryCode=US" | \
jq '.Stages[] | .Events[] | { league: .Snm, home: .T1[0].Nm, away: .T2[0].Nm, score: "\(.Tr1)-\(.Tr2)", status: .Eps }'Node.js 原生调用（无需额外依赖）：
const fetch = globalThis.fetch || require("node-fetch");
const API_URL =
"https://prod-public-api.livescore.com/v1/api/app/date/soccer/" +
new Date().toISOString().split("T")[0].replace(/-/g, "") +
"/-7?MD=1&countryCode=US";
fetch(API_URL)
.then((res) => {
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
return res.json();
})
.then((data) => {
const matches = data.Stages.flatMap((stage) =>
stage.Events.map((event) => ({
competition: stage.Snm,
country: stage.Cnm,
homeTeam: event.T1[0].Nm,
awayTeam: event.T2[0].Nm,
homeScore: event.Tr1 ?? null,
awayScore: event.Tr2 ?? null,
status: event.Eps,
timestamp: new Date(event.Esd * 1000).toLocaleString(),
}))
);
console.log(`✅ API 获取 ${matches.length} 条数据`, matches.slice(0, 3));
})
.catch(console.error);✅ API 方案优势：
- 数据精准、无 HTML 解析歧义；
- 无反爬压力，响应快、成功率高；
- 支持分页、过滤、历史日期等高级参数；
- 符合现代 Web 数据消费最佳实践。
总结
当 Puppeteer 抓取出现「重复」与「错配」，本质是违背了 DOM 的树状结构语义。牢记：永远优先利用父子关系（closest / querySelector 局部作用域），而非全局平铺匹配。而在可行前提下，优先选用目标网站提供的结构化 API —— 它不仅是技术捷径，更是工程可靠性的基石。
