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.
- We define a selector for the iframe element (
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