Validation Lab

Tables

Intermediate

	Role	Status
Mira	Admin	Active
Alex	Engineer	Active
Noor	QA	Invited
Yuki	Manager	Suspended

Live widget · interact freely

Manual test goal

Sort a column ascending/descending and validate the first/last row update accordingly.

Expected result

Sorting Name asc puts 'Alex' first; toggling to desc puts 'Yuki' first.

Stable selectors

Sort by Name[data-testid="tbl-sort-name"]
First row[data-testid="tbl-row-0"]

Reference Playwright spec

tables.spec.ts

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

test('table sort cycles asc/desc', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/tables');

  await page.getByTestId('tbl-sort-name').click();
  await expect(page.getByTestId('tbl-row-0')).toContainText('Alex');

  await page.getByTestId('tbl-sort-name').click();
  await expect(page.getByTestId('tbl-row-0')).toContainText('Yuki');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idletables.spec.ts

https://lab.hakdogan.com/practice/tables

# console output will stream here