node.js - 在运行 puppeteer 时输入文本

Question

我正在尝试在一个站点中自动填写表单。但问题是，该网站有一个验证码。那么有什么方法可以在显示登录页面时，我可以在命令提示符中手动输入验证码，如 Console.ReadLine();来自 C#。 puppeteer中是否有类似的功能？

这是我的代码:

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'});
})();

截屏:

Answer 1

如果要在命令行输入验证码，可以使用内置的readline模块

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'});
})();

原答案:

如果您想在 UI 中输入验证码，并且一旦填满，请继续使用您可以使用的脚本: 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'});
})();

分解:

该特定页面中的验证码输入为:'nlpAnswer'

const captchaInput = document.getElementById('nlpAnswer');

等到captchaInput可用，有值(value)，不再专注

return captchaInput && 
       captchaInput.value && 
       captchaInput !== document.activeElement