Playwright Tutorial | Handle iFrame / Frame

• 00:00 Introduction and Overview
• 01:15 Identifying iFrames
• 04:20 Example with W3School
• 08:35 Frame HTML tag
• 10:20 Accessing Elements within iFrame - Example 1
• 17:30 Accessing Elements within iFrame using URL - Example 2
• 26:30 Using Frame Locator - Example 3
• 35:00 Playwright's Pick Locator Tool
• 41:30 Recap and Conclusion

Welcome back to my channel, Test Code Automate. This is my 21st video in the Playright with TypeScript series, where we'll be discussing how to handle iframes in Playright.

An iframe is used to embed another document within the current HTML document. A page may have additional frames attached using the iframe or frame tag. It's important to note that the frame tag was used in HTML 4 to define one window frame within a frameset HTML tag. However, this tag is not supported in HTML 5. Typically, you will see the iframe HTML tag in applications.

In this video, we'll learn how to identify whether a particular application uses iframes and how to handle them. For demonstration purposes, we'll use the W3 Schools website. You can find the link in the description.

We'll inspect the form on the W3 Schools website. By inspecting, you'll notice an iframe HTML tag within the HTML document. This tag contains another HTML document inside it, including the form with fields for the first name, last name, and a submit button..

Next, we explore the attributes associated with iframes, such as Name, ID, and other properties. We inspect different examples of iframes on various web pages to demonstrate their usage and the attributes they may possess.

Moving on, we dive into the technical aspect of handling elements within an iframe. We use Visual Studio Code (VS Code) and demonstrate the creation and execution of a script in TypeScript. We import the necessary modules from Playright and create three test blocks, each illustrating different methods of interacting with elements inside an iframe.

The first method involves using the page.frame method, which allows us to interact with an iframe by specifying its name or URL. We start by inspecting an input element inside an iframe on the W3 Schools website. We write a script in VS Code to fill the input field within the iframe. When running the script, Playright successfully identifies and interacts with the input element inside the iframe.

The second method involves using the frameLocator method. This method helps locate elements within an iframe based on CSS selectors, XPath, or other attributes. We demonstrate this by interacting with a search box on a different webpage. The script opens the page, locates the iframe using its URL, and performs actions within the iframe, such as clicking on elements and entering text.

We conclude by explaining how to use Playright's frameLocator for advanced element detection and performing actions. We illustrate the process step by step, including how to handle different scenarios where iframes are present on web pages.

By the end of this video, you'll have a comprehensive understanding of how to work with iframes in Playright using TypeScript. If you have any questions or comments, feel free to leave them below. And don't forget to like, share, and subscribe to the channel for more comprehensive tutorials on Playright and TypeScript.

Thank you for watching, and have a great day!