How to login in Puppeteer?

Question

I'm new to JavaScript and Puppeteer. I tried the login code below, but it failed. In comparison, I added page2 and succeeded. How can I solve it?

const CREDS = require('./creds');

async function main() {
  const puppeteer = require('puppeteer');
  const browser = await puppeteer.launch({headless: false});

  const page = await browser.newPage();
  await page.setViewport({width: 1200, height: 720})
  await page.goto('https://www.daum.net');
  await page.waitForNavigation();
  await page.type('#id', CREDS.username);
  await page.type('#loginPw', CREDS.password);
  await page.click('#loginSubmit');

  const page2 = await browser.newPage();
  await page2.setViewport({width: 1200, height: 720})
  await page2.goto('https://google.com');
  await page2.type('#lst-ib', 'Headless Chrome');
}

main();

score 65 · Accepted Answer · edited May 27 '23 at 19:36

page.waitForNavigation(); waits for navigation after a click or any navigation action that triggers from the page. You should probably add the waitForNavigation() after the page.click().

await Promise.all([
  page.click('#loginSubmit'),
  page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

It will wait until both promises resolve.

So now your initial code would look like this:

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.setViewport({width: 1200, height: 720});
  await page.goto('https://www.daum.net', { waitUntil: 'networkidle0' }); // wait until page load
  await page.type('#id', CREDS.username);
  await page.type('#loginPw', CREDS.password);
  // click and wait for navigation
  await Promise.all([
    page.click('#loginSubmit'),
    page.waitForNavigation({ waitUntil: 'networkidle0' }),
  ]);
}

main();

Note: Answer aside, I cannot test this since I don't have a login for daum.net and I cannot see the actual error you are facing. If you can try the solution provided above, and share the results, it'd be much more helpful.

There was an error message "Assertion failed: No node found for selector: #id" and I fixed it, your code worked beautifully!! Wow, thank you so much. — Joonho Lee, Apr 28 '18 at 18:01
Why we need to add `{ waitUntil: 'networkidle0' }` I see only `page.waitForNavigation()`, it works perfectly. — ThangLe, Mar 27 '20 at 03:06

score 18 · Answer 2 · answered Mar 17 '20 at 21:53

18

page.waitForNavigation()

Logging in to a website using Puppeteer is generally as simple as using the following code:

await page.goto('https://www.example.com/login');

await page.type('#username', 'username');
await page.type('#password', 'password');

await page.click('#submit');

await page.waitForNavigation(); // <------------------------- Wait for Navigation

console.log('New Page URL:', page.url());

Note: Remember to use page.waitForNavigation() after clicking the submit button to wait for the home page to display before moving forward.

answered Mar 17 '20 at 21:53

Grant Miller

27,532
16
147
165

1

how can i do if the submit button does not have and id ? – German Feb 21 '21 at 19:03
Don't `waitForNavigation` and `click` promises [need to be grouped using `Promise.all`](https://stackoverflow.com/a/52212395/6243352) here? – ggorlen Jul 01 '21 at 21:14

score 6 · Answer 3 · edited May 27 '23 at 19:37

6

Here's another example without an id:

await page.type("input[type=text]", "username");

await page.type("input[type=password]", "password");

await page.click("button[type=submit]");

edited May 27 '23 at 19:37

Josh Correia

3,807
3
33
50

answered Mar 12 '22 at 11:14

Emmanuel Pallares

61
1
1

How to login in Puppeteer?

3 Answers3

page.waitForNavigation()

Linked

Related