如何在DemoQA练习表单中点击Submit按钮？WebDriverIO测试问题

针对你遇到的小屏幕下Submit按钮被页脚覆盖、调整窗口后仍出现点击拦截的问题，给你几个实用的解决方法：

• 滚动到按钮并居中显示
  直接让按钮元素滚动到视口中央，避免被页脚或其他固定元素遮挡。WebDriverIO提供了scrollIntoView方法，可以指定对齐方式：

  const submitBtn = await $('#submit');
  // 让元素滚动到视口中央，避免被顶部/底部元素遮挡
  await submitBtn.scrollIntoView({ block: 'center', inline: 'center' });
  await submitBtn.click();
  

• 使用JavaScript直接触发点击
  如果页面元素遮挡导致无法通过常规点击操作，可以绕过WebDriver的点击检查，直接调用DOM元素的click方法：

  await browser.execute(() => {
    document.getElementById('submit').click();
  });
  

  这种方式不受页面布局遮挡影响，属于直接触发元素的点击事件。

• 临时隐藏遮挡的页脚元素
  若页脚是固定定位的元素，可通过JS临时隐藏它，再进行点击操作：

  // 隐藏页脚
  await browser.execute(() => {
    const footer = document.querySelector('footer');
    if (footer) footer.style.display = 'none';
  });
  // 点击按钮
  await $('#submit').click();
  // 测试完成后可以恢复页脚（可选）
  await browser.execute(() => {
    const footer = document.querySelector('footer');
    if (footer) footer.style.display = '';
  });
  

• 调整窗口大小并等待页面稳定
  之前调整窗口大小后出现错误，可能是页面还没完全渲染稳定。可以添加等待，确保页面元素加载完成后再点击：

  await browser.setWindowSize(1300, 1000);
  // 等待按钮可点击
  await $('#submit').waitForClickable({ timeout: 5000 });
  await $('#submit').click();
  

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