How to Click a button in an Iframe using puppeteer?

Question

I'm new to puppeteer so dont know much about it. This is my code so far and everything works.

But I want it to click the login button on the page after it has put the text in the fields, but I cannot figure out how to do it for the life of me. I've tried many different things and none work. Any help with this would be awesome.

just incase you need it https://server.nitrado.net/usa/rent-gameserver

(async () => {
  console.log('launch browser');
  const browser = await pup.launch({headless: false});

  console.log('new page');
  const page = await browser.newPage();

  console.log('goto');
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto('https://server.nitrado.net/usa/rent-gameserver', { waitUntil: "networkidle2", timeout: 60000 });
  await page.waitFor(5000);
  console.log('extract login iframe');
  var iframes = await page.frames();
  var loginFrame = iframes.find(f => f.url().indexOf("oauth.nitrado.net") > -1);
  await page.waitFor(5000);
  console.log('evaluate iframe');
  await loginFrame.evaluate(() => {
    document.getElementById('username').value = 'test';
    document.getElementById('password').value = '12345';
  });
  await page.waitFor(300000);

  console.log('done');
  await browser.close();
})()```

Answer 1

I tried a workaround entering the frame url, I'm not sure if this will help, but here goes the code (main.js):

    const pup = require('puppeteer');
    
    mainFunc = async function () {
      return new Promise(async (resolve, reject) => { //Wrap de promise
        var browser;
        try {
             //Wrap de tratamento de erros
            const browser = await pup.launch({ headless: false });
    
            const page = await browser.newPage();
            //SELECTORS:
            var userInputSel = '#username';
            var passInputSel = '#password';
            var loginBtnSel = '#auth_login_ws_header > form > button';
            var myUser = "myusername"; //PUT YOUR USERNAME HERE!!!
            var myPass = "MyPaSsWoRd123"; //PUT YOUR PASSWORD HERE!!!
    
            await page.goto('https://server.nitrado.net/usa/rent-gameserver', 
                            { waitUntil: "networkidle2", timeout: 60000 });
    
            await page.waitFor(5000);
            console.log('extract login iframe');
            var iframes = await page.frames();
            var loginFrame = iframes.find(f => f.url().indexOf("oauth.nitrado.net") > -1);
            console.log(loginFrame.url())
            await page.goto(loginFrame.url(), 
                            { waitUntil: "networkidle2", timeout: 60000 });
            await page.waitFor(5000);
            console.log('evaluate iframe');
            /*await loginFrame.evaluate(() => {
              document.getElementById('username').value = 'test';
              document.getElementById('password').value = '12345';
            });*/
            await page.waitForSelector(userInputSel);
            await page.type(userInputSel, myUser);
            await page.waitForSelector(passInputSel);
            await page.type(passInputSel, myPass);
            await page.waitForSelector(loginBtnSel);
            await page.click(loginBtnSel);
    
            await page.waitFor(300000);
            
            console.log('done');
            await browser.close();
    
          
        } catch (e) { 
          if(browser!=undefined){
            browser.close();//Close browser if error
          }
          return reject(e);
        }
      });//Wrap de promise
    }
    
    mainFunc();

This is a running version for you to test. Just type "node main". (of course you need puppeteer installed (npm i puppeteer))...

Answer 2

this is my code when running above

const pup = require('puppeteer');

(async () => {
  console.log('launch browser');
  const browser = await pup.launch({headless: false});

   //SELECTORS:
   var userInputSel = '#username';
   var passInputSel = '#password';
   var loginBtnSel = '#auth_login_ws_header > form > button';
   var myUser = "Nastygamenation"; //PUT YOUR USERNAME HERE!!!
   var myPass = "test"; //PUT YOUR PASSWORD HERE!!!

  console.log('new page');
  const page = await browser.newPage();

  console.log('goto');
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto('https://server.nitrado.net/usa/rent-gameserver', { waitUntil: "networkidle2", timeout: 60000 });
  await page.waitFor(5000);
  console.log('extract login iframe');
  var iframes = await page.frames();
  var loginFrame = iframes.find(f => f.url().indexOf("oauth.nitrado.net") > -1);
  await page.waitFor(5000);
  console.log('evaluate iframe');
  /*await loginFrame.evaluate(() => {
    document.getElementById('username').value = 'Nastygamenation';
    document.getElementById('password').value = 'test';
  });*/
  await page.waitFor(7000);
  console.log('Logged in > going to logs');
  await page.waitForSelector(userInputSel);
  await page.type(userInputSel, myUser);
  await page.waitForSelector(passInputSel);
  await page.type(passInputSel, myPass);
  await page.waitForSelector(loginBtnSel);
  await page.click(loginBtnSel);
  await page.waitFor(300000);
  console.log('done');
  await browser.close();
})()

with error

  throw err;
  ^

Error: Cannot find module 'C:\Users\logan\Desktop\GamerBot\test.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
    at Function.Module._load (internal/modules/cjs/loader.js:864:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}```