Playwright点击带menuitem角色的锚点元素时出现超时错误的解决求助

大家好，我在用Playwright编写测试时遇到了一个棘手的问题，想请教下各位大佬怎么解决。

首先，页面上有这样一个锚点元素，它的角色是menuitem：

<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>

我原本认为用下面的定位逻辑点击这个元素应该没问题：

// 打开名为Daten的菜单
await page.locator('a').filter({ hasText: 'Daten' }).click();

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

但测试运行时直接报了超时错误：

Error: locator.click: Test timeout of 30000ms exceeded.

查看调用日志，具体过程是这样的：

• 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

我还发现，网站会把日志里提到的那个被定位到的元素从DOM中移除，移除后的元素结构是这样的：

<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>

奇怪的是，换成按回车键的方式就能正常工作，但我搞不懂这和直接点击元素到底有什么区别：

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

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

有没有大佬能帮我分析下为什么点击会超时，以及怎么解决这个问题呢？

备注：内容来源于stack exchange，提问作者user1107888