Rayrun
← Back to videos

Working with Iframes in Playwright

Practice Test Automation: https://commitquality.com

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.

Related Videos

#16 - ARIA and how Playwright is making use of it to identify UI controls?
#16 - ARIA and how Playwright is making use of it to identify UI controls?
Element Handle VS Locator API | Playwright Tutorial - Part 47
Element Handle VS Locator API | Playwright Tutorial - Part 47
Playwright Version 1.14 | Playwright Tutorial - Part 45
Playwright Version 1.14 | Playwright Tutorial - Part 45
First Script - Auto Waits | Playwright - Part 3
First Script - Auto Waits | Playwright - Part 3
TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].