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

user_12412595 · Answer

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 </code> like: <code>await frame.<method_name></code>.</p>

user_2373249 · Answer

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

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