Drat&Drop and iFrames | Bondar Academy

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.