Show List

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.


    Leave a Comment


  • captcha text