What would i use to switch to a frame in Playwright - playwright

Question

In selenium there is a method switchTo that can be used to switch to a frame.
Is there anything similar in Playwright?

Answer 1

Yes. The syntax is a bit different than Selenium but the idea is more or less the same. You can use frameLocator to drill down to the frame and interact with elements contained within. Think of it like switchTo().
For example, you have a <iframe> with a login form inside, and want to fill it:
const email = 'foo#bar.com'
await page.frameLocator('#sillyWidget iframe').locator('#username').click();
for (let i = 0; i < email.length; i += 1) {
await page.keyboard.press(email[i], { delay: 20 + Math.random() * 5 });
}
List all the frames on the page:
const frames = await page.childFrames();
for (const frame of frames) {
console.debug('Frame --> ' + frame.url())
}
Listen for new frames:
page.on('frameattached', frames => frames.forEach(frame => console.debug('Frame attached' + frame.url())));
Edit:
A Page already comprises the main Frame and all subframes, so the switchTo() analogy kind of breaks down in that regard. The frame already exists
inside the Page, so switching to it doesn't make sense.
In the case you want to perform many operations in a child frame, just grab a reference to it, and work with it like you would a Page (nearly all the same functions are available).
Also note that:
Playwright uses ChromeDevTools protocol to speak to the browser.
Selenium uses JSONW.
They are fundamentally different beasts, though some syntax is the same. CDP is orders of magnitude more powerful, and directly supported by chromium-based browsers by design.
const frame = page.frame('frame-login'); // reference to your frame
await frame.fill('#username-input', 'Phillip Masse'); // fill an input inside the frame
// [1]
await Promise.all([page.click('#btn'), page.waitForNavigation()]; // now do stuff on the page level
[1]: If memory serves, in selenium to accomplish this we'd need to driver.switch_to_default_content() here.

Answer 2

Context of Selenium driver vs Playwright page
Tl:dr - Driving the browser and everything inside it vs interacting with the browser and specific tabs (or “pages”) within it
Not exactly. Playwright takes a slightly different approach. Instead of just a driver which contains all the methods to drive the browser and anything within it, Playwright splits this into more specific pieces - browser, context, and page.
Browser is for the browser itself as a whole, which can contain many contexts and tabs.
BrowserContext for specific independent browsing sessions (for instance, a tab opened by another tab will be part of the same session or context).
Page for controlling a specific tab (or “page”) within the browser/context. Each separate tab will have its own Page instance to represent it.
The benefits of this include being able to share context between pages, working with multiple tabs simultaneously more easily, and other areas where the separation is useful. You’re not tied down to just using one driver instance for everything.
Specific Answer
For your question there’s an added piece, Frames, which you can access directly from a Page still, while also allowing you to interact with it separately/as its own entity or “page” in a way. The main page is really just its own top frame with page content, and each iframe is basically its own page with its own content.
The closest thing to switchTo here would be to just use .frame() to get the specific Frame and interact with it, whether by calling .frame each time or just storing, using, and passing around the frame itself. It has most of the main methods of Page you would use/need anyway, so in many cases can just be used in its place. So while not exactly like switchTo in making the page interact with the other frame (or tab) and having to switch back, because that was actually telling the driver to drive one vs the other, you can just access the Frame itself to interact with for those parts, and keep the page representing the full page.
Note that there is a difference between FrameLocator and Frame. The first solely provides a way to locate elements within an iframe, whereas the second is like another Page specific to that frame allowing you to interact with it similarly.