Puppeteer获取select选项内容为空但控制台执行正常的问题

你遇到的核心问题是直接从page.evaluate返回DOM元素会导致数据丢失——Puppeteer会对evaluate返回的结果做JSON序列化，DOM元素序列化后只会保留少量基础属性，不会包含选项的文本、值等实际内容。而控制台直接执行代码是在浏览器上下文里操作完整DOM，自然能拿到所有数据。

正确实现方式 #

不要返回整个select元素，而是在浏览器上下文里直接提取需要的选项数据，再返回序列化后的结果：

await page.waitForSelector("#PlaceHolderMain_ddlPagamento", {
  timeout: 1500,
});

// 在evaluate中直接提取所有选项的文本和值
const selectOptions = await page.evaluate(() => {
  const selectEl = document.getElementById("PlaceHolderMain_ddlPagamento");
  // 将options转为数组，映射出需要的字段
  return Array.from(selectEl.options).map(option => ({
    text: option.textContent.trim(),
    value: option.value
  }));
});

console.log(selectOptions); // 输出包含所有选项文本和值的数组

额外优化：确保选项已加载完成 #

如果遇到select元素已渲染但选项还未填充的情况，可以用waitForFunction等待选项加载：

// 等待select的选项数量大于0，确保数据已填充
await page.waitForFunction(
  () => document.getElementById("PlaceHolderMain_ddlPagamento").options.length > 0,
  { timeout: 3000 } // 可根据实际情况调整超时时间
);

// 再执行提取逻辑
const selectOptions = await page.evaluate(() => {
  const selectEl = document.getElementById("PlaceHolderMain_ddlPagamento");
  return Array.from(selectEl.options).map(option => ({
    text: option.textContent.trim(),
    value: option.value
  }));
});

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