Unable to login with Puppeteer

Question

I am trying to login to Moz at https://moz.com/login with Puppeteer using the following code:

const puppeteer = require('puppeteer');

const creds = {
    email: "myemail",
    password: "mypassword"
};

(async () => {
  const browser = await puppeteer.launch({
    args: [
        '--disable-web-security',
      ],
      headless: false
    });
  const page = await browser.newPage();

    await page.goto("https://moz.com/login");
    await page.$eval("input[name=email]", (el, value) => el.value = value, creds.email);
    await page.$eval("input[name=password]", (el, value) => el.value = value, creds.password);
    await Promise.all([
        page.$eval("input[type=submit]", elem => elem.click()),
        page.waitForNavigation({ waitUntil: 'networkidle0' }),
    ]);

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

I know that the email and password I am passing are correct, because I can use them to login manually, but when I run the script above, I get an "Invalid email or password" error above the form.

There are two errors logged to the JS console in Chrome:

Failed to load resource: the server Failed to load resource: the server responded with a status of 404 () cs.moz.com/id?d_visid_ver=1.10.0&d_fieldgroup=A&mcorgid=2C702C1653CF9B460A490D4B%40AdobeOrg&mid=86471825972219878023490878783607186756&ts=1564059866100:1

and

Failed to load resource: the server responded with a status of 400 () svc/forge/forms/login:1

Any ideas as to what the issue could be?

Answer 1

This error occurred because you are setting email and password by executing a javascript function $eval instead of the type function.

Also, I would suggest using the click function instead of the $eval function. Read more about the difference between a "trusted" and "untrusted" input event

just replace these lines:

await page.$eval("input[name=email]", (el, value) => el.value = value, creds.email);
await page.$eval("input[name=password]", (el, value) => el.value = value, creds.password);

with these:

await page.type('input[name=email]', creds.email);
await page.type('input[name=password]', creds.password)

So your final script should be:

const puppeteer = require('puppeteer');

const creds = {
    email: "myemail",
    password: "mypassword"
};

(async () => {
  const browser = await puppeteer.launch({
    args: [
        '--disable-web-security',
    ],
    headless: false
  });

  const page = await browser.newPage();

  await page.goto("https://moz.com/login");
  await page.type('input[name=email]', creds.email);
  await page.type('input[name=password]', creds.password)
  await Promise.all([
    page.click('input[type=submit]'),
    page.waitForNavigation({ waitUntil: 'networkidle0' }),
  ]);

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