使用Puppeteer选择Material Select下拉框时LI点击报错排查

核心原因 #

你遇到的问题大概率出在这两个点上：

1. 全局选择器匹配范围太广：document.querySelectorAll('li')会抓取页面上所有li元素，可能其他组件的li先被匹配，导致filter后找不到目标项，返回undefined后调用click()自然报错。
2. 触发点击后元素文本未完全同步：虽然截图显示下拉框已经渲染，但Material Select内部可能还有异步文本更新的过程，此时元素的innerText还没变成你要找的值，filter自然匹配不到。

另外，你用的document.createEvent('MouseEvents')是已废弃的API，换成现代的new MouseEvent更可靠。

修复方案 #

方案1：精准定位下拉框的li元素

Material Select的下拉列表通常会和触发元素关联，比如带有特定类名（如mdc-list-item），或者下拉容器是触发元素的同级/后代元素，缩小选择范围能避免误匹配：

await page.evaluate((newSelectedValue, cssSelector) => {
  // 触发下拉框展开
  const selectNode = document.querySelector(cssSelector);
  selectNode.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
  
  // 精准定位当前下拉框内的li元素（示例：假设下拉容器是触发元素的同级节点）
  const dropdownMenu = selectNode.nextElementSibling.querySelector('.mdc-list');
  const targetLi = [...dropdownMenu.querySelectorAll('.mdc-list-item')]
    .find(el => el.innerText.trim() === newSelectedValue);
  
  if (targetLi) {
    targetLi.click();
  } else {
    console.error('未找到目标选项：', newSelectedValue);
  }
}, newSelectedValue, cssSelector);

方案2：等待元素文本完全匹配

如果存在文本同步延迟问题，可以在evaluate里加个循环等待逻辑，确保目标元素的文本完全匹配：

await page.evaluate(async (newSelectedValue, cssSelector) => {
  const selectNode = document.querySelector(cssSelector);
  selectNode.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
  
  // 最多等待3秒，循环查找目标元素
  let targetLi = null;
  const startTime = Date.now();
  while (!targetLi && Date.now() - startTime < 3000) {
    // 依然建议用精准选择器，避免匹配无关li
    targetLi = [...document.querySelectorAll('.mdc-list-item')]
      .find(el => el.innerText.trim() === newSelectedValue);
    if (!targetLi) await new Promise(r => setTimeout(r, 100));
  }
  
  if (targetLi) {
    targetLi.click();
  } else {
    throw new Error(`超时未找到目标选项：${newSelectedValue}`);
  }
}, newSelectedValue, cssSelector);

方案3：用Playwright原生API替代evaluate（更稳定）

如果你用的是Playwright，直接用它的内置等待和选择器功能，比手动写evaluate更可靠：

// 点击触发下拉框展开
await page.click(cssSelector, { button: 'left' });

// 等待目标li出现并点击（用文本匹配选择器）
await page.click(`li:text-is("${newSelectedValue}")`);
// 或者结合Material Select类名精准匹配
await page.click(`.mdc-list-item:text-is("${newSelectedValue}")`);

额外验证点 #

• 检查newSelectedValue是否包含多余的前后空格，建议用trim()处理后再对比
• 确认页面上没有其他相同文本的li元素，避免误匹配

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