Fill a Login Form

The concept

A login form is the classic first end-to-end test. Users find fields by their labels (“Email”, “Password”), so your test should too. getByLabel('Password') finds the input associated with that <label>, whether through for/id, wrapping, or aria-labelledby.

The submit button is found by role and name, and the real check comes after: did the login work? Assert on something only a signed-in user sees, such as a welcome heading, a URL change or a “Sign out” button. Checking that the button was clicked proves nothing.

Keep test credentials out of your code where you can. In a real project, read them from environment variables.

The fragile version

await page.locator('input[type=text]').fill('ada');
await page.locator('input[type=password]').fill('secret');
await page.locator('form button').click();

Why it breaks: Attribute selectors break when a field becomes type=email, a second text input is added, or a “Show password” button appears inside the form. And there is no check that sign-in succeeded.

A robust Playwright version

await page.getByLabel('Username').fill('ada');
await page.getByLabel('Password').fill(process.env.TEST_PASSWORD);
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByRole('heading', { name: /welcome/i })).toBeVisible();

Fields are found the way users find them, and the final assertion proves the login actually worked.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Ending the test at the click with no assertion on the outcome.
• Using placeholder text when a real label exists.
• Hard-coding real credentials in the test file.

FAQ