JavaScript自动填充Google表单：文本框与单选框失效问题排查

一、放弃ID定位，改用问题文本关联元素 #

你总结的ID生成规律完全不可靠——Google表单的元素ID是动态生成的，没有公开的固定规则，哪怕表单只是微调（比如改问题顺序、加选项），所有ID都会重新生成，甚至同一表单不同用户访问的ID都可能不一样。依赖ID定位必然会出现部分元素找不到的问题。

正确的做法是通过问题文本来定位对应输入/选项组：

• 文本输入框：先找到显示问题的元素，再向上/向下查找对应的输入控件
• 单选框：找到问题对应的选项容器，再根据选项文本定位单选按钮

可复用的代码示例：

// 填充文本输入框
function fillTextInput(questionText, value) {
  // 找到匹配问题文本的标题元素
  const questionTitle = [...document.querySelectorAll('.freebirdFormviewerComponentsQuestionBaseTitle')]
    .find(el => el.textContent.trim() === questionText);
  
  if (!questionTitle) return;
  
  // 找到该问题对应的输入框
  const input = questionTitle.closest('.freebirdFormviewerComponentsQuestionBaseRoot')
    .querySelector('input[type="text"]');
  
  if (input) {
    input.value = value;
    // 必须触发input事件，否则表单不会识别内容变更
    input.dispatchEvent(new Event('input', { bubbles: true }));
  }
}

// 勾选单选框
function checkRadioOption(questionText, optionText) {
  const questionTitle = [...document.querySelectorAll('.freebirdFormviewerComponentsQuestionBaseTitle')]
    .find(el => el.textContent.trim() === questionText);
  
  if (!questionTitle) return;
  
  // 找到该问题下的所有选项
  const options = [...questionTitle.closest('.freebirdFormviewerComponentsQuestionBaseRoot')
    .querySelectorAll('.freebirdFormviewerComponentsQuestionRadioChoice')];
  
  const targetOption = options.find(el => el.textContent.trim() === optionText);
  if (!targetOption) return;
  
  const radioInput = targetOption.querySelector('input[type="radio"]');
  if (radioInput) {
    radioInput.checked = true;
    // 触发change事件同步表单状态
    radioInput.dispatchEvent(new Event('change', { bubbles: true }));
  }
}

// 使用示例
fillTextInput('Age', '28');
checkRadioOption('Gender', 'Female');

二、单选框完全不生效的核心原因 #

1. 未触发必要事件：Google表单的前端会监听change或click事件来更新内部状态，只设置checked = true或者修改aria-checked、tabindex没用——必须手动触发change事件，否则表单后端无法感知选中状态。
2. 定位错误元素：有些单选框的容器嵌套较深，或者存在隐藏的备用元素，要确保你选中的是真实的input[type="radio"]，而不是它的标签或外层容器。

三、额外排查点 #

• 表单加载时机：确保代码在表单完全渲染后执行，比如放在window.onload回调里，或者用setTimeout延迟几秒执行（避免DOM还没生成就运行代码）。
• 动态渲染问题：Google表单是动态加载的，若页面有异步渲染逻辑，可能需要用MutationObserver监听元素的出现，再执行填充逻辑。

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