如何用querySelectorAll将两类数据存入数组并解决存储与对齐问题？

核心问题 #

1. 代码语法错误：await page.$$("p[data-test-id]").innerText 完全错误，page.$$() 返回的是ElementHandle数组，数组没有innerText属性，这行代码会直接抛出错误或返回undefined。
2. 数据错位根源：单独抓取所有标题和所有价格，没有绑定到同一个广告条目上，一旦页面结构中标题和价格的渲染顺序、数量不匹配，就会出现内容错位的问题。

修复后的代码 #

方案1：基于条目容器的安全提取（推荐）

先定位每个广告的父容器，再在容器内分别提取标题和价格，确保两者一一对应：

const results = [];
// 替换为实际页面中单个广告条目的容器选择器，比如.annonce-card、.listing-item等
const annonceContainers = await page.$$(".annonce-container");

for (const container of annonceContainers) {
    // 获取当前条目下的标题，处理元素不存在的情况
    const titleElement = await container.$("p[data-qa-id]");
    const annonceTitle = titleElement ? await titleElement.evaluate(el => el.innerText.trim()) : "";

    // 获取当前条目下的价格，同样处理元素不存在的情况
    const priceElement = await container.$("p[data-test-id]");
    const annoncePrice = priceElement ? await priceElement.evaluate(el => el.innerText.trim()) : "";

    results.push({
        Titre_des_annonces: annonceTitle,
        price: annoncePrice
    });
}

console.table(results);

方案2：简化版（元素必存在时使用）

如果确定每个广告条目中标题和价格元素都存在，可以用$eval简化代码：

const results = [];
const annonceContainers = await page.$$(".annonce-container");

for (const container of annonceContainers) {
    const annonceTitle = await container.$eval("p[data-qa-id]", el => el.innerText.trim());
    const annoncePrice = await container.$eval("p[data-test-id]", el => el.innerText.trim());

    results.push({
        Titre_des_annonces: annonceTitle,
        price: annoncePrice
    });
}

console.table(results);

关键说明 #

• 容器选择器是核心：你需要根据目标网页的实际HTML结构，把.annonce-container替换为真正的单个广告条目父元素选择器（比如打开网页开发者工具，查看广告条目的外层div类名或属性）。
• 避免全局抓取：不要单独用page.$$抓取所有标题和所有价格，这种方式完全依赖页面中两类元素的顺序和数量完全一致，容错率极低，很容易出现错位。

内容的提问来源于stack exchange，提问作者Luigi31