How to fill a form inside an iframe with puppeteer

Admin 1
Viewed 308

Well, I already researched and found a similar question in the stack overflow but I didn't understand it and therefore I did it wrong and it didn't work, I have the following script:

const puppeteer = require('puppeteer');  
const fs = require('fs').promises;                                                                                                              
(async () => {
 console.log("Iniciado!")                        
 const browser = await 
 puppeteer.launch({        
  executablePath: '/usr/bin/chromium',            
  headlesss:false,                                
 });                                             
 const page = await 
 browser.newPage();           
 await page.setViewport({ width: 1920, height: 1080 });                                          await  
 page.setRequestInterceptiontrue);
 page.on('request', (req) => {                   
  if(req.resourceType() === 'image' || req.resourceType() === 'stylesheet' || req.resourceType() === 'font'){
   req.abort();                                   
  }                                               
  else {                                           
   req.continue();                               
  }                                              
 });
 await page.goto('https://www.nike.com.br/chuteira-nike-premier-2-sala-unissex-153-169-171-309321', { waitUntil: 'load',timeout:0});             
 await page.waitForXPath('//label[@for="tamanho__idM40F395"]',{visibility:true, timeout:0});    
 const tamanho = await page.$x('//label[@for="tamanho__idM40F395"]')                             
 await tamanho[0].click('//label[@for="tamanho__idM40F395"]');
 await page.waitForSelector('button#anchor-acessar-unite-oauth2')
 await page.click('button#anchor-acessar-unite-oauth2')
 })();

Run this script, it will select the sneaker size and click on the login button, but how can I fill out the form if it is inside the iframe? I need to be able to complete the form.

Note:

I removed the image and css loading for the page to load faster.

puppeteer node.js
2 Answers

You just need to find the iframe element, get its frame and use it instead of the page:

const iframe = await page.waitForSelector('iframe#nike-unite-oauth2-iframe')
const frame = await iframe.contentFrame()
await frame.type('input[name="emailAddress"]', 'foo@bar.com')
await frame.type('input[name="password"]', '123')
await frame.click('input[value="ENTRAR"]')
user_26255600

Have you tried the puppeteer type api? from what i can see, your email and pw fields are input fields with ids. Try this await page.type('#88650c48-8f4f-48b7-9ce3-48087cacfd1c', 'my_email') same goes for password field.

user_112466100
Related