WebDriverIO无头Chrome模式下E2E测试元素不可交互问题求助

• 设置无头浏览器窗口尺寸
  无头Chrome默认窗口尺寸较小，可能导致元素处于不可视区域或布局异常。在Chrome配置的args中添加窗口大小参数：

browserName: 'chrome',
'goog:chromeOptions': {
    args: [
        '--headless',
        '--disable-gpu',
        '--window-size=1920,1080'
    ],
},

• 添加显式等待确保元素可交互
  避免直接点击元素，先等待元素处于可点击状态：

const checkoutBtn = $('//your-xpath-locator');
await checkoutBtn.waitForClickable({ timeout: 5000 });
await checkoutBtn.click();

• 滚动到元素可视区域
  如果元素在页面下方，无头模式下可能未自动滚动到目标位置，先执行滚动操作：

const checkoutBtn = $('//your-xpath-locator');
await checkoutBtn.scrollIntoView();
await checkoutBtn.click();

• 排查元素遮挡问题
  确认元素没有被弹窗、遮罩层等其他元素覆盖，可通过以下方法验证元素状态：

const checkoutBtn = $('//your-xpath-locator');
console.log('元素是否可见:', await checkoutBtn.isDisplayed());
console.log('元素是否可用:', await checkoutBtn.isEnabled());

内容的提问来源于stack exchange，提问作者D.M.Schweitz