CODEWITHSUNDEEP
javascriptpuppeteergoogle-chrome-headless
Entretoize
Entretoize

Reputation: 2251

Fill a form through javascript (puppeteer)

I'm trying to fill this login form and submit it like that:

document.querySelector('#username').value="my@email";
document.querySelector('#username').dispatchEvent(new Event('change'));
document.querySelector('#password').value="mypassword";
document.querySelector('#password').dispatchEvent(new Event('change'));
document.querySelector('button[class~="btn-red"]').click();

But the website displays the message that the email and password are empty. I guess its waiting for a key press or something.

How can I simulate that?

Upvotes: 1

Views: 534

Answers (2)

NullDev
NullDev

Reputation: 7303

You can emit the input event instead of the change event:

document.querySelector('#username').value="my@email";
document.querySelector('#username').dispatchEvent(new Event('input'));
document.querySelector('#password').value="mypassword";
document.querySelector('#password').dispatchEvent(new Event('input'));
document.querySelector('button[class~="btn-red"]').click();

Upvotes: 1

Ram Sankhavaram
Ram Sankhavaram

Reputation: 1228

const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.boxtal.com/fr/fr/app/utilisateur/connexion', {
    waitUntil: 'networkidle2'
  });

  await page.waitFor('#username');

  await page.type('#username','my@email');;

  // await browser.close();
})();

If you are using puppeteer you can use the code above to type in an input field

Upvotes: 1

Related Questions