Best UI Automation Testing Demo Websites

A curated list of the best demo websites for practicing UI automation testing with Playwright, Cypress, and Selenium.

When learning web UI testing, you always need good demo sites that mimic real-world scenarios. Over time, the community has built some excellent resources — here's the definitive list.

Why demo sites matter

Practicing on real applications is expensive and risky. Demo sites give you:

Predictable behavior — elements and workflows you can rely on
Safe failures — break things without consequence
Varied complexity — from basic forms to multi-step e-commerce flows

The best demo sites

E-commerce & shopping

Swag Labs (Sauce Demo)
URL: https://www.saucedemo.com/
The gold standard for beginners. Has login flows, shopping cart, and checkout. Multiple user states including a "problem user" that breaks UI elements — perfect for negative testing.

Luma Magento Store
URL: https://magento.softwaretestingboard.com/
A full Magento e-commerce store with categories, search, product pages, and checkout. Great for complex end-to-end scenarios.

Automation Test Store
URL: https://automationteststore.com/
Another e-commerce store with user registration, product search, and order management.

DemoBlaze
URL: https://www.demoblaze.com/
Clean e-commerce UI with JavaScript-heavy interactions. Good for testing dynamic content loading.

Forms & interactions

DemoQA
URL: https://demoqa.com/
An extensive collection of UI elements: forms, buttons, date pickers, file uploads, drag & drop, iframes. Covers almost every HTML interaction type you'll encounter.

SelectorHub Practice Page
URL: https://selectorshub.com/xpath-practice-page/
Specifically designed for practicing XPath and CSS selectors. Great for Selenium practitioners.

The Internet (Heroku)
URL: https://the-internet.herokuapp.com/
The classic. Broken images, dynamic content, file downloads, hovers, infinite scroll — every edge case you can think of.

Banking & financial apps

ParaBank
URL: https://parabank.parasoft.com/parabank/index.htm
Full banking application with accounts, transfers, and loan requests. Great for complex authenticated workflows.

XYZ Bank
URL: https://www.globalsqa.com/angularJs-protractor/BankingProject/#/login
AngularJS-based banking app. Tests your ability to handle SPA navigation and Angular-specific elements.

Practice-focused

LetCode
URL: https://letcode.in/test
Structured practice tests for specific element types — buttons, inputs, dropdowns, and more.

UI Test Automation Playground
URL: http://uitestingplayground.com/
Targets specific automation challenges: click timing, dynamic IDs, AJAX, scroll behavior.

Selenium Test Pages
URL: https://testpages.herokuapp.com/styled/index.html
Comprehensive test pages covering nearly every HTML element and web interaction pattern.

Automation Book Store
URL: https://automationbookstore.dev/
A focused book store with search and filter functionality — great for practicing element location strategies.

Which one should I start with?

Beginner     → Swag Labs + DemoQA
Intermediate → The Internet + ParaBank
Advanced     → Luma Magento (full E2E flows)
AI Testing   → Any of the above + use LLMs to generate test scripts

Playwright quick start example

TYPESCRIPT
1import { test, expect } from '@playwright/test';
2
3test('Swag Labs login flow', async ({ page }) => {
4  await page.goto('https://www.saucedemo.com/');
5  
6  await page.fill('#user-name', 'standard_user');
7  await page.fill('#password', 'secret_sauce');
8  await page.click('#login-button');
9  
10  await expect(page).toHaveURL(/inventory/);
11  await expect(page.locator('.title')).toHaveText('Products');
12});

What do you think?

Did I miss a good demo site? Drop a comment on LinkedIn or Twitter — I'll update the list!

Setting up a demo site test project from scratch

Once you've chosen a demo site, here's how to structure a proper test project against it rather than writing ad-hoc scripts.

Project structure

demo-site-practice/
├── playwright.config.ts
├── tests/
│   ├── auth/
│   │   ├── login.spec.ts
│   │   └── logout.spec.ts
│   ├── checkout/
│   │   ├── cart.spec.ts
│   │   └── payment.spec.ts
│   └── smoke.spec.ts
├── pages/
│   ├── LoginPage.ts
│   ├── InventoryPage.ts
│   └── CheckoutPage.ts
└── fixtures/
    └── test-data.json

Page Object Model for Swag Labs

TYPESCRIPT
1// pages/LoginPage.ts
2import { Page, Locator, expect } from '@playwright/test'
3
4export class LoginPage {
5  readonly usernameInput: Locator
6  readonly passwordInput: Locator
7  readonly loginButton: Locator
8  readonly errorMessage: Locator
9
10  constructor(private page: Page) {
11    this.usernameInput = page.locator('#user-name')
12    this.passwordInput = page.locator('#password')
13    this.loginButton   = page.locator('#login-button')
14    this.errorMessage  = page.locator('[data-test="error"]')
15  }
16
17  async navigate() {
18    await this.page.goto('https://www.saucedemo.com/')
19  }
20
21  async login(username: string, password: string) {
22    await this.usernameInput.fill(username)
23    await this.passwordInput.fill(password)
24    await this.loginButton.click()
25  }
26
27  async expectError(message: string) {
28    await expect(this.errorMessage).toContainText(message)
29  }
30}

Data-driven login tests

TYPESCRIPT
1// tests/auth/login.spec.ts
2import { test, expect } from '@playwright/test'
3import { LoginPage } from '../../pages/LoginPage'
4
5const loginCases = [
6  { user: 'standard_user',  pass: 'secret_sauce', expected: 'success' },
7  { user: 'locked_out_user',pass: 'secret_sauce', expected: 'error' },
8  { user: 'wrong_user',     pass: 'wrong_pass',   expected: 'error' },
9  { user: '',               pass: 'secret_sauce', expected: 'error' },
10]
11
12for (const { user, pass, expected } of loginCases) {
13  test(`login: ${user || '(empty)'} → ${expected}`, async ({ page }) => {
14    const loginPage = new LoginPage(page)
15    await loginPage.navigate()
16    await loginPage.login(user, pass)
17
18    if (expected === 'success') {
19      await expect(page).toHaveURL(/inventory/)
20    } else {
21      await loginPage.expectError('Epic sadface')
22    }
23  })
24}

Using demo sites for CI/CD practice

Demo sites are also ideal for practising Azure DevOps pipeline configuration without risking your production environment. Run your Swag Labs or DemoQA tests in a pipeline and you get the same CI/CD experience as running tests against a real staging environment.

YAML
1# azure-pipelines.yml — practice CI pipeline
2trigger: [main]
3pool:
4  vmImage: ubuntu-latest
5steps:
6  - task: NodeTool@0
7    inputs:
8      versionSpec: '20.x'
9  - script: npm ci
10  - script: npx playwright install --with-deps chromium
11  - script: npx playwright test
12    env:
13      BASE_URL: https://www.saucedemo.com
14  - task: PublishTestResults@2
15    inputs:
16      testResultsFormat: JUnit
17      testResultsFiles: playwright-results/results.xml
18    condition: always()

This gives you a working pipeline with real pass/fail feedback — a safe learning environment for both test automation and DevOps skills simultaneously.

Advanced scenarios by demo site

Once you're comfortable with happy-path tests, use these demo sites to practice specific advanced scenarios:

The Internet (Heroku) — https://the-internet.herokuapp.com/

/dynamic_loading — wait strategies and async content
/frames — iframe handling with frameLocator()
/file_upload and /file_download — file operations
/challenging_dom — locating elements in tables with no stable IDs
/basic_auth — HTTP authentication headers

DemoQA — https://demoqa.com/

/droppable — drag and drop with dragTo()
/date-picker — calendar widgets
/upload-download — file handling
/alerts — browser alert, confirm, prompt dialogs
/browser-windows — multiple tabs and windows

ParaBank — https://parabank.parasoft.com/

Full registration and login flow
Account management (transfer funds between accounts)
Loan application (multi-step form with validation)
Transaction history and search

These scenarios cover 90% of the UI automation challenges you'll encounter on real projects.