Drat&Drop and iFrames | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on automating iframes and drag-and-drop functionality using Playwright. Key Concepts Iframe: An embedded page within a current web page. To interact with elements inside an iframe, you must first switch to the iframe. Drag-and-Drop: A feature that allows users to move objects by dragging them from one location to another. Test Application The lesson utilizes a demo site with a photo manager that includes drag-and-drop functionality and iframes. Steps to Automate Iframe Interaction Navigate to the new website. Identify the iframe containing the desired elements. Create a frame locator using const frame = page.frameLocator('iframe_locator'); . Use the frame locator to find and interact with elements inside the iframe. Drag-and-Drop Automation To perform a drag-and-drop action: await frame.locator('source_locator').dragTo(frame.locator('destination_locator')); For more precise control, use mouse methods: await page.mouse.down(); await page.mouse.move(x, y); await page.mouse.up(); Assertions To validate the successful drop of elements, use locators to check that the expected items are present in the drop area: await expect(frame.locator('drop_area_locator')).toHaveText(['Item1', 'Item2']); In summary, always check for iframes when locators fail, switch to the iframe to interact with its elements, and utilize drag-and-drop methods for automation.
Video Transcript
In this lesson, we will talk about how to automate iframes and drag-and-drop functionality. So, iframe is a kind of embedded page inside of the current web page. And you cannot just locate the web element inside of the iframe to navigate into this web element. First, you need to switch to iframe and then locate the web element inside of the page. And I will show you how to do this in this lesson. And drag-and-drop is a functionality when you're simply moving object by dragging the object in one place and moving them to another place. And I will show you how to do that in this lesson as well. So, let's get into it. So, this is another test application that we're going to use for this class. It's Global's QA demo site drag-and-drop. So, here is the example. We have four images in this photo manager. And we can simply drag-and-drop those photo images here to the right. And in this lesson, we will automate this functionality. Also, this application has an iframes. And I will show you how to deal with the iframes in the playwright. So, going back to our framework. And since this is a new test application, I will create a new spec file just for this demo. Okay. So, I have set up a new test. And first thing, let's navigate to a new website. All right. So, now, going back to application. And let's say I want just to click on this second image, which is Hi, Tetris 2. I make a right-click, inspect. And I can see that this is LI item that has a text, has Tetris 2. So, let me try to create the locator for that and click on this and see what happens. Await page.locator. This is LI that has text. And text is Hi, Tetris 2. Okay. And I will perform a click. And let me run the test. So, test application is open successfully, but we see that it's still running the test. It's not able to actually perform the click. And it should fail within 30 seconds because this is a time out. All right. Test failed. And let's look here. So, it was trying to find this element, but was not able to. And browser closed because of the timeout. So, why did this happen? Make a right-click, inspect. And if I scroll up into the DOM, we have an iframe. So, this entire section, which is highlighted right now in the screen, located inside of the iframe. What is iframe? Iframe is a kind of embedded HTML document inside of the existing HTML document. So, it's a kind of a website inside of the website. And you can tell that by HTML code and body. So, every HTML website has only a single body. And every HTML webpage begins with just a single HTML. But we have a second HTML. So, this is kind of a page inside of the page. And Playwright is not able to find our web element because it is inside of the iframe. It's not visible. So, in order to get access to this area and find this HiTatras2 locator, first, we need to switch into this iframe. And then within this iframe, find the locator that we are looking for. So, going back to framework. And let's create a frame locator. I type const frame equals to page. And I call a method frame locator. Now, I need to provide a locator for our iframe. Going back, so what we can use is, for example, this attribute, which is kind of unique. So, we can use this attribute photo manager. And then within this attribute, find the iframe. So, going back, I type title photo manager space and then iframe. This will be a key to our iframe. And then in order to get access to the web element inside of the iframe, now we call frame.locator.li and then perform a click. So, this is how it works. Let me run this one more time. And now it works just fine. We can see the test pass successfully. So, right now we perform the click, but click didn't make anything. What we actually want to do, we want to perform a drag and drop for this web element. So, we want to take HiTatras and move it to the right. Okay, so let's do this. Right click, inspect. We need to find the locator for the area where we actually want to drop the element. And here we go. So, we have a unique identifier, which is IDTrash and we will use this. Going back. So, now instead of the click, I will use method called dragTo. And inside of this method, I need to provide a locator where I want to drop my element. And again, I type frame because we're working inside of the iframe. Locator and provide ID, which is Trash. Okay, and run this test one more time. Yeah, you can see it worked perfectly fine. We were able to move the HiTatras2 image. Drag and drop performed successfully. And let me show you a second example of more precise control if you need it. Controlling the mouse, performing drag and drop. More precise control. Let's say this time we want to drag and drop the second item, which is HiTatras4. And we can take the existing locator. So, I take this HiTatras2. And instead of HiTatras2, we do a 4. And the first step, we want to hover over the mouse above the element that we want to drag and drop. The next step, await page.mouse. And we need to call a down method in order to click the mouse above this element. The next step, we need to move a mouse into the direction where we want to drop our element. And I call frame.locatorTrash. And perform hover one more time. And then the last step, we need to release a mouse button. Await page.mouse.up. That's it. So, let's run this test. And we can see that two elements were dragged and dropped successfully to the right. So, the second approach worked as well. And the last step, let's make an assertion that both of those elements located inside of the drop location. So, let's go back and find out the elements, how it's structured. So, we have li. And we are looking for this h5 tag, right? So, each li represent the item inside of the area where it is located. And it has h5 tag. So, what we need to do is to find both h5 tags that represent a text. It will return us an array of the texts inside of this box. And we will assert that both of those texts exist inside of this box. So, going back, await, expect, and I provide the locator, frame.locator. So, first we find a trash, then child element li, and another child element h5. I want to make sure that it have text. And it should be two values, array with the two values. First value will be height address two. And the second value will be height address four. And running this test one more time. Drag and drop successful, and assertion pass successfully. All right, so let me quickly summarize what we did in this lesson. When you look for the locators on the web page, and if sometimes those locators do not work, check for the iframe on the web page. Sometimes it can be a reason why you cannot locate the web element. In order to interact with the iframe, you need to switch to this iframe first, providing a frame locator of this iframe. Then using this frame locator, you can find the locators within the iframe and work as usual. If you want to perform drag and drop on the web page, use a drag to method and provide the locator where you want to drop the element. If you want to perform more precise control over the drag and drop, you can use a mouse movements using methods hover, up and down to perform drag and drop. And for the assertion, we used a locator assertion and validated that both of the elements located in the desired location. All right, thank you guys and see you in the next lesson.