playwright - issues with login form, inputs and submit click

Question

Im trying to write the login function for this website:

and this is my code:

const { chromium, firefox, webkit } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 50  });
  const context = await browser.newContext({
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36'
  });
  const page = await context.newPage();
  await page.goto('url');
  await page.type('input[name="userName"]', 'some@account');
  await page.type('input[name="password"]', 'somepassword');
  await page.click('text=Sign In');
  await page.waitForTimeout(2000);
  await context.close();
})();

I put headless: false so I can see what's going on, but input values are not filling and sign in button is not clicked, any help?

Answer 1

You have three elements there with the 'input[name="userName"]' selector. I bet the one you are trying to type on is not the first one.
You could try improving your selector. For instance, with something like this '#signInFormPage input[name="userName"]'.