Playwright：如何在页面中唯一识别并追踪Frame？

传入frameattached和framedetached事件的Frame对象不是临时的，它们是同一个Frame实例的引用，你可以直接通过这个引用或者Frame自带的唯一ID来关联两个事件中的同一个Frame，从而管理存储列表。

核心原理 #

Playwright触发这两个事件时，传递的是页面中对应Frame的同一个实例对象。也就是说，某个Frame被attached时传入的Frame，和它被detached时传入的Frame是同一个引用，完全可以用来做唯一标识。此外，每个Frame实例自带frame.id()方法，会返回Playwright内部分配的唯一字符串ID，也可作为标识使用。

推荐实现方案（用Map更高效） #

用Map存储Frame信息，以Frame对象作为键，支持快速增删：

const framesMap = new Map();

page.on("frameattached", (frame) => {
  const frameInfo = {
    internalId: frame.id(), // 可选：保留Playwright内置ID
    url: frame.url(),
    attachedTime: Date.now()
    // 可添加更多自定义字段
  };
  framesMap.set(frame, frameInfo);
});

page.on("framedetached", (frame) => {
  // 直接通过Frame引用删除对应条目
  framesMap.delete(frame);
});

数组实现方案（兼容初始写法） #

如果一定要用数组存储，可通过Frame的内置ID匹配删除：

const frames = [];

page.on("frameattached", (frame) => {
  frames.push({
    id: frame.id(),
    url: frame.url(),
    // 其他自定义字段
  });
});

page.on("framedetached", (frame) => {
  const targetId = frame.id();
  // 过滤掉对应ID的Frame条目
  frames = frames.filter(item => item.id !== targetId);
});

注意事项 #

• 无需自行生成uuid标识Frame，因为无法保证自定义ID能和detached事件中的Frame对应，而Playwright的frame.id()或Frame对象引用是绝对可靠的。
• Frame对象在detach后虽无法执行页面操作（比如frame.url()可能不再返回有效结果），但依然可作为Map的键或用来获取id()，不影响标识和删除操作。

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