HSNAKDValidation Labhakdogan.com

Selection

Select Dropdown

Beginner

Tool: Playwright

Live widget · interact freely

Manual test goal

Select a value from a native dropdown and assert the downstream summary updates.

Expected result

Choosing 'Playwright' updates the summary chip and emits a tracked event.

Stable selectors

  • Tool select[data-testid="select-tool"]
  • Summary chip[data-testid="select-summary"]

Reference Playwright spec

select.spec.ts
ts
1
2
3
4
5
6
7
8
import { test, expect } from '@playwright/test';

test('native select dropdown', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/select');

  await page.getByTestId('select-tool').selectOption('playwright');
  await expect(page.getByTestId('select-summary')).toHaveText('Tool: Playwright');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

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