元素可见但无法点击：menu-btn测试元素点击失败求助

执行卡片按修改日期排序的测试时，带有data-test-id="menu-btn"的<sp-menu-item>元素已处于可见状态，但调用click()操作时触发超时错误。

HTML元素 #

<sp-menu-item data-test-id="menu-btn" value="modified_date" selected="" role="menuitemradio" aria-checked="true" focusable="" tabindex="-1" id="sp-menu-item-67" dir="ltr"><!--?lit$884525023$-->Modified</sp-menu-item>

测试代码 #

dateModified = () => this.page.getByTestId("menu-btn");

await this.page.reload();
await this.sortButton().waitFor({ state: "visible", timeout: 30000 });
await this.sortButton().click();
await this.dateModified().waitFor({ state: "visible", timeout: 20000 });
await this.dateModified().click();

错误日志 #

Error: TimeoutError: locator.click: Timeout 20000ms exceeded.
=========================== logs ===========================
waiting for getByTestId('menu-btn')
  locator resolved to <sp-menu-item selected dir="ltr" focusable="" tabindex="-1" ar…>…</sp-menu-item>
attempting click action
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action

解决方案建议 #

• 强制跳过遮挡检查：尝试使用force: true参数强制点击，验证是否存在视觉遮挡（比如透明层、固定导航栏）导致点击失败：

  await this.dateModified().click({ force: true });
  

• 等待元素完全可交互：在等待可见后，额外等待元素处于可启用状态，确保菜单动画完全结束：

  await this.dateModified().waitFor({ state: "enabled", timeout: 20000 });
  await this.dateModified().click();
  

• 先聚焦再点击：针对tabindex="-1"的元素，尝试先聚焦再执行点击操作：

  await this.dateModified().focus();
  await this.dateModified().click();
  

• 点击元素文本区域：直接定位元素内的文本节点进行点击，避免点击元素的非交互区域：

  await this.dateModified().locator('text=Modified').click();
  

• 启用调试跟踪：开启Playwright的跟踪功能，录制点击过程的页面状态，排查具体阻塞点：

  await this.page.tracing.start({ screenshots: true, snapshots: true });
  // 执行测试代码
  await this.page.tracing.stop({ path: 'trace.zip' });
  

内容的提问来源于stack exchange，提问作者Rue Vitale