Puppeteer - How do I fill out a form that is inside an iframe?

Question

I have to fill out the form inside the iframe, here is a sample page . I cannot access just using page.focus() and page.type() . I tried to get the iframe form using const formFrame = page.mainFrame().childFrames()[0] , which works, but I can't really interact with the iframe form.

Answer 1

I figured it out myself. Here is the code.

 console.log('waiting for iframe with form to be ready.'); await page.waitForSelector('iframe'); console.log('iframe is ready. Loading iframe content'); const elementHandle = await page.$( 'iframe[src="https://example.com"]', ); const frame = await elementHandle.contentFrame(); console.log('filling form in iframe'); await frame.type('#Name', 'Bob', { delay: 100 }); 

Answer 2

Instead of figuring out how to get inside the iFrame and typing, I would simplify the task by going directly to the IFrame URL.

https://warranty.goodmanmfg.com/registration/NewRegistration/NewRegistration.aspx?Sender=Goodman

Make your script directly go to the above URL and try to automate, it should work

Edit-1: Using Frames

Since a simple approach does not work for you, we do it with the frames themselves

Below is a simple script that should help you get started

 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({headless: false}); const page = await browser.newPage(); await page.goto('http://www.goodmanmfg.com/product-registration', {timeout: 80000}); var frames = await page.frames(); var myframe = frames.find( f => f.url().indexOf("NewRegistration") > 0); const serialNumber = await myframe.$("#MainContent_SerNumText"); await serialNumber.type("12345"); await page.screenshot({path: 'example.png'}); await browser.close(); })(); 

Exit

Answer 3

Although you figured it out, but I think I have a better solution. Hope it helps.

 async doFillForm() { return await this.page.evaluate(() => { let iframe = document.getElementById('frame_id_where_form_is _present'); let doc = iframe.contentDocument; doc.querySelector('#username').value='Bob'; doc.querySelector('#password').value='pass123'; }); }