PlayWright中的"elementHandle.contentFrame()"是什么？

Question

我刚刚用" elementHandle.contentFrame() "解决了一个问题，但并不真正知道它背后发生了什么。因此，我试图选择一个DOM元素并单击它。但是我意识到，当元素被包装在一个框架中时，我不能简单地这样做:

{
await page.click('<element>');
}

所以，我应用了这个方法("elementHandle.contentFrame()")，它工作了!

{
const handle = await page.$('frame');
const contentFrame = await handle.contentFrame();
await contentFrame.click('<selector>');
}

有人能给我解释一下它背后的概念吗?谢谢!

Answer 1

你不必使用contentFramepage.frame('frame-name')也可以给你一个框架实例。

基本上你可以认为iframe是一个页面中的另一个页面，所以如果你想选择iframe中的元素，你必须首先找到那个框架

Answer 2

handle变量中的句柄代表页面内的iframe元素。有了这个变量，就可以像处理页面上任何其他DOM元素一样读取或操作该元素。但是你不能访问iframe渲染的HTML内容。

这就是为什么，如果你想与框架内的内容进行交互，你需要使用contentFrame来获得frame。