webdriver.io选择器正确但提示找不到元素，无法点击复选框如何处理？

• 补全页面导航逻辑
  绝大多数同类问题都是因为执行元素操作前没有正确跳转至目标页面，脚本运行时浏览器还停留在初始空白页或其他地址，自然无法匹配到对应选择器，需要在所有元素操作前添加导航代码：
  await browser.url('https://www.seleniumeasy.com/test/basic-checkbox-demo.html')

• 增加元素可交互等待逻辑
  页面DOM渲染、JS资源加载都需要耗时，直接获取元素后立即点击会出现元素尚未渲染完成的问题，需要添加显式等待逻辑，修改后的完整代码如下：

it("Check for multiple checkboxes",async()=>{
    // 跳转至目标页面
    await browser.url('https://www.seleniumeasy.com/test/basic-checkbox-demo.html');
    let btn = await $('#check1');
    // 等待元素处于可点击状态，超时时间设置为5000毫秒适配不同网络环境
    await btn.waitForClickable({ timeout: 5000 });
    await btn.click();
    await browser.pause(4000)
})

• 新增问题定位日志
  如果修改后仍然报错，可以添加调试日志确认元素状态，快速定位问题：

it("Check for multiple checkboxes",async()=>{
    await browser.url('https://www.seleniumeasy.com/test/basic-checkbox-demo.html');
    let btn = await $('#check1');
    // 打印元素状态排查问题
    console.log('元素是否存在：', await btn.isExisting());
    console.log('元素是否可见：', await btn.isDisplayed());
    console.log('元素是否可点击：', await btn.isClickable());
    try {
        await btn.waitForClickable({ timeout: 5000 });
        await btn.click();
    } catch (e) {
        console.error('操作失败错误信息：', e.message);
    }
    await browser.pause(4000)
})

• 额外适配场景
  如果后续操作其他站点遇到同类问题，还可以排查是否存在iframe嵌套，元素处于iframe内部时需要先调用await browser.switchToFrame()切换到对应iframe后才能操作内部元素。

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