playwright-test: test that input is required

Question

I have an input for a login form that is required:

<input
  autoComplete="email"
  defaultValue={email}
  disabled={state === 'submitting'}
  id="email"
  name="email"
  placeholder={t('user-authentication:email-placeholder')}
  required // HERE!
  type="email"
/>

How can I test that the input is required with Playwright? My native browser warning in Chromium is: "Please fill in this field."

Is there a way to check / assert for this warning in Playwright? Or another way to test that the input is required?

I tried writing nothing in the input with .fill('') and then pressing enter with page.keyboard.press('Enter'), but those did not cause the warning to show up.

Try this. Add empty space in input field `fill(' ')`. Then press `Backspace` `page.keyboard.press('Backspace')`. — Muhammad Nouman Rafique, Nov 11 '22 at 23:10
What about pressing Enter directly, without using fill()? The pop up should appear — kali, Nov 12 '22 at 20:21

score 5 · Accepted Answer · answered Nov 12 '22 at 19:46

If the message is displayed by the browser and not something added to the DOM, you would struggle to test it directly in Playwright.

You could check the the required attribute is present, and trust that the browser is going to display the warning.

await page.locator('input#email[required]')

There's also a Constraint validation you could apply

If the element is required and the element's value is the empty string, then the element is suffering from valueMissing and the element will match the :invalid pseudo class.

await page.locator('input#email[required]:invalid')

I am agree with Layla. If the field is required, the browser should show the alert, you have to trust on the browser, if the browser is not working you will not be able to solve yourself, so I think it is a good validation. If it is not enough for you maybe you need to talk with developers to add some other kind of errors. — Jaky Ruby, Nov 13 '22 at 12:37

playwright-test: test that input is required

1 Answers1