Google Forms下拉框无法程序化选择选项的解决方案求助

Google Forms的下拉组件确实没有用原生<select>，而是用Div+自定义类实现的，核心是模拟真实用户的交互流程而非直接操作表单值，以下是可行的步骤和代码：

核心思路 #

1. 定位下拉框的触发按钮，模拟点击展开选项列表
2. 定位目标选项元素（通过文本或语义属性）
3. 模拟真实的用户点击事件（避免被表单的事件监听拦截）
4. 可选：触发表单的变更事件，确保值被正确提交

具体实现代码 #

1. 工具函数：等待元素加载（应对动态渲染） #

Google Forms是动态加载的，直接查询元素可能找不到，先写一个等待元素的函数：

function waitForElement(target, timeout = 5000) {
  return new Promise((resolve, reject) => {
    // 支持传入选择器字符串或XPath查询函数
    const getElement = typeof target === 'string' 
      ? () => document.querySelector(target) 
      : target;

    const interval = setInterval(() => {
      const element = getElement();
      if (element) {
        clearInterval(interval);
        resolve(element);
      }
    }, 100);

    setTimeout(() => {
      clearInterval(interval);
      reject(new Error('元素超时未找到'));
    }, timeout);
  });
}

2. 完整选择流程 #

替换代码中的问题文本和目标选项文本即可使用：

(async function selectDropdownOption() {
  try {
    // 替换为你的下拉问题的aria-label文本（可在DevTools中查看）
    const dropdownTrigger = await waitForElement('div[aria-label="请选择你的城市"]');
    
    // 1. 展开下拉列表
    dropdownTrigger.click();

    // 替换为你要选择的选项文本
    const targetOptionText = '上海';
    // 用XPath定位选项（避免依赖易变的类名）
    const getOption = () => document.evaluate(
      `//div[contains(@role, 'option') and .//span[text()='${targetOptionText}']]`,
      document,
      null,
      XPathResult.FIRST_ORDERED_NODE_TYPE,
      null
    ).singleNodeValue;

    const targetOption = await waitForElement(getOption);

    // 2. 模拟真实用户点击（先mousedown再click，避免被拦截）
    targetOption.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
    targetOption.click();

    // 3. 触发变更事件，确保表单识别到选择
    const changeEvent = new Event('change', { bubbles: true });
    dropdownTrigger.dispatchEvent(changeEvent);

    console.log('选项选择成功');
  } catch (err) {
    console.error('选择失败:', err);
  }
})();

注意事项 #

• 避免依赖固定类名：Google Forms的类名会不定期更新，优先用aria-label、role等语义化属性定位元素
• 模拟真实交互：直接调用click()可能被表单的防自动化逻辑拦截，配合mousedown事件更贴近用户行为
• 动态加载处理：必须等待元素完全渲染后再操作，否则会出现找不到元素的错误
• DevTools辅助：遇到定位问题时，打开浏览器DevTools的Elements面板，查看当前页面的元素结构，调整选择器或XPath

内容的提问来源于stack exchange，提问作者N.VCSS