使用Playwright JS关闭模态框失败，寻求技术解决方案

问题根源分析 #

你的代码存在几个关键问题导致关闭失败：

• 多余的Shadow DOM处理：提供的HTML结构中没有Shadow DOM，代码里获取shadowRoot的操作完全不必要，反而会干扰正常逻辑。
• 选择器定位错误：.modal-close-button:nth-child(1)会选中modal-header的第一个子元素，但关闭按钮是第二个子元素（第一个是"ANNOUNCEMENTS"文本节点），导致定位不到目标按钮。
• 变量未初始化：非zedbet分支直接调用this.closeButton.click()，但该变量仅在if分支中赋值，会引发未定义错误。
• 跳过可交互检查：使用force: true强制点击会跳过元素可见性、可交互性检查，可能点击到不可见或不可交互的元素。

修正后的代码 #

async close() {
  // 等待模态框处于可见状态
  const announcementLightbox = this.page.locator('#announcementLightbox.modal-active');
  await announcementLightbox.waitFor({ state: 'visible' });

  // 基于模态框定位内部的关闭按钮，避免全局元素干扰
  const closeButton = announcementLightbox.locator('.modal-header .modal-close-button');

  // 等待按钮可交互后再点击，确保操作有效
  await closeButton.waitFor({ state: 'enabled' });
  await closeButton.click();

  // 可选：等待模态框隐藏，确认关闭操作成功
  await announcementLightbox.waitFor({ state: 'hidden' });
}

关键改进点 #

1. 精准定位元素：通过模态框的locator嵌套定位关闭按钮，避免页面中其他同名元素的干扰。
2. 等待元素状态：确保模态框可见、按钮可交互后再执行点击，替代强制点击的粗暴方式。
3. 移除冗余逻辑：删除不必要的Shadow DOM处理代码，简化逻辑。
4. 统一分支逻辑：不再区分品牌分支，用通用方式处理关闭操作，避免变量未定义问题。

调试技巧 #

如果仍有问题，可以尝试以下方法排查：

• 执行await closeButton.scrollIntoViewIfNeeded()确保按钮滚动到视口内。
• 用console.log(await closeButton.count())检查是否成功定位到按钮。
• 启动Playwright Inspector（PWDEBUG=1运行测试），可视化验证元素定位和点击操作是否正确。

内容的提问来源于stack exchange，提问作者Harshit Soni