Test Form Error Messages

The concept

Happy-path tests prove a feature works when everything goes right. Users, though, mistype passwords, leave fields blank and paste emails with spaces. Negative-path tests check that the application responds sensibly: it shows a clear error, it does not log anyone in, and it does not lose what they typed.

The pattern is the same as a normal form test, with deliberately wrong input. The important part is the assertion. Check the specific error text, and ideally that it is exposed accessibly, for example in an element with role="alert" or linked to the field through aria-describedby.

Also assert what should not happen: no redirect to the dashboard, no success message.

The fragile version

await page.getByLabel('Password').fill('wrong');
await page.getByRole('button', { name: 'Sign in' }).click();
await page.waitForTimeout(2000);
expect(await page.locator('.error').isVisible()).toBe(true);

Why it breaks: The fixed sleep is slow and still flaky, isVisible() checks once with no retry, and .error might match an unrelated element.

A robust Playwright version

await page.getByLabel('Username').fill('ada');
await page.getByLabel('Password').fill('wrong-password');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByRole('alert')).toHaveText(/invalid username or password/i);
await expect(page).not.toHaveURL(/dashboard/);

The assertion retries, checks the actual message, and confirms the user was not let in.

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

Common mistakes

• Only testing the happy path.
• Asserting that some error exists without checking its text.
• Using waitForTimeout to wait for the message.

FAQ