HSNAKDValidation Labhakdogan.com

Selection

Multi Select

Intermediate

Skills

No skills picked yet.

Live widget · interact freely

Manual test goal

Select several skills, verify chips render in selection order, and assert removal via chip × button.

Expected result

Picking three skills produces three chips; removing the middle chip leaves two in their original order.

Stable selectors

  • Skill option Cypress[data-testid="ms-cypress"]
  • Skill option Playwright[data-testid="ms-playwright"]
  • Skill option K6[data-testid="ms-k6"]
  • Selected chip Playwright[data-testid="ms-chip-playwright"]
  • Remove chip Cypress[data-testid="ms-remove-cypress"]

Reference Playwright spec

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

test('multi-select chips behave correctly', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/multi-select');

  await page.getByTestId('ms-cypress').click();
  await page.getByTestId('ms-playwright').click();
  await page.getByTestId('ms-k6').click();

  await expect(page.locator('[data-testid^="ms-chip-"]')).toHaveCount(3);
  await page.getByTestId('ms-remove-cypress').click();
  await expect(page.locator('[data-testid^="ms-chip-"]')).toHaveCount(2);
});

Demo Simulator

Simulated Playwright run · no real browser is launched

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