使用Puppeteer统计下拉框option数量返回0的问题排查

你的代码运行返回0主要有两点核心问题，还有一处拼写小错误：

• 执行时机错误：调用$$eval时页面下拉框对应的DOM还没有完成渲染，没有匹配到任何option元素，所以返回长度为0
• 选择器层级冗余：id本身是全局唯一标识，你写的fieldset > #article-header > option虽然语法没错，但如果上层DOM结构发生微小变动就会导致匹配失效，容错率低
• 拼写小错误：打印日志时写的lenght是错误拼写，正确写法为length

你可以先等待目标下拉框元素加载完成之后，再统计选项数量，有两种常用写法都可以实现需求：

写法1：直接统计所有option元素 #

// 先等待下拉框元素加载完成，避免执行时DOM未渲染
await page.waitForSelector('#article-header');
const itemsCount = await page.$$eval('#article-header option', options => options.length);
console.log('List length =', itemsCount);

写法2：通过select元素自带的options属性取值（更推荐） #

select DOM元素本身自带options属性存储所有子选项，不需要单独查询所有option节点，性能更优：

await page.waitForSelector('#article-header');
const itemsCount = await page.$eval('#article-header', selectEl => selectEl.options.length);
console.log('List length =', itemsCount);

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