WebdriverIO获取select下拉框选中选项值异常问题求助

核心问题是Array.filter()不支持等待异步回调执行：

• 你给filter传入的是async修饰的回调函数，这类回调执行后会返回Promise，而filter本身是同步方法，不会等待回调里的await操作执行完成，就会直接继续运行后续代码。
• 当执行到循环外的console.log时，if判断块里的赋值逻辑还没运行，selectedText还是初始化的空字符串。
• 你能看到循环内打印出正确值，是因为代码最后加了2秒的browser.pause()，等异步回调延迟执行到赋值步骤时，才会输出内部日志，这时候外层的打印早就执行完毕了。
• 额外小问题：代码首行的browser.url()前漏写了await，会导致页面加载逻辑不阻塞，容易出现偶现的元素找不到问题。

方法1：改用支持异步等待的普通for循环 #

不要用数组的同步遍历方法处理异步逻辑，换成for...of循环即可正常阻塞等待每一步判断执行：

it('verify select dropdown...', async () => {
    // 补全await
    await browser.url("https://qavbox.github.io/demo/signup/")
    await browser.pause(2000)
    let select = await $("select[name='sgender']")
    let options = await select.$$('option')
    console.log("options count - " + options.length)

    let selectedText = ""
    // 普通for循环内的await会正常阻塞
    for (const option of options) {
        if (await option.isSelected()) {
            selectedText = await option.getText()
            console.log("inside loop - selectedText is: " + selectedText)
            break // 找到选中项后直接退出循环，减少不必要的遍历
        }
    }
    console.log("outside loop - selectedText is: " + selectedText)
    await browser.pause(2000)
});

方法2：用CSS选择器直接定位选中项（更简洁） #

不需要手动遍历所有option，通过CSS伪类:selected可以直接定位到已选中的下拉选项，代码更简洁也不会出现异步时序问题：

it('verify select dropdown...', async () => {
    await browser.url("https://qavbox.github.io/demo/signup/")
    await browser.pause(2000)
    const select = await $("select[name='sgender']")
    // 直接定位选中的option元素
    const selectedOption = await select.$('option:selected')
    const selectedText = await selectedOption.getText()
    console.log("selectedText is: " + selectedText)
    await browser.pause(2000)
});

注意：所有数组的同步遍历方法（filter/forEach/map/some等）传入async回调时，都不会等待内部异步操作执行，处理异步逻辑时优先用普通for循环，或者先把所有异步结果用Promise.all收集完再做遍历处理。

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