iFrames | Bondar Academy

Lesson Summary

In this lesson, we explore the concept of iframes and their impact on automation, particularly for beginner engineers using Playwright . Understanding Iframes An iframe (inline frame) is an HTML element that allows you to embed another HTML document within the current document. This can complicate automation tasks, as elements within an iframe are not directly accessible from the parent document. Common Issues with Iframes When attempting to interact with a button inside an iframe, you may encounter a timeout error, indicating that the locator was not found. This often occurs because the automation tool is looking for the element in the parent document instead of within the iframe. How to Work with Iframes in Playwright To successfully interact with elements inside an iframe, follow these steps: Identify the iframe in the DOM by inspecting the elements. Use a unique locator related to the iframe, such as a dataCy attribute. Switch to the iframe using the frameLocator method: const frameLocator = page.frameLocator('iframe[data-cy="unique-attribute"]'); Once switched, you can interact with elements inside the iframe as you would normally: await frameLocator.getByRole('button', { name: 'OpenDialogWithEscapeClose' }).click(); In summary, always check for iframes when you cannot interact with elements as expected. Switch to the iframe using the appropriate locator and continue your automation tasks.