Working with Iframes in Playwright

• 00:00 Interacting with iframes
• 03:00 Creating frame locator
• 06:01 Filling in input field
• 08:11 Scoping frame locator

In this video, Jared from Commit Quality demonstrates how to work with iframes in Playwright, a testing tool. He starts by showing a practice page on commitquality.com that contains an iframe with the Commit Quality products page. Jared explains that the goal is to interact with the iframe and search for the word "subscribe" within it.

He starts by navigating to the page using await page.goto('commitquality.com/practice/iframe'). Then, he creates a frame locator using the page.frameLocator function. He notes that frame locators are strict, meaning they will throw an error if multiple elements match the given selector. Since there is only one iframe on the page, he creates a frame locator and assigns it to a constant called frameLocator.

Jared inspects the iframe on the page and finds a data test ID attribute called data-test-id="iframe". He adds this attribute to the iframe element on the page, allowing him to locate the iframe using frameLocator.get().

Next, he locates an input field within the iframe using its placeholder attribute and fills it with the text "subscribe" using fill().

Finally, Jared demonstrates that the frame locator is scoped to the iframe by clicking the "add product" button within the iframe. He mentions that if there were multiple iframes on the page, he would need to make sure to scope the frame locator to the correct one.

Jared concludes the video by encouraging viewers to ask questions or leave comments, and thanking them for watching. He also mentions that he has enabled "super thanks" on his videos to support his tutorials and website.