Mouse

Double Click

Beginner

Single-click does nothing. Double-click the row label to edit.

Quality engineering @ scale

Live widget · interact freely

Manual test goal

Trigger a precise double click and assert the editing affordance opens, preventing single-click false positives.

Expected result

A single click does not activate edit mode; only a true dblclick swaps the row into an editable input.

Stable selectors

Row label[data-testid="dbl-label"]
Inline editor[data-testid="dbl-input"]
Save[data-testid="dbl-save"]

Reference Playwright spec

double-click.spec.ts

import { test, expect } from '@playwright/test';

test('double-click opens inline editor', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/double-click');

  await page.getByTestId('dbl-label').click();
  await expect(page.getByTestId('dbl-input')).toHaveCount(0);

  await page.getByTestId('dbl-label').dblclick();
  await page.getByTestId('dbl-input').fill('Renamed by QA');
  await page.getByTestId('dbl-save').click();

  await expect(page.getByTestId('dbl-label')).toHaveText('Renamed by QA');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idledouble-click.spec.ts

https://lab.hakdogan.com/practice/double-click

# console output will stream here