无法使用.click()和.submit()提交第三方网页无id、name属性的表单怎么办

问题根因 #

你遇到的是现代前端框架表单的典型问题：这类表单通常绑定了自定义提交逻辑/前端校验规则，原生form.submit()方法会跳过所有绑定的submit事件监听器直接提交，要么触发参数缺失报错，要么被前端校验拦截。另外你直接调用document.forms[0]大概率选错了表单，大部分外部页面都有多个隐藏的埋点、广告表单，索引0的表单基本不是你要操作的目标。

你之前的第三种写法本身存在语法错误：HTMLFormElement.submit() 不接收任何参数，传入回调函数会直接触发报错。

可落地的解决步骤 #

方案1：模拟真实用户点击完整事件流 #

Puppeteer 原生的 page.click 有时候会因为元素层级、事件绑定在子元素上的问题，没有触发完整的事件流，直接在浏览器执行上下文触发全量鼠标事件即可：

await page.evaluate(() => {
  // 精准定位Save提交按钮
  const saveBtn = Array.from(document.querySelectorAll('button[type="submit"]'))
    .find(btn => btn.textContent.trim() === 'Save');
  // 触发真实用户点击的完整事件流
  saveBtn.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true, view: window }));
  saveBtn.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true, view: window }));
  saveBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
});

方案2：手动触发表单submit事件 #

如果点击按钮还是没反应，通过按钮反向定位到所属表单后，手动触发submit事件，会完整走页面绑定的所有校验、提交逻辑：

await page.evaluate(() => {
  const saveBtn = Array.from(document.querySelectorAll('button[type="submit"]'))
    .find(btn => btn.textContent.trim() === 'Save');
  // 反向查找按钮所属的目标表单，避免选错
  const targetForm = saveBtn.closest('form');
  // 构造并触发submit事件
  const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
  targetForm.dispatchEvent(submitEvent);
});

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