Tutorial 12 – Handle frames in Playwright
What you will Learn in this blog:
How to handle frames in PW
Code snippet
Handle frames in PW
A frame is simply an html page embedded within another page.
Launch https://paytm.com/ & click ‘Sign In’.
A separate window opens up and this is frame. Now how do we know that it is a frame?
When we ‘right click’ this window, we can see ‘View frame source’
We will not see ‘View frame source’ option if we click anywhere outside this window
So this was a basic understanding of frame.
Let us now launch
https://the-internet.herokuapp.com/iframe
Let us see how to automate a test that will write inside the text area of above frame.
Inspect the text area of this frame.
Notice below that it is represented by tag ‘iframe’ having the ‘id’ mentioned below
In playwright, we have ‘frameLocator’ method as shown below. Using this method, we can identify the above frame that we have inspected
So we can write as shown below. We are using the css selector to identify the frame
Next, this frame is inside a parent html page and we can locate this using the ‘html’ locator
Next, once we have located the frame, we have to click it before we start typing into it
Now, we can finally type something into the text area
So the entire code looks like below
Save and run the script.
Notice below that the desired text gets typed in the frame’s text area
This is how we can work with frames in playwright.
Note: In playwright, we do NOT have to switch to a frame (like in selenium).
Refer https://playwright.dev/docs/api/class-frame to learn more about frames
Code snippet
import {test,expect} from '@playwright/test'
test("frames", async ({ page }) => {
await page.goto('https://the-internet.herokuapp.com/iframe')
const frame1 = page.frameLocator('#mce_0_ifr').locator('html')
await frame1.click()
await frame1.type('Welcome to playwright')
await page.pause()
})
Thank you for reading!