如何使用Playwright访问虚拟文档#document的iframe内容？

针对你访问Google Sites页面里虚拟文档#document的需求，以下是可行的Playwright解决方案，结合页面结构特点给出具体步骤：

1. 先确认目标内容的上下文 #

先通过Playwright调试工具定位#document的实际位置：

• 执行page.pause()启动Playwright Inspector，在浏览器中查看元素所属的iframe或Shadow DOM结构。
• Google Sites的内容通常嵌套在特定iframe中，或封装在Shadow Root内。

2. 定位并切换到目标iframe #

如果#document在iframe内，不要直接用普通定位器，而是通过iframe的特征（如URL包含目标路径）获取上下文：

// JavaScript示例：等待并获取目标iframe
const targetFrame = await page.frame({ url: /pinnednote/ });

// 备选：通过iframe元素定位后获取内容帧
const iframeLocator = page.locator('iframe[src*="pinnednote"]').first();
await iframeLocator.waitFor();
const targetFrame = await iframeLocator.contentFrame();

3. 穿透Shadow DOM（如果存在） #

若内容被Shadow DOM包裹，需要用shadowRoot()方法穿透定位：

// 定位Shadow Root内的#document相关元素
const contentElement = targetFrame.locator('your-shadow-host-element')
  .shadowRoot()
  .locator('#document-target-selector');

// 获取内容文本
const contentText = await contentElement.textContent();
console.log(contentText);

4. 直接在浏览器上下文获取内容（极端情况） #

如果上述方法无效，直接通过evaluate()调用浏览器DOM API获取：

const documentContent = await page.evaluate(() => {
  // 根据实际DOM结构调整选择器，比如找到包含#document的容器
  const container = document.querySelector('div[role="main"]');
  if (!container) return null;
  // 若#document是contentDocument，直接读取
  const targetDoc = container.contentDocument || container.shadowRoot?.ownerDocument;
  return targetDoc?.body?.innerText;
});

关键注意事项 #

• 确保等待元素加载完成：所有定位操作前添加waitFor()，避免因页面未渲染完成导致定位失败。
• 排查跨域问题：如果iframe来自不同域名，Playwright会限制访问，但Google Sites同域内的iframe不会有此问题。

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