Add a Todo Item: Fill, Then Press Enter

The concept

Some inputs have no submit button. A todo app, a chat box or a search field often submits when you press Enter. In Playwright, that is two separate actions: fill() to set the text and press('Enter') to send the key. Each returns a Promise and each needs its own await.

Inputs like these often have no visible label, only placeholder text such as “Type a message”. getByPlaceholder() locates them by that text. A proper label is still better for accessibility, so prefer getByLabel or getByRole('textbox', { name }) when one exists.

After submitting, check the outcome the user would see: the new item in the list.

The fragile version

await page.locator('input').fill('Hello team\n');

Why it breaks: A bare input selector matches every input on the page and fails strict mode as soon as there is more than one. Relying on a newline inside fill() to submit is not the documented way to press a key; use press('Enter').

A robust Playwright version

await page.getByPlaceholder('Type a message').fill('Hello team');
await page.getByPlaceholder('Type a message').press('Enter');
await expect(page.getByRole('listitem').filter({ hasText: 'Hello team' }))
  .toBeVisible();

Clear, separate awaited steps, followed by an assertion on the visible result.

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

Common mistakes

• Forgetting await on press(), so the assertion runs before the submit.
• Chaining fill().press(); fill returns a Promise, not a locator.
• Asserting only that the input cleared rather than that the item appeared.

FAQ