QA Practice Sandbox

The ShopKart Test Range

A real e-commerce app, built to be automated — and to break on command. Practice writing tests, hunting bugs, and choosing selectors that survive.

🎯

Mode A — Locator Playground

No setup. Right in your browser.

Type a CSS selector, watch it highlight on the live store, and get an instant robustness score. The fastest way to build the #1 automation skill: picking locators that don't break.

Open the Playground →

⚙️

Mode B — Write real tests

Playwright, on your machine, against this app.

Point your own test suite at this store, flip on a bug, and practice the full loop: reproduce → write a test that catches it → add a regression test. Grab the starter and you're writing tests in two minutes.

⬇ Download starter kit Open the store

Point your tests here

Using the starter, or your own project. The app lives under /shopkart.

1 · Set your base URL

// playwright.config.ts
use: {
  baseURL: 'https://resources.criodo.com',
}

2 · Write a test

await page.goto('/shopkart/login');
await page.locator('[data-test="username"]').fill('student');
await page.locator('[data-test="password"]').fill('crio123');
await page.locator('[data-test="login-button"]').click();
await expect(page).toHaveURL(/inventory/);

Credentials: username student · password crio123. Every element has a stable data-test attribute — inspect the app to find them.

Inject a bug, then catch it

Open the store and use the floating 🐞 Test Range panel, or add ?bugs=… to any URL to reproduce a scenario. Each bug is a challenge: reproduce it, write a test that fails on it, then a regression test that guards the fix.

broken-images Every product image fails to load (points at a 404). → assertion design

cart-total The order total silently drops the tax — it undercharges. → correctness / money bugs

lastname-swap Checkout's last-name field overwrites the first name. → the bug-report loop

slow-inventory The catalog loads ~3.5s late. → flakiness / web-first waits

addtocart-fail One product's “Add to cart” button silently does nothing. → negative / edge cases

Example scenario link: /shopkart/checkout?bugs=lastname-swap — bugs persist for your browser tab and are shareable via the URL.

🔌

API Lab

A real HTTP API to practice API testing (status codes, JSON, POST bodies) and network interception — mock what the page fetches, or force slow/failed calls to test loading and error states.

🧩

Components Gym

The tricky widgets that break naive automation — modals, tabs, tables, autocomplete, toasts, dynamic IDs, delayed renders, file upload — each with a focused practice task.

Part of the Crio QA & SDET track. Pair this with the E-Commerce Test Automation course.