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
/shopkart/api/productsReturns { count, products }. Filter with ?category=Electronics or search with ?q=cable.
/shopkart/api/products/:id200 the product · 404 if the id (e.g. P01) doesn't exist.
/shopkart/api/loginBody { username, password }. 200 { token } · 401 wrong creds · 423 for locked_user.
/shopkart/api/checkoutBody { firstName, lastName, postalCode, items:[id] }. 201 { orderId, total } · 400 { errors } · 422 unknown item.
?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.