如何不依赖value属性选择下拉选项？Puppeteer自动化求助

问题场景 #

使用Puppeteer开发自动化工具时，已能打开下拉菜单，但无法点击其中选项，求助以下两个问题：

1. 如何不借助value属性选择下拉框（select）中的选项？
2. 是否可以通过CSS选择器选中第一个显示文本为Value1的option？

页面HTML代码 #

<select title="Visibility">
  <option>Value1</option>
  <option>Value2</option>
  <option>Value3</option>
  <option>Value4</option>
</select>

尝试的JS代码 #

{
  type: "navigation",
  interaction: "click",
  selector: 'select[title="Visibility"]',
  script: (element) => {
    element.selectedIndex = 0;  
    element.dispatchEvent(new Event('change'));
  },
  log: {
    info: "Choosing Job Card Invoice Details",
  },
}

问题解答 #

1. 不借助value属性选择下拉框选项的方法 #

有三种可靠实现方式：

方式一：修正selectedIndex的事件触发逻辑

你的代码思路没问题，但触发change事件时需要开启冒泡，否则页面上的事件监听器可能捕获不到。修正后代码：

script: (element) => {
  element.selectedIndex = 0; // 选中第一个选项
  // 触发带冒泡的change事件，确保页面监听器能捕获
  element.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
}

方式二：通过文本内容匹配选项

遍历下拉框的options集合，找到对应文本的选项后设置选中状态：

script: (element) => {
  const targetText = 'Value1';
  for (const option of element.options) {
    if (option.textContent.trim() === targetText) {
      option.selected = true;
      break;
    }
  }
  element.dispatchEvent(new Event('change', { bubbles: true }));
}

方式三：使用Puppeteer内置方法

Puppeteer提供了原生page.select()方法，可直接通过文本选择选项，自动触发change事件，无需手动处理：

await page.select('select[title="Visibility"]', 'Value1');

2. CSS选择器选中指定文本的option #

纯标准CSS无法直接匹配元素文本内容，Chrome支持非标准的:contains()选择器，可实现需求但兼容性有限：

option:contains("Value1")

如果Value1选项固定是下拉框第一个子元素，可直接用更可靠的选择器：

select[title="Visibility"] option:first-child

若Value1选项位置不固定，CSS无法精准定位，必须结合JavaScript筛选。

原代码未生效的原因 #

你之前的代码失效，核心问题是change事件未正确触发——默认创建的Event对象不开启冒泡，页面中监听下拉框变化的代码无法捕获事件，按方式一添加bubbles: true即可解决。

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