使用forEach循环与isDisplayed()时的延迟问题（WebdriverIO测试）

你的代码存在两个核心问题：

1. forEach循环无法正确处理WebdriverIO的异步操作，直接调用element.click()会导致点击操作无序执行，后续验证逻辑也无法同步跟进。
2. 缺少点击后验证页面滚动到对应位置的逻辑。

下面是修正后的完整测试代码：

describe('test_1', () => {
    it('Go to URL', async () => {
        await browser.url('https://github.com/');
        await browser.maximizeWindow();
    })

    it('Menu - 点击按钮并验证滚动位置', async () => {
        // 定位菜单容器并滚动到视图内
        const menu = await $('div[class*=sub-nav-mktg-links]');
        await menu.scrollIntoView();
        
        // 获取所有菜单按钮
        const buttons = await $$('a[class*=sub-nav-mktg-link]');
        
        // 使用for...of循环处理异步操作，确保顺序执行
        for (const button of buttons) {
            // 获取按钮的锚点目标ID（从href属性提取）
            const targetId = await button.getAttribute('href').then(href => href.replace('#', ''));
            // 点击按钮
            await button.click();
            
            // 定位目标滚动区域元素
            const targetElement = await $(`#${targetId}`);
            // 验证目标元素是否显示（或使用isDisplayedInViewport()验证是否在视口内，更贴合滚动验证需求）
            await expect(targetElement).toBeDisplayed();
            // 可选：验证元素是否在视口内
            // await expect(targetElement).toBeDisplayedInViewport();
        }
    })
})

关键调整说明：

• 替换forEach为for...of循环：forEach不支持异步函数的等待，for...of可以配合await确保每个点击和验证操作按顺序完成。
• 提取按钮的锚点目标：通过按钮的href属性获取对应滚动区域的ID，准确定位目标元素。
• 增加验证逻辑：使用toBeDisplayed()断言目标元素已显示，或者用toBeDisplayedInViewport()更精准地验证元素是否处于当前视口（符合滚动到正确位置的需求）。
• 所有异步操作添加await：确保WebdriverIO的命令执行完成后再进行下一步操作。

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