HSNAKDValidation Labhakdogan.com

Mouse

Buttons

Beginner

primary=0 · secondary=0

Live widget · interact freely

Manual test goal

Click each button variant (primary / secondary / disabled) and verify the audit log records the right event.

Expected result

The disabled button refuses the click, while primary and secondary increment their respective counters.

Stable selectors

  • Primary button[data-testid="btn-primary"]
  • Secondary button[data-testid="btn-secondary"]
  • Disabled button[data-testid="btn-disabled"]
  • Counter[data-testid="btn-counter"]

Reference Playwright spec

buttons.spec.ts
ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { test, expect } from '@playwright/test';

test('button variants record clicks correctly', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/buttons');

  await page.getByTestId('btn-primary').click();
  await page.getByTestId('btn-primary').click();
  await page.getByTestId('btn-secondary').click();

  await expect(page.getByTestId('btn-counter')).toContainText('primary=2');
  await expect(page.getByTestId('btn-counter')).toContainText('secondary=1');

  // Disabled buttons should never receive clicks
  await expect(page.getByTestId('btn-disabled')).toBeDisabled();
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idlebuttons.spec.ts
https://lab.hakdogan.com/practice/buttons
# console output will stream here