WebdriverIO中如何点击type为radio的input元素

首先确认定位准确性：先执行console.log(await $([id="all"]).isExisting()) 确认定位的元素是目标单选框，避免页面存在重复id导致定位到了不可交互的其他元素。

以下是实测可行的几种解决方法：

• 方法1：强制点击，跳过可交互性检查
  很多前端框架会隐藏原生radio输入框（设置opacity: 0、pointer-events: none等属性），把可点击区域做在关联的label上，导致WDIO默认的click()检查不通过，可添加force参数跳过检查：

  await $(`[id="all"]`).click({ force: true })
  

• 方法2：点击关联的label元素
  该方案更贴近真实用户操作逻辑，若radio和label通过id和for属性关联，直接定位label点击即可：

  await $(`label[for="all"]`).click()
  

• 方法3：直接修改checked属性
  如果不需要触发点击绑定的联动事件，可直接通过JS执行修改属性实现选中：

  await browser.execute(() => {
    document.querySelector('[id="all"]').checked = true
  })
  

• 方法4：先滚动到可见区域再点击
  元素不在当前视口内也可能导致点击失效，可先执行滚动再触发点击：

  const targetRadio = await $(`[id="all"]`)
  await targetRadio.scrollIntoView()
  await targetRadio.waitForClickable()
  await targetRadio.click()
  

内容的提问来源于stack exchange，提问作者Павел Родин