Locating web elements in iFrame in Playwright

Question

I am working on a test automation framework using Playwright with Java. I am trying to locate elements inside an iFrame but unsuccessfully. I have tried all techniques I have seen online, including from the official documentation here Playwright - FrameLocator

Here is how the page lookslike:

And below is my code to get the elements inside the iframe.

textbox_fullname = page.frameLocator("#hs-form-iframe-1").locator("//input[@name='full_name']");
textbox_email = page.frameLocator("#hs-form-iframe-1").locator("//input[@name='email']");
textbox_company = page.frameLocator("#hs-form-iframe-1").locator("//input[@name='company']");

When I run the code, I get below error when trying to fill the textboxes:

com.microsoft.playwright.TimeoutError: Error {
  message='Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for frameLocator("#hs-form-iframe-0").locator("xpath=//input[@name='full_name']")
============================================================
  name='TimeoutError
  stack='TimeoutError: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for frameLocator("#hs-form-iframe-0").locator("xpath=//input[@name='full_name']")
============================================================
    at ProgressController.run (/private/var/folders/73/5k8n8v652z74r4lbcfj6qx4r0000gn/T/playwright-java-5227362604092639653/package/lib/server/progress.js:88:26)
    at Frame.fill (/private/var/folders/73/5k8n8v652z74r4lbcfj6qx4r0000gn/T/playwright-java-5227362604092639653/package/lib/server/frames.js:1039:23)
    at FrameDispatcher.fill (/private/var/folders/73/5k8n8v652z74r4lbcfj6qx4r0000gn/T/playwright-java-5227362604092639653/package/lib/server/dispatchers/frameDispatcher.js:166:30)
    at DispatcherConnection.dispatch (/private/var/folders/73/5k8n8v652z74r4lbcfj6qx4r0000gn/T/playwright-java-5227362604092639653/package/lib/server/dispatchers/dispatcher.js:346:46)
}

What am I doing wrong? Thanks for your assistance.

Answer 1

You can do something like this

 textIframe = await page.waitForSelector('iframe') // here you are finding iframe (you can also use iframe id to get iframe)
 textframe = await textIframe.contentFrame(); // here you are getting all the content inside that frame
 await textframe?.locator("//input[@name='full_name']").fill(fullname)

textframe?.locator("//input[@name='email']").fill(email)

Note I noticed that you are missing the await keyword that may also be the issue.