Asynchronus select of Elements

At the moment I use Playwright for e2e-tests. Previously I had tried Cypress, but I didn't get on with it. I am relatively new to software testing. I am currently testing a website with a dropdown menu. The dropdown menu is from the Material Components of Angular. My thought would have been that I could now execute the check of the page asynchronously for each entry. However, the result is that all entries are available according to the test, but the click and the associated selection does not always work. Between 2 and 5 entries are always not found. I suspect that this is because the view is changed by the asynchronous execution and then the coordinates for the click are no longer correct.

My question would therefore be is there a way to implement something like this, or should dynamic things be done synchronously and an asynchronous approach only be chosen for static things?

   await Promise.all(testingYears.map(async (year) => {
        await tabAllgemein.selectErstattungsJahr(year);
        await expect(tabAllgemein.erstattungsYearSelect).toContainText(year.toString());
    }));

async selectErstattungsJahr(year: number) {
    await this.erstattungsYearSelect.isVisible();
    await this.erstattungsYearSelect.click();

    const result = this.page.locator("mat-option", { hasText: year.toString() })

    await result.waitFor()
    await result.isVisible();
    await result.click();
}

I wonder how you expect your UI to work asynchronously :) Just use for

for (const year of testingYears) {
   await tabAllgemein.selectErstattungsJahr(year);
   await expect(tabAllgemein.erstattungsYearSelect).toContainText(year.toString());
}

Also, those are not needed for clicks.

waitFor()
isVisible();

https://playwright.dev/docs/input#mouse-click

Under the hood, this and other pointer-related methods:

wait for element with given selector to be in DOM wait for it to become displayed, i.e. not empty, no display:none, no visibility:hidden wait for it to stop moving, for example, until css transition finishes scroll the element into view wait for it to receive pointer events at the action point, for example, waits until element becomes non-obscured by other elements retry if the element is detached during any of the above checks