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

Piggybacking off of @hardkoded, using the npx playwright codegen <replaceWithSomeURLHere> from Playwright does not always create the most flexible selectors. (This trait is important to understand when you have a dynamic page, such as a table with populating rows. The same selector won't work all the time because the table itself will be in different states depending on the user's specific sequence of actions.) Using this tool to create a user story will only generate selectors for that specific sequence of actions -- that specific state of the webpage. Therefore, it is better to ensure you are selecting unique selectors.

This step was the hardest part for me, but here's what helped. (Although, some you're probably doing already.)

• If you're not using codegen yet, write one single test using it to see if that works. Once it does, you can expand from there to make things more flexible. (Consider using a page object model when you do.)
• Instead of using the input[name="userName"] selector, make sure that this input has a unique id. Then you can do `input[id="userName"].
• Try running your page through an accessibility tester to help support making unique ids and names where needed, (see Axe-Playwright -- although it's not perfect yet). Part of accessibility is ensuring there are enough unique id's or aria id's for your elements. Implementing accessibility on your page may not only make it more usable for all, but also make your selectors more rigid in your tests too. You'll even see a difference when you run codegen again once you pass these tests. (There's also browser extensions to help with this too if you didn't want to evaluate accessibility programatically.) In fact, when I run npx codegen www.google.com to see what pops up for their input field, I get: await page.fill('[aria-label="Search"]', 'stackoverflow');. Notice how the selector they use is an aria-label, which is used for accessibility!
• Lastly, I believe there is a difference between page.type(selector, value) and page.fill(selector, value). I use page.fill(selector, value) to fill in my forms and this works well for me. Maybe try switching to that too to see if it helps.