working-with-iframes.md

layout	title	permalink	checked
docs	Working with <iframes>	/documentation/test-api/working-with-iframes.html	true

Working with <iframes>

At any moment, a TestCafe test has its browsing context limited to either the main window or an <iframe>. To use an <iframe> in your test, you need to switch the context from the main window to this <iframe> (and then probably back). Likewise, if several <iframes> are involved in your test, you will have to switch between them.

To do this, use the switchToIframe and switchToMainWindow methods of the test controller.

Switching to an <iframe>

t.switchToIframe( selector )

Switches the test's browsing context to the specified <iframe>.

Parameter	Type	Description
selector	Function | String | Selector | Snapshot | Promise	Identifies an <iframe> on the tested page. See Selecting Target Elements.

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

test('switching to an iframe', async t => {
    await t
        .click('#button-in-main-window')
        .switchToIframe('#iframe-1')
        .click('#button-in-iframe-1');
});

Switching Back to the Main Window

t.switchToMainWindow()

Switches the test's browsing context from an <iframe> back to the main window.

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

test('switching back to main window', async t => {
    await t
        .switchToIframe('#iframe-1')
        .click('#button-in-iframe-1')
        .switchToMainWindow()
        .click('#button-in-main-window');
});