Interacting with iframe with empty src attribute - testing

Question

I'm trying to test an a page with an external component which contains a following iframe:
<iframe id="iframe1" src="about:blank" ... >
This iframe has an empty body initially but is populated with content after some actions.
When trying to run the following piece of code:
.expect(myIFrameSelector().visible).ok()
.switchToIframe(myIFrameSelector())
.expect(firstRowSelector()).eql("Hello")
I receive the following error on line 3:
The content of the iframe in which the test is currently operating did not load.
I tried waiting for the contents to appear with wait() and I checked it with debug() too.
Any ideas what could be the problem?
I assume that this is because the content was probably populated using JS, so can I somehow tell testcafe that the content is actually ready?

Answer 1

You can try to wait and check if the document in the iframe is loaded using ClientFunction.
For example:
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'));
});