iFrames | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we discussed how to automate iframes using Cypress . Although Cypress does not natively support iframes, there is a workaround using a plugin. Understanding Iframes An iframe is essentially a web page embedded within another web page. While not commonly used in modern applications, you may encounter them and need to automate interactions. Steps to Automate Iframes Install the Cypress Iframe Plugin: npm i cypress-iframe --save-dev This command adds the plugin as a project dependency. Add Import to Commands: Include the plugin import in the commands.js file under the support directory. Validate Frame Loading: Ensure the iframe is loaded before interacting with it using cy.frameLoaded() with an appropriate selector. Interact with Elements: Use cy.iframe() to switch to the iframe and locate elements, or use method enter to interact with multiple elements within the same iframe. Example Interaction To interact with elements inside the iframe: cy.frameLoaded('selector-for-iframe'); cy.iframe('selector-for-iframe').find('button-selector').click(); By following these steps, you can successfully automate interactions with iframes in your Cypress tests. In summary, while Cypress lacks native support for iframes, using the Cypress iframe plugin allows you to manage iframe interactions effectively.
Video Transcript
All right, guys, in this lesson, we will talk about iframes. So remember, in the very beginning of the course, I mentioned that Cypress is not very friendly with the iframes. And also, Cypress does not have a native support for the iframes. But there is a workaround, and let me show you how to automate iframes with Cypress. Let's get into it. So in our test application, under Models and Overlays dialog, we have this one of the dialogs called iframe dialog. And it looks like a normal UI component. So we click on the buttons, it opens dialog boxes for us, and so on. But it is inside an iframe. And if we try to automate this, clicking on this button the regular way, it will not work. So let me show you. I make right-click Inspect. And let's say I get this message going back to the project. And I already set up a new test for the iframes. And if I type like CyContains and enter the text, and try to click and run the test. Going back to Cypress, running the test, navigating to the page. And you see it's looking for this text, but not able to find. But it's clearly here, but not able to. Because this entire box is the iframe, and Cypress cannot access it. How do I know that this is iframe? I'm going back to the app, and if I scroll a little bit up, up, up, up, up. And here we go, look, this is iframe tag. So technically, what is iframe? Iframe is the web page inside of the web page. It's not often used now in the modern application, but still. Sometimes you may face with the iframes, and you need to automate those. For that, you can install the plugin, Cypress iframe plugin from NPMJS. So it's called Cypress plugin, you just go to npmjs.com and search it. Because Cypress natively does not have support for the iframe. But through this plugin, you can enable this support. So first of all, let's install it. So I will either copy this line, or copy this line, and go back to our application, open a new terminal session. And type npm i cypress iframe dash dash safe dash dev. So it will be saved as a project dependency as well. So click Install, and application is installed, package is installed. We can see that it also added into the package.json as a dependency into the project, so that's the first step. The second step, let's go back to the instructions. We need to add this import into the commands.js, so let's do this as well. Under support, commands.js, and then somewhere into this file, let me add it right here, add this import. So this step is done, and then I believe that's it, we can use it. So this is the TypeScript configuration, we don't need it. And the first step, we need to validate that this frame is loaded. Because remember, iframe is the page inside of the page. And we need to first make sure that this frame is loaded before interacting with this iframe. There are several options, just frame loaded, then frame loaded, and URL for this iframe. Or if you have an ID or any other selector, you can use this way. So let's use this way, syframe loaded, and use the selector for our iframe. That's the step number one. So, syframe loaded, you see I have a new method over here, and I need to find selector for the iframe. So iframe, and we can use this selector datacy, iframe. Copy this selector, and this is the attribute, step one. And then step two, we need to call the iframe selector, and then interact with anything within this iframe. So I call method cyiframe, I think it's like this, cyiframe. Then provide selector for the frame, and then contains, let me collapse this, and close this. So I open the frame, and then within this frame, looking for a button that I want to interact with, going back, running the test. And now it works successfully, so we were able to switch to our frame. So look, if I hover over, even look how Cypress Snapshot displays this, right? So the snapshot was created, but frame was not loaded yet, it's just showing that placeholder. Then the frame was loaded, and it is showing this dialog box that we automated. And after that, let's click on this button, so where is our frame? So we're clicking on this, inspect. And this guy, this pop-up dialog, is outside of the frame. So we can automate it as usual, you see? So this guy is outside of the frame, it's not inside of the iframe. So we can just call CyContains by the text. And make the click, and it should work, yeah. And everything was successful, opened, and we click the Dismiss dialog, and close. That's the option number one. And the option number two, when you need to interact with the several elements within the same iframe. So instead of calling this frame again and again, what you can do, you can call this frame, but instead of using iframe method, you can use method enter, method enter. And by the way, this is also mentioned in this documentation related to this plugin. So here we go, method enter. You provide the frame, and then you can use this getBody method to interact with elements within the iframes. This is what we do. So then, then getBody, like this. And then getBody is a method. And then we can call contains, and do the same stuff like we did here. So contains this one, click. Then we can click to close this. And then let's click on the second button. And the second button in our application is without escape close. So let's click on the second one, without. To close it, there is, I think there is okay. So yeah, there is okay button. We need to click on okay button. I'm copying this, and I'm clicking on okay button to close it. So let's run this test. Running the test one more time, and everything works successfully. So we switch to the iframe once, and interact with all elements within this iframe. All right guys, so let's quickly summarize what we did in this lesson. Cypress does not have a native support for the iframes. But if you install Cypress iframe plugin, you can enable this functionality. So first of all, you need to load for the frame to be loaded, based on ID or URL for this frame. And then you can either use method iframe to switch to the frame and locate elements inside of the iframe. Or you can use method enter to switch to the frame, and then within this iframe, interact with a bunch of elements within this iframe. All right, that's it guys, and I'll see you in the next lesson.