元素可见但无法单击

Question

我有一个带有 data-test-id

menu-btn

的 html 元素，该元素可见，但测试无法单击它。尝试点击时失败。我正在尝试按修改日期对卡片列表进行排序。有一个按钮的 data-test-id 为“menu-btn”。我需要单击该按钮对卡片进行排序。

这是代码：

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

有人可以帮忙吗？

Answer 1

删除此行：

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

当您尝试单击某个项目时 - Playwright“知道”等待其可见。尝试仅单击该元素：

await this.dateModified().click();

您也可以尝试强制点击：

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