CODEWITHSUNDEEP
node.jspuppeteer
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

Input text while running puppeteer

I'm trying to automate form filling in one site. but the problem is, that site has an captcha. So Is there any way that when the login page is showing, I can enter the captcha manually in the command prompt like Console.ReadLine(); from C#. Is there any similar function available in puppeteer?

Here is my code:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setViewport({ width: 1366, height: 768});
    await page.goto('https://www.irctc.co.in/nget/train-search');
    await page.click('#loginText');
    await page.type('#userId','xxxxxx');
    await page.type('#pwd','xxxxxx');
    await page.screenshot({path: 'varanjith.png'});
})();

Screenshot:

enter image description here

Upvotes: 3

Views: 3829

Answers (2)

hardkoded
hardkoded

Reputation: 21637

As @Estradiaz mentioned. You can use readline with some promise boilerplate:

(async () => {

  // Launches browser
  let browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.setViewport({ width: 1366, height: 768});
  await page.goto('https://www.irctc.co.in/nget/train-search');
  await page.click('#loginText');
  await page.type('#userId','xxxxxx');
  await page.type('#pwd','xxxxxx');

  const readline = require('readline');

  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });
  let fulfill;
  const answerPromise = new Promise(x => fulfill = x);
  rl.question('Enter the Captcha: ', (answer) => {
    fulfill(answer);
    rl.close();
  });
  const answer = await answerPromise;
  console.log(answer);
  await page.type('#nlpAnswer',answer);
  await page.waitFor(5000);
  await page.screenshot({path: 'varanjith.png'});
  browser.close();
})();

Upvotes: 1

Marcos Casagrande
Marcos Casagrande

Reputation: 40414

If you want to enter the captcha in the command line, you can use built-in readline module

const puppeteer = require('puppeteer');
const readline = require('readline');

async function readLine() {

    const rl = readline.createInterface({
      input: process.stdin,
      output: process.stdout
    });

    return new Promise(resolve => {

        rl.question('Enter captcha: ', (answer) => {
          rl.close();
          resolve(answer)
        });
    })
}

(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setViewport({ width: 1366, height: 768});
    await page.goto('https://www.irctc.co.in/nget/train-search');
    await page.click('#loginText');
    await page.type('#userId','xxxxxx');
    await page.type('#pwd','xxxxxx');

    const captcha = await readLine();

    await page.type('#nlpAnswer', captcha)

    await page.screenshot({path: 'varanjith.png'});
})();

Original Answer:

If you want to enter the captcha in the UI and once it's filled continue with the script you can use: page.waitForFunction

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setViewport({ width: 1366, height: 768});
    await page.goto('https://www.irctc.co.in/nget/train-search');
    await page.click('#loginText');
    await page.type('#userId','xxxxxx');
    await page.type('#pwd','xxxxxx');

    console.log('Waiting for captcha');
    await page.waitForFunction(() => {
        const captchaInput = document.getElementById('nlpAnswer');
        return captchaInput && 
           captchaInput.value && 
           captchaInput !== document.activeElement
    })
    console.log('Captcha filled');

    await page.screenshot({path: 'varanjith.png'});
})();

Breakdown:

  • The captcha input in that particular page is: 'nlpAnswer'

    const captchaInput = document.getElementById('nlpAnswer');
  • Wait until captchaInput is available, it has value & it's not focused anymore
return captchaInput && 
       captchaInput.value && 
       captchaInput !== document.activeElement

Upvotes: 1

Related Questions