VALIDATION LAB•PAGINATION API

Tables

Pagination API

Step through a paged list, confirm the rendered URL changes between pages, and verify the metadata block shows the right `start-end of total`.

Beginner

Why this matters in QA

Pagination bugs are sneaky: prev on page 1 should be disabled, next on the last page should be disabled, and the URL must round-trip on reload. Off-by-one errors here ship with no visual indicator.

A page-numbered API. Inspect the URL — it changes between ?page=1&pageSize=10 and confirms the metadata block at the bottom.

Page 1 / 8GET /defects?page=1&pageSize=10
  • SKU-0001 Defect bundle #1
  • SKU-0002 Defect bundle #2
  • SKU-0003 Defect bundle #3
  • SKU-0004 Defect bundle #4
  • SKU-0005 Defect bundle #5
  • SKU-0006 Defect bundle #6
  • SKU-0007 Defect bundle #7
  • SKU-0008 Defect bundle #8
  • SKU-0009 Defect bundle #9
  • SKU-0010 Defect bundle #10

showing 1-10 of 78

Live widget · interact freely

Manual test checklist

  • 1Click Prev on page 1 — disabled, no navigation
  • 2Click Next 7 times — land on page 8 with rows 71-78
  • 3Click Next on page 8 — disabled
  • 4Confirm `pag-meta` reads exactly `showing X-Y of Z`
  • 5Confirm `pag-url` shows the `?page=` and `&pageSize=` separators in order

Expected result

Page 1 shows rows 1-10; Page 8 shows rows 71-78. The URL chip updates to `?page=N&pageSize=10` on every step.

Automation challenge

Assert the prev button is disabled at page 1 via `await expect(prev).toBeDisabled()`. Walk to the last page, assert the next button is disabled. Assert `pag-meta` matches the regex `/showing 71-78 of 78/`.

Stable selectors

  • Prev[data-testid="pag-prev"]
  • Next[data-testid="pag-next"]
  • Current page chip[data-testid="pag-current"]
  • URL chip[data-testid="pag-url"]
  • Metadata line[data-testid="pag-meta"]

Reference Playwright spec

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

test('pagination disables boundaries correctly', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/data-api/pagination');

  await expect(page.getByTestId('pag-prev')).toBeDisabled();

  for (let i = 0; i < 7; i++) {
    await page.getByTestId('pag-next').click();
  }
  await expect(page.getByTestId('pag-next')).toBeDisabled();
  await expect(page.getByTestId('pag-meta')).toHaveText(/showing 71-78 of 78/);
});