Mario's Test Automation Playground

A safe place to practise writing automated tests against a real website. Nothing here can break, nothing needs an account, and every page is built around exercises you can automate with Playwright, Selenium, Cypress, WebdriverIO, Postman or any other tool.

How it works

  1. Pick a practice area below. Start with the green ones if you're new to automation.
  2. Read the exercise. Every page lists its exercises with an Expected box telling you exactly what your test should check.
  3. Write the test yourself in your tool of choice.
  4. Stuck, or want to compare? Press Show me how for a commented TypeScript + Playwright solution.

Every interactive element has a stable data-testid, which Playwright's getByTestId() uses by default. Exercise descriptions repeat some on-screen text, so prefer test IDs, or scope text locators to the practice area, to avoid matching the instructions.

Set up Playwright in two minutes

Create a project, then point it at this site so tests can use short paths like page.goto('/login.html'):

npm init playwright@latest

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    baseURL: 'https://testautomation.marionobre.com',
  },
});

Run your tests with npx playwright test, or npx playwright test --ui to watch them step by step.

Practice areas

Beginner first steps, one concept at a time Intermediate waits, data and multi-step flows Advanced browser-level tricks Nightmare no ids, no help UI E2E API type of testing

Login & secure area

BeginnerUI

A classic login form with good and bad credentials, error messages, an account lockout, a protected page and logout. The best place to write your very first test.

What you'll practise

  • Filling inputs and clicking buttons
  • Asserting text, URLs and redirects
  • Data-driven tests over several inputs
  • Controlling time to test a 30-second lockout instantly

Scenarios to try

  1. Log in as practice / SuperSecret123 and land on the secure area
  2. Check the error for a wrong username, a wrong password and empty fields
  3. Fail three times and prove the account locks, then unlocks
  4. Open the secure page without logging in, then log out

Start practising →

Forms

BeginnerUI

A registration form with every common input type and client-side validation. After a valid submit, the page shows everything you entered as JSON, so you can check your test filled each field correctly.

What you'll practise

  • Text, select, multi-select, radio, checkbox, date, range and colour inputs
  • File uploads without touching the disk
  • Asserting validation messages and focus
  • Boundary values (age 17 vs 18)

Scenarios to try

  1. Submit the empty form and check every error
  2. Fill every field and compare the JSON result
  3. Find the edge of each validation rule
  4. Upload a file that is too large

Start practising →

Tables

IntermediateUI

A 47-row employee table with sorting, filtering, paging, inline editing and deleting. The data is the same on every visit, so your assertions stay stable.

What you'll practise

  • Reading many cells into arrays
  • Checking sort order with real data
  • Looping through pages
  • Handling a browser confirm() dialog

Scenarios to try

  1. Sort by salary and prove the order is correct
  2. Filter by department and check the total
  3. Collect every ID across all pages
  4. Edit a salary, then delete a row

Start practising →

Dynamic content & waits

IntermediateUI

Nine small puzzles where things happen later: random delays, spinners, disabled inputs, changing IDs, overlays and "load more". They are the main cause of flaky tests in real projects.

What you'll practise

  • Waiting for state instead of sleeping
  • Visible vs hidden vs removed elements
  • Locating elements without a stable id
  • Freezing the page clock to control timers

Scenarios to try

  1. Wait for an element that appears after 2–5 seconds
  2. Stop a progress bar at exactly 75%
  3. Click a button that is covered for 3 seconds
  4. Load all 20 items, batch by batch

Start practising →

Interactions

AdvancedUI

Everything that isn't a simple click: browser dialogs, a modal, drag and drop, hover menus, right and double clicks, keyboard shortcuts, an iframe, new tabs and a shadow DOM component.

What you'll practise

  • Accepting, dismissing and answering dialogs
  • Mouse actions and drag and drop
  • Working inside frames, tabs and popups
  • Reaching into a shadow root

Scenarios to try

  1. Answer the prompt() with your name
  2. Drag all three tools into the "Selected" box
  3. Send a message from inside the iframe
  4. Follow a link into a new tab and back

Start practising →

Mini shop

IntermediateE2E

A small online shop that ties everything together in one journey: search, cart, stock limits, promo codes and a checkout that ends with an order number. The cart survives page reloads.

What you'll practise

  • Writing a full user journey as one test
  • Checking money calculations
  • Business rules (stock, discounts, shipping)
  • Reusing steps with helper functions

Scenarios to try

  1. Search and filter the catalogue
  2. Fill a cart and verify subtotal, discount and total
  3. Try to buy more than the stock allows
  4. Complete a purchase with express shipping

Start practising →

REST API

IntermediateAPI

A real JSON API with login tokens, create/read/update/delete users, validation errors, any status code you ask for and deliberately slow responses. Send an X-Sandbox-Id header to get your own private data.

What you'll practise

  • API tests with Playwright's request
  • Bearer token authentication
  • Asserting status codes and JSON bodies
  • Timeouts and error handling

Scenarios to try

  1. Create, read, update and delete a user
  2. Check the 401, 409 and 422 error responses
  3. Page through and search the user list
  4. Make a request time out on purpose

Start practising →

Nightmare mode

NightmareUI

Ten levels built to be as hostile to automation as possible, and no solutions. Once you've finished everything else, see how far your tests get.

What you're up against

  • No ids or test ids, and class names that change on every load
  • Text that isn't in the DOM, look-alike letters and hidden characters
  • Buttons that hide under glass, run away or ignore you
  • A cookie wall, a returning popup, a chat bubble and a surprise alert

The rules

  1. Levels unlock one at a time
  2. Every level can be solved by automation
  3. No "Show me how": you're on your own
  4. Beat all ten for your escape time

Enter if you dare →