import { test as base } from '@playwright/test';

export * from '@playwright/test';

// `next dev` 在文档外挂一个 <nextjs-portal>（devtools 指示器 + 报错浮层的宿主），生产构建里没有它。
// 其 shadow DOM 含 <footer class="error-overlay-footer">，而 Playwright 的 CSS 默认穿透 open shadow root，
// 于是 locator('footer') 解析到 2 个元素；它画成 38px 圆盘还是红色 "Issues" 胶囊又取决于当次 dev 会话的告警数。
// 本项目 dev 下 CSP 禁 eval，报错浮层一定挂得到——实测 devIndicators:false 也拿不掉（官方文档：关闭只隐藏指示器，
// compile/runtime 报错仍呈现）。它不属于产品内容，在 harness 层统一摘掉，让所有 project 只面对产品 DOM。
// 观察器挂在 document 而非 documentElement：官方文档写明 init script 在 documentElement 创建之前就已运行。
function stripDevChrome() {
  const remove = () => {
    document.querySelectorAll('nextjs-portal').forEach((node) => node.remove());
  };
  new MutationObserver(remove).observe(document, { childList: true, subtree: true });
  remove();
}

export const test = base.extend({
  // 第二个形参改名：Playwright 按位置传入 fixture 续接函数，若沿用 `use` 会被
  // eslint 的 react-hooks/rules-of-hooks 误判成 React Hook 调用。
  context: async ({ context }, continueWith) => {
    await context.addInitScript(stripDevChrome);
    await continueWith(context);
  },
});

export default test;