与具有空 src 属性的 iframe 交互答案

【问题标题】：Interacting with iframe with empty src attribute与具有空 src 属性的 iframe 交互
【发布时间】：2019-09-04 11:34:23
【问题描述】：

我正在尝试使用包含以下 iframe 的外部组件测试页面：

<iframe id="iframe1" src="about:blank" ... >

此 iframe 最初的正文为空，但在执行某些操作后会填充内容。尝试运行以下代码时：

.expect(myIFrameSelector().visible).ok()
.switchToIframe(myIFrameSelector())
.expect(firstRowSelector()).eql("Hello")

我在第 3 行收到以下错误：

The content of the iframe in which the test is currently operating did not load.

我尝试使用 wait() 等待内容出现，并使用 debug() 进行检查。

任何想法可能是什么问题？我认为这是因为内容可能是使用 JS 填充的，所以我可以以某种方式告诉 testcafe 内容实际上已经准备好了？

【问题讨论】：

您能否展示一个简单的示例来说明您如何准确地填充 iframe 正文？ TestCafe 将服务脚本注入到每个加载的页面中，包括 iframe 中的页面。您的内容填充逻辑可能会以某种方式干扰这些脚本，这可能会导致它们停止工作。
感谢您的回答。不幸的是，我不知道它是如何填充的，因为它是一个外部组件，我必须更深入地挖掘，但它似乎正是发生了什么。甚至 root-hammerhead-shadow-ui div 也不在正文中，因为它可能已被覆盖。由于这看起来是一项乏味的任务，我们决定不测试这部分，它主要测试外部组件的实现，实际上我们可以在不与该 iframe 交互的情况下涵盖应用程序的业务案例。

标签： testing iframe automated-tests e2e-testing testcafe

【解决方案1】：

您可以尝试等待并检查 iframe 中的文档是否使用ClientFunction 加载。

例如：

import { Selector, ClientFunction } from 'testcafe';

const waitForIframeLoad = ClientFunction((iframeSelector) => new Promise((resolve, reject) => {
    var i = 0;
    var intervalId = null;

    intervalId = window.setInterval(() => {
        var iframeElement = document.querySelector(iframeSelector);
        if (iframeElement
            && iframeElement.contentWindow
            && iframeElement.contentWindow.location.href !== 'about:blank'
            && iframeElement.contentDocument) {
            window.clearInterval(intervalId);
            resolve();
        }
        if (i > 60) {
            window.clearInterval(intervalId);
            reject(new Error('Iframe content loading timeout'))
        }
        i++;
    }, 1000);
}));

fixture`fixture`
    .page`http://example.com`;

test('test', async t => {
    const iframeSelector = '#simulatorFrame';

    await waitForIframeLoad(iframeSelector);

    await t
        .switchToIframe(iframeSelector)
        .click(Selector('button'));
});

【讨论】：