Question

我正在尝试使用包含以下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内容已经准备好了吗？

Answer 1

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

例如：

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

与具有空src属性的iframe进行交互

1 个答案: