VALIDATION LAB•FILTER QUERY PARAMS

Requests

Filter Query Params

Compose a multi-axis filter (role + status + search) and confirm the query string reflects the active filters in stable order.

Intermediate

Why this matters in QA

Backend tickets often surface as 'works on staging, not prod' — the only difference is which params the client sends. Tests must lock the URL shape, not just the visible row count.

Each filter writes to the query string. Tests must assert both the URL and the rendered set — drift between them is a stale cache or a broken router-binding.

/api/users10 matches
  • Alex Carter · qa
  • Mira Torres · admin
  • Noor Idris · qa
  • Yuki Hara · user
  • Hugo Wallace · qa
  • Ivy Petrov · user
  • Sami Reyes · user
  • Gizem Akar · admin
  • Leo Bianchi · user
  • Ren Suzuki · qa

Live widget · interact freely

Manual test checklist

  • 1Set role=admin → URL contains `?role=admin`
  • 2Add status=Active → URL contains `&status=Active`
  • 3Add search='ren' → URL contains `&q=ren`
  • 4Clear search → `&q=` is removed (not an empty value left behind)
  • 5Confirm `filter-count` matches the visible row count

Expected result

Setting role=admin and status=Active produces the URL `/api/users?role=admin&status=Active`; clearing the search keeps the existing keys untouched.

Automation challenge

Compose all three filters, then assert `filter-url` reads exactly `/api/users?role=admin&status=Active&q=ren`. Order matters — encode it as a regex if your impl reshuffles keys.

Stable selectors

  • Role select[data-testid="filter-role"]
  • Status select[data-testid="filter-status"]
  • Search input[data-testid="filter-q"]
  • URL chip[data-testid="filter-url"]
  • Count chip[data-testid="filter-count"]

Reference Playwright spec

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

test('filter query string composes deterministically', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/data-api/filter-query');

  await page.getByTestId('filter-role').selectOption('admin');
  await page.getByTestId('filter-status').selectOption('Active');
  await page.getByTestId('filter-q').fill('mira');

  await expect(page.getByTestId('filter-url')).toHaveText(
    '/api/users?role=admin&status=Active&q=mira',
  );
});