How can I get puppeteer to explore the links on a page until it finds a login form?

Question

I'm writing a script which will dynamically find and fill in the login form of a given URL. It works (on a few sites) as long as the login form can be found on the first page of the given URL.

In cases where a login form cannot be found, I would like the script to explore each of the links on the page until it does find one. Checking each link and then going back to the initial URL. I would only need it to go one level deep, I think it's unlikely that a login form would be found deeper than that and I do not need this to work on 100% of URL's.

If you'd like to see the code at the moment:

const puppeteer = require('puppeteer');
const C = require('./constants');
var USERNAME_SELECTOR;
var PASSWORD_SELECTOR;
var CTA_SELECTOR;
const URLL = process.argv[2];
var usernameFieldWasFound = false;



async function startBrowser() {
  const browser = await puppeteer.launch({
  headless: false})
  const page = await browser.newPage();
  return {browser, page};
}



async function closeBrowser(browser) {
  return browser.close();
}



(async () => {
  await playTest(URLL);
  process.exit(1);
})();


async function playTest(url) {
  const {browser, page} = await startBrowser();
  page.setViewport({width: 1366, height: 768});
  await page.goto(url);

  await delay(5000);


  if (await page.$('#si_username') !== null) {
    USERNAME_SELECTOR = '#si_username';
    console.log ('Changed username field selector to #si_username')
    usernameFieldWasFound = true; }
 
  if (await page.$('[name="username"]') !== null) {
    USERNAME_SELECTOR = '[name="username"]' 
  console.log ('Changed username field selector to name=username with quotes')
  usernameFieldWasFound = true; }

  if (await page.$('#username') !== null) {
    USERNAME_SELECTOR = '#username';
    console.log ('Changed username field selector to #username')
    usernameFieldWasFound = true; }

  if (await page.$('#email') !== null) {
    USERNAME_SELECTOR = '#email';
    console.log ('Changed username field selector to #email')
    usernameFieldWasFound = true; }


  if (usernameFieldWasFound == false) {
    console.log('No username field was found, exploring links...')

// this is where I need to add code to explore each link and then go back to original URL

  }  

 

  await page.waitForSelector(USERNAME_SELECTOR);

  await page.click(USERNAME_SELECTOR);
  await page.keyboard.type(C.username);





  if (await page.$('#next') !== null) {
    CTA_SELECTOR = '#next';
    console.log ('Changed button selector to #next')
    await page.click(CTA_SELECTOR);}
  else console.log('not found');






  if (await page.$('#si_password') !== null) {
    PASSWORD_SELECTOR = '#si_password';
    console.log ('Changed password field selector to #si_password')}
  else console.log('not found');

  if (await page.$('#password') !== null) {
    PASSWORD_SELECTOR = '#password';
    console.log ('Changed password field selector to #password')}
  else console.log('not found');

  if (await page.$('#pass') !== null) {
    PASSWORD_SELECTOR = '#pass';
    console.log ('Changed password field selector to #pass')}
  else console.log('not found');

  if (await page.$('[type="password"]') !== null) {
    PASSWORD_SELECTOR = '[type="password"]' 
  console.log ('Changed button selector to type=password with quotes')}
  else console.log('not found');




  await page.click(PASSWORD_SELECTOR);
  await page.keyboard.type(C.password);

  await delay(2000);


  if (await page.$([type="submit"]) !== null) {
    CTA_SELECTOR = [type="submit"];
    console.log ('Changed button selector type=submit without quotes')}
  else console.log('not found');

   if (await page.$('[type="submit"]') !== null) {
    CTA_SELECTOR = '[type="submit"]' 
  console.log ('Changed button selector to type=submit with quotes')}
  else console.log('not found');

  if (await page.$('#loginbutton') !== null) {
    CTA_SELECTOR = '#loginbutton' 
    console.log ('Changed button selector to #loginbutton')}
  else console.log('not found');

  if (await page.$('#submit-btn') !== null) {
    CTA_SELECTOR = '#submit-btn' 
    console.log ('Changed button selector to #submit-btn')}
  else console.log('not found');

 




  await page.click(CTA_SELECTOR);
  await page.waitForNavigation();
  await page.screenshot({path: 'screenshot.png'});

  closeBrowser
}

function delay(time) {
  return new Promise(function(resolve) { 
      setTimeout(resolve, time)
  });
} 

Answer 1

You can just use page $('a') to get all links, or just do it with basic javascript inside evaluate