Delays in forEach loop and isDisplayed()

Question

I'm trying to write test case in JavaScript with Webdriverio. I need to press buttons using forEach loop and verify that after clicking on button, the site scrolls to the correct place using isDisplayed().

describe('test_1', () => {
    it('Go to URL', async () => {
        await browser.url('https://github.com/');
        await browser.maximizeWindow();
    })
    it('Menu', async () => {
        var menu = await $('div[class*=sub-nav-mktg-links]');
        menu.scrollIntoView();
        var buttons = await $$('a[class*=sub-nav-mktg-link]');
        buttons.forEach(element => {
            element.click();
        });
    })
})

Answer 1

Use a for or for...of loop.

describe('test_1', () => {
    it('Go to URL', async () => {
        await browser.url('https://github.com/');
        await browser.maximizeWindow();
    })
    it('Menu', async () => {
        var menu = await $('div[class*=sub-nav-mktg-links]');
        menu.scrollIntoView();
        var buttons = await $$('a[class*=sub-nav-mktg-link]');
        for(let btn of buttons) {
            await btn.click();
            // await other async stuff
        });
    })
})

Array#forEach will synchronously tee up a sequence of operations that will then run without waiting for one another.