Unable to login with Puppeteer - node.js

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