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 I dont know whats the difference is with clicking the Element:

 await page.locator('a').filter({ hasText: 'Daten' }).click();


await page.getByRole('menuitem', { name: 'Eventpartner' }).press('Enter');

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 I dont know whats the difference is with clicking the Element:

 await page.locator('a').filter({ hasText: 'Daten' }).click();


await page.getByRole('menuitem', { name: 'Eventpartner' }).press('Enter');

• javascript
• playwright

Share Improve this question Follow edited Mar 25 at 10:21 user1107888 asked Mar 25 at 9:35 user1107888user1107888 1,52555 gold badges3535 silver badges5858 bronze badges 1

• I don't think the few lines of markup here is enough to reproduce the problem. Likely this is a dynamic, complex site that needs to be included as part of the question. – ggorlen Commented Mar 27 at 5:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Issue is that the menu item vanishes on click because the menu isn’t fully opened.
To fix this, open the menu, then click the link.
For example:

// 1. Click the button that opens the menu
await page.getByRole('button', { name: 'Menu' }).click();

// 2. Now click the menu item
await page.getByRole('menuitem', { name: 'Eventpartner' }).click();