Testing with iFrame

Working with iframes in TestCafe involves switching the test context to the iframe element before performing any actions or assertions inside it. Here's a sample TestCafe test script that demonstrates working with an iframe:

import { Selector } from 'testcafe';

fixture('iFrame Test')
    .page('https://www.example.com');

test('Interact with iFrame', async t => {
    // Selector for the iframe element
    const iframe = Selector('iframe');

    // Switch to the iframe context
    await t.switchToIframe(iframe);

    // Now, TestCafe is interacting with elements inside the iframe

    // Selector for an element inside the iframe
    const iframeElement = Selector('body');

    // Perform actions or assertions inside the iframe
    await t
        .expect(iframeElement.innerText).contains('Content inside the iframe');

    // Switch back to the main page context
    await t.switchToMainWindow();

    // Now, TestCafe is back to interacting with elements on the main page
});

In this test:

• We import the Selector function from TestCafe to select elements on the web page.
• We define a fixture named 'iFrame Test' and set the page to 'https://www.example.com'.
• Inside the test function:
  • We define a selector for the iframe element (iframe). Replace 'iframe' with the appropriate selector for your iframe element.
  • We use TestCafe's switchToIframe action to switch the test context to the iframe.
  • We define a selector for an element inside the iframe (iframeElement). Replace 'body' with the appropriate selector for the element you want to interact with inside the iframe.
  • We perform actions or assertions inside the iframe using TestCafe.
  • We use TestCafe's switchToMainWindow action to switch the test context back to the main page.

Make sure to replace 'https://www.example.com' with the URL of the website you want to test, and adjust the selectors accordingly based on the structure of the webpage and iframe you are testing.