Mastering Advanced Cypress.io Test Automation [Part 1/4]: Dealing with Iframes

Welcome to the first instalment of our series on mastering advanced Cypress.io test automation! In this series, we’ll be diving deep into some of the most complex concepts and techniques for writing efficient and effective automated tests with Cypress.io.

In this series of articles, we will delve into complex concepts such as handling iframes, network stubbing, and resolving promises with Cypress.io. Additionally, we will provide you with valuable insights on how to create custom functions to address the unique testing challenges that Cypress.io does not cover directly. So, fasten your seatbelts and get ready to elevate your Cypress.io proficiency!

In this first part, we’ll be focusing on one of the most challenging aspects of test automation: dealing with iframes. As you may already know, iframes can present unique challenges for automated testing, since they essentially embed one website inside another. We’ll explore some strategies and techniques for handling iframes in your Cypress.io tests, including how to locate and interact with elements inside iframes, how to assert on iframe content, and how to handle cross-domain iframes.

By the end of this part, you’ll have a solid understanding of how to tackle iframes in your Cypress.io test suite, and you’ll be well on your way to mastering advanced Cypress.io test automation. So, let’s get started!

Dealing with Content within Iframes

When testing web applications, it’s not uncommon to come across iframes, which are HTML elements used to embed another document within the current HTML document. Testing content within iframes can be a bit more complicated than testing regular HTML elements, but Cypress.io provides us with the tools we need to tackle this challenge.

Real-World Example

Suppose you are testing a web page that has a chatbot integrated into an iframe. To test the chatbot functionality, you need to interact with the iframe’s elements. However, because the iframe’s elements are technically part of a separate document, you cannot access them directly from the parent document using the Cypress commands. Instead, you need to switch the context of your test to the iframe document in order to interact with its elements. You can do this by using the cy.get() command to select the iframe element based on its attributes, using the .then() method to access the contents of the iframe using the $iframe.contents() method, and finally, using the cy.wrap() command to wrap the form element and save it to an alias @form that you can reference later in your test.

Understanding the Challenge

One of the challenges of testing content within iframes is that the elements within the iframe are technically part of a separate document. This means that we cannot access them directly from the parent document using the Cypress commands. Instead, we need to switch the context of our test to the iframe document in order to interact with its elements.

The Code Example

To illustrate how to deal with content within iframes in Cypress.io, let’s use the example of a web page that contains an iframe with a form element. Our goal is to fill out the form and submit it.

First, we need to identify the iframe element using the cy.get() command and save it to a variable. We'll use the iframe() command to get the content of the iframe:

cy.get('iframe[name="my-iframe"]').then(($iframe) => {
  const iframeContents = $iframe.contents()
  cy.wrap(iframeContents.find('form')).as('form')
})

Here, we’re using the cy.get() command to select the iframe element based on its name attribute. We then use the .then() method to access the contents of the iframe using the $iframe.contents() method, which returns the document object of the iframe.

Next, we use the cy.wrap() command to wrap the form element and save it to an alias @form that we can reference later in our test.

Now that we have access to the iframe document and the form element, we can interact with the form fields and submit the form as we would with any other form element. For example, let’s fill out the form and submit it:

cy.get('@form').find('[name="name"]').type('FirstName LastName')
cy.get('@form').find('[name="email"]').type('[e-mail]')
cy.get('@form').find('button[type="submit"]').click()

Here, we’re using the cy.get('@form') command to reference the form element that we saved to the @form alias earlier. We then use the .find() method to select the form fields by their name attributes and fill them out using the .type() command. Finally, we use the .click() command to submit the form.

---

Enough for now.

In subsequent parts of this article, I’ll talk about Network Interception, Promise Resolving, and Writing Custom Functions.

Up Next: Part 2, Part 3, Part 4

If you liked this, click ❤ so other people will also notice here.

Comments

[Saravanan Gnanaguru]

Hi Ahsan Bilal, Very insightful articles on Cypress. Keep posting.
Apart from adding the link to other related blogs, I would suggest you to create series of post in dev.to. You could go through this article on how to create a series of posts in dev.to. Thanks and keep sharing knowledge.

[Ahsan Bilal]

Thanks, I'll look into it. :)