使用puppeteer定位嵌套的iframe

Question

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

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

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

我打开Excel后访问第一个

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

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

我尝试了不同的延迟等，但它看起来就像木偶操作者没有看到它。

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;
  });
}