CODEWITHSUNDEEP
javascriptnode.jshttppuppeteerchromium
por cha
por cha

Reputation: 151

Puppeteer Error: Node is either not visible or not an HTMLElement

I want to click and type into the password input field of this website: https://undefeated.com.

Unfortunately, the following code works for entering a first name, last name, email, but when trying to access the password field I get the error:

(node:17236) UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement

This is the code if you want to try to reproduce the error:


const RandExp = require('randexp');
const puppeteer = require('puppeteer-extra')

const stuff = async (siteURL) => {
    let args;


  args = [
    '--no-sandbox',
    "--ignore-certificate-errors",
    "--proxy-server='direct://",
    "--proxy-bypass-list=*",
    "--disable-setuid-sandbox",
    '--disable-web-security'
  ]

    // # spawn browser
    browser = await puppeteer.launch({
        headless: false,
        args,
        ignoreHTTPSErrors: true,
        devtools: false,
        defaultViewport: null
    });

    page = await browser.newPage();
    (await browser.pages())[0].close();
    await page.setViewport({ width: 0, height: 0 })
    await page.setDefaultNavigationTimeout(0);

   page.goto("https://"+siteURL+'/account/register', { waitUntil: 'networkidle2' });

    const resp = await waitForNavigation(page);

    if (resp.status() == 200) {
        // # wait for a selector
        let isFirstName = await page.waitForSelector('#FirstName');
        if(isFirstName){
          var firstName = new RandExp('[A-Z]{1}[a-z]{2,10}').gen();
          await page.click('#FirstName', { visible: true });
          await page.type('#FirstName', firstName, { delay: 50 });
        }

        let isLastName = await page.waitForSelector('#LastName');
        if(isLastName){
          var lastName = new RandExp('[A-Z]{1}[a-z]{2,10}').gen();
          await page.click('#LastName', { visible: true });
          await page.type('#LastName', lastName, { delay: 50 });
        }

        let isEmail = await page.waitForSelector('#Email');
        if(isEmail){
          let email = new RandExp('[A-Z]{1}[a-z0-9]{10}@gmail[.]com').gen()
          console.log(email)
          await page.click('#Email', { visible: true });
          await page.type('#Email', email, { delay: 50 });
        }

        let isPassword = await page.waitForSelector('#CreatePassword');
        if(isPassword){
          var password = new RandExp('[A-Z]{1}[A-Za-z0-9]{6,13}[0-9]{1}').gen();
          console.log(password)
          await page.click('#CreatePassword', { visible: true })
          await page.type('#CreatePassword', password, { delay: 50 });
        }

        // let agree = await page.waitForSelector('#account-create-check', {timeout: 1000});
        // if(agree){
        //   await page.click('#account-create-check', { visible: true });
        // }


    }
  };

    const waitForNavigation = async (page)  => {
      const [resp] = await Promise.all([
          page.waitForNavigation({
              timeout: 0,
              waitUntil: ['networkidle2', 'load', 'domcontentloaded']
          })
      ]);

      return resp;
  }

stuff("undefeated.com");

Could someone explain what this error means why how I can get past it?

All help is appreciated :)

Upvotes: 3

Views: 2041

Answers (1)

Vaviloff
Vaviloff

Reputation: 16838

This doesn't seem right:

await page.setViewport({ width: 0, height: 0 })

Your viewport should mimic that of a real browser, so be sure to set it with some plausible values.

Upvotes: 3

Related Questions