使用 puppeteer 定位嵌套 iframe

Question

目前我正在尝试创建一些需要在线登录 Excel 然后上传扩展的 E2E 测试。

我能够登录，打开 Excel 并单击上传插件按钮，但是，我无法继续。

到目前为止，我发现有 2 个 iframe，一个嵌套在另一个中。

打开 Excel 后我会访问第一个

let targetIFrame = await this.page.frames().find(f => f.name() === 'sdx_ow_iframe');

关于第二个的棘手部分是，它仅在我单击“上传插件”按钮后才出现在 DOM 中，并且嵌套在我上面访问的那个中。

我尝试了不同的延迟等，但看起来 puppeteer 没有看到它。

Answer 1

根据我的研究，您可以构建一个实现来查找父框架中包含的 iframe。

请测试如下代码：

/**
* @return {!Promise<ElementHandle>}
*/
async ownerFrame() {
  if (!this._frame._parentFrame)
    throw new Error('No parent frame');

  const rootElementHandle = await this._frame.$('*');
  const rootElementDescriptionHandle = await this._client.send('DOM.describeNode', { objectId: rootElementHandle._remoteObject.objectId });

  const parentsIframes = await this._frame._parentFrame.$$('iframe');
  if (!parentsIframes.length)
    throw new Error('No iframe elements found in parent');

  return parentsIframes.find(async parentsIframe => {
    const iframeDescription = await this._client.send('DOM.describeNode', { objectId: parentsIframe._remoteObject.objectId, pierce: true, depth: 2 });
    const iframesRootDescription = iframeDescription.node.contentDocument.children[0];
    return iframesRootDescription.backendNodeId === rootElementDescriptionHandle.node.backendNodeId;
  });
}