Iframe interaction strategies in Cypress - Build an Automation Script

Verify interaction with a form inside an iframe

Preconditions (2)

Step 1: Locate the iframe on the page

Step 2: Switch context to the iframe

Step 3: Enter 'John Doe' into the 'Name' input field inside the iframe

Step 4: Enter '[e-mail]' into the 'Email' input field inside the iframe

Step 5: Click the submit button inside the iframe

Step 6: Verify that a success message 'Form submitted successfully' appears inside the iframe

✅ Expected Result: The form inside the iframe accepts input, submits successfully, and shows the success message

Automation Requirements - Cypress

Assertions Needed:

Verify input fields inside iframe accept text

Verify submit button click triggers success message inside iframe

Best Practices:

Use Cypress commands to access iframe's document and body

Avoid hardcoded waits; use Cypress retry-ability

Use custom commands or utilities to handle iframe content

Ensure selectors inside iframe are scoped properly

Automated Solution

Cypress

/// <reference types="cypress" />

// Custom command to get iframe body
Cypress.Commands.add('getIframeBody', (iframeSelector) => {
  return cy
    .get(iframeSelector)
    .its('0.contentDocument.body').should('not.be.empty')
    .then(cy.wrap);
});

describe('Iframe interaction test', () => {
  it('fills and submits form inside iframe', () => {
    cy.visit('/page-with-iframe');

    // Access iframe body
    cy.getIframeBody('#form-iframe').within(() => {
      cy.get('input[name="name"]').type('John Doe');
      cy.get('input[name="email"]').type('[e-mail]');
      cy.get('button[type="submit"]').click();
      cy.contains('Form submitted successfully').should('be.visible');
    });
  });
});

The custom command getIframeBody accesses the iframe's contentDocument.body and wraps it so Cypress commands can chain inside it.

In the test, we visit the page, then use getIframeBody with the iframe selector #form-iframe. Inside the iframe context, we locate input fields by their name attributes and type the test data.

We click the submit button and then assert that the success message appears inside the iframe. This approach avoids switching frames manually and uses Cypress's retry-ability for stable tests.

Common Mistakes - 3 Pitfalls

{'mistake': 'Trying to directly access iframe elements without waiting for iframe to load', 'why_bad': 'Iframe content may not be ready, causing test failures or flaky tests', 'correct_approach': "Use Cypress commands to wait for iframe's body to be non-empty before interacting"}

{'mistake': 'Using hardcoded waits like cy.wait(5000) before accessing iframe', 'why_bad': 'Hardcoded waits slow tests and are unreliable if loading time varies', 'correct_approach': "Use Cypress's built-in retry and assertions to wait dynamically"}

{'mistake': 'Using global selectors without scoping inside iframe', 'why_bad': 'Selectors may target elements outside iframe or cause ambiguity', 'correct_approach': "Scope selectors inside iframe's body using .within() or wrapped body"}

Bonus Challenge

Now add data-driven testing with 3 different sets of name and email inputs inside the iframe form

Show Hint