How to use a selector finding an frame (iframe) using Playwright

Question

I have a trivial question that I can't find an answer to using Microsoft Playwright framework. According to documentation (https://playwright.dev/#version=v1.1.1&path=docs%2Fcore-concepts.md&q=pages-and-frames) you can fetch an iframe with the following code

const frame = page.frame('frame-login');

But how do I use an selector to find and interact an iframe? I need to use an css-selector to find my iframe since it does not have an id.

Any help appreciated

Answer 1

You can use elementHandle.contentFrame()

await page.waitForSelector('.class-name')

const elementHandle = await page.$('.class-name')
const frame = await elementHandle.contentFrame()

From that moment you can interact with the content of the <iframe> like: await frame.<method_name>.

Answer 2

You can get the ElementHandle calling $ and then call the contentFrame function:

const handle = await page.$('.frame');
const contentFrame = await handle.contentFrame();