🛒ShopKart Test Range

API Lab

A real HTTP API to practice two skills the storefront can't teach: API testing (hit endpoints directly) and network interception (mock what the page fetches). Every endpoint can be made slow or made to fail on demand.

Endpoints

GET/shopkart/api/products

Returns { count, products }. Filter with ?category=Electronics or search with ?q=cable.

GET/shopkart/api/products/:id

200 the product · 404 if the id (e.g. P01) doesn't exist.

POST/shopkart/api/login

Body { username, password }. 200 { token } · 401 wrong creds · 423 for locked_user.

POST/shopkart/api/checkout

Body { firstName, lastName, postalCode, items:[id] }. 201 { orderId, total } · 400 { errors } · 422 unknown item.

🐞 Fault injection (any endpoint)
?latency=2000 delays the response · ?fail=500 (also 503, 429) forces an error. Use these to practice loading spinners, retries, and error handling.
Playwright: test the API directly
test('products API returns the catalog', async ({ request }) => {
  const res = await request.get('/shopkart/api/products');
  expect(res.status()).toBe(200);
  const body = await res.json();
  expect(body.count).toBe(12);
});

test('unknown product is 404', async ({ request }) => {
  const res = await request.get('/shopkart/api/products/NOPE');
  expect(res.status()).toBe(404);
});
Playwright: intercept & mock what the page fetches
test('mocked products render', async ({ page }) => {
  await page.route('**/shopkart/api/products*', route =>
    route.fulfill({ json: { count: 1, products: [
      { id: 'X', name: 'Mocked Item', price: 1, category: 'Test' }
    ] } }));
  await page.goto('/shopkart/api-lab');
  await page.locator('[data-test="api-load-btn"]').click();
  await expect(page.locator('[data-test="api-product"]')).toHaveCount(1);
  await expect(page.locator('[data-test="api-product"]').first()).toContainText('Mocked Item');
});

Live fetch (intercept me)

This widget calls GET /shopkart/api/products in your browser. Point your test's page.route() at it to stub the response, or use the controls to force a slow/failed call and assert the loading and error states.