← Back to library
Playwrightformsbeginnerv1.20+

Clear a field and retype

Clear an existing input value and type a replacement — the edit-form pattern.

1test('clears and updates the display name', async ({ page }) => {
2  await page.goto('/edit-profile');
3
4  const nameInput = page.getByLabel('Display name');
5
6  // Triple-click selects all, then fill replaces the selection
7  await nameInput.click({ clickCount: 3 });
8  await nameInput.fill('Jane Doe');
9  await expect(nameInput).toHaveValue('Jane Doe');
10
11  // Alternative: explicit clear then fill
12  // await nameInput.clear();
13  // await nameInput.fill('Jane Doe');
14});
#clear#fill#triple-click#retype