I have following anchor Element on the page for which I am writing Playwright Tests
<a _ngcontent-ng-c643490139="" mat-menu-item="" tabindex="0" class="mat-mdc-menu-item mat-mdc-focus-indicator ng-tns-c2786309385-2 ng-star-inserted" href="/event-partner" role="menuitem" aria-disabled="false" style="">
<span class="mat-mdc-menu-item-text"><span _ngcontent-ng-c643490139="">Eventpartner</span></span><div matripple="" class="mat-ripple mat-mdc-menu-ripple"></div>
<!---->
</a>
Its an anchor Tag with a role of menuitem. Accessing it via following locator should work:
//Open the Menu whose name is Daten
await page.locator('a').filter({ hasText: 'Daten' }).click();
await page.getByRole('menuitem', { name: 'Eventpartner' }).click();
But I get the following error in my Test:
Error: locator.click: Test timeout of 30000ms exceeded.
Call log:
- waiting for getByRole(‘menuitem’, { name: ‘Eventpartner’ })
- locator resolved to …
- attempting click action
2 × waiting for element to be visible, enabled and stable- element is visible, enabled and stable
- scrolling into view if needed
- done scrolling
- … from … subtree intercepts pointer events
- retrying click action
- waiting 20ms
- waiting for element to be visible, enabled and stable
- element was detached from the DOM, retrying
How can I fix this issue?
The website here removes the Element referred to by locator resolved to in the above error message.
<a tabindex="0" role="menuitem" mat-menu-item="" href="/event-partner" aria-disabled="false" _ngcontent-ng-c2888663785="" class="mat-mdc-menu-item mat-mdc-focus-indicator ng-tns-c2786309385-2 ng-star-inserted">…</a>
Following does work,but not always, say 8 out of 10 times.
await page.locator('a').filter({ hasText: 'Daten' }).click();
await page.getByRole('menuitem', { name: 'Eventpartner' }).press('Enter');
How can I solve this issue?