Playwright生成拦截指针事件的iframe致测试偶发失败求解决方案

问题背景 #

• 项目基于React+@mui/material开发，自身未使用iframe
• 运行Playwright测试时，50%概率出现测试失败，原因是Playwright生成的空白iframe拦截pointer events；测试成功时不会出现该iframe
• 已尝试将Playwright降级至1.2X版本，问题未解决

错误日志 #

locator.click: Target closed
=========================== logs ===========================
waiting for getByRole('button', { name: 'ArrType ​' })
  locator resolved to <div tabindex="0" role="button" id="ArrTypeInput" ar…>…</div>
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
  <iframe></iframe> intercepts pointer events
retrying click action, attempt #1
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  <iframe></iframe> intercepts pointer events
retrying click action, attempt #2
  waiting 20ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  <iframe></iframe> intercepts pointer events
retrying click action, attempt #3
  waiting 100ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  <iframe></iframe> intercepts pointer events
retrying click action, attempt #4
  waiting 100ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  <iframe></iframe> intercepts pointer events
retrying click action, attempt #5
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  <iframe></iframe> intercepts pointer events
retrying click action, attempt #6
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  <iframe></iframe> intercepts pointer events
retrying click action, attempt #7
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  <iframe></iframe> intercepts pointer events
retrying click action, attempt #8
  waiting 500ms
============================================================

  125 |         
  126 |
> 127 |         await page.getByRole('button', { name: 'ArrType ​' }).click();

问题iframe说明 #

该空白iframe无任何内容，覆盖在目标点击元素上方，拦截指针事件导致点击失败。

解决思路与方案 #

1. 定位iframe来源 #

• 在测试失败分支中添加日志，调用page.frames()打印所有iframe的属性（src、id、父元素等），确认是第三方依赖生成还是Playwright自身注入
• 排查项目中是否有监控、埋点类脚本在特定场景下生成临时iframe

2. 强制点击绕过拦截 #

使用Playwright的force: true参数强制执行点击，忽略上层元素的指针事件拦截（注意：此方式会跳过元素可见性、可用性校验，需确认目标元素确实可交互后使用）：

await page.getByRole('button', { name: 'ArrType ​' }).click({ force: true });

3. 提前移除/隐藏干扰iframe #

如果确认该空白iframe无业务意义，可在点击前定位并处理：

// 定位空白iframe并隐藏
const emptyIframe = page.locator('iframe[src=""]');
await emptyIframe.evaluate(iframe => iframe.style.display = 'none');

// 或者直接移除iframe
await emptyIframe.evaluate(iframe => iframe.remove());

// 再执行点击
await page.getByRole('button', { name: 'ArrType ​' }).click();

4. 优化测试稳定性 #

• 等待页面完全稳定后执行交互：比如等待网络请求完成、加载状态消失

// 等待网络空闲（无新请求超过500ms）
await page.waitForLoadState('networkidle');
await page.getByRole('button', { name: 'ArrType ​' }).click();

• 调整Playwright配置，延长交互超时时间：在playwright.config.js中修改

module.exports = {
  use: {
    actionTimeout: 10000, // 延长至10秒
  },
};

5. 排查MUI组件潜在问题 #

• 更新@mui/material到最新稳定版本，排查是否是组件已知bug导致的临时iframe生成
• 检查目标按钮关联的MUI组件（如Select、Autocomplete等）是否在渲染时存在异常iframe创建逻辑

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