UI Mock Tests

Fast and stable isolated UI tests based on HTTP mocks.

This repository is a demo project for an article about isolated UI testing. It shows how to write fast, deterministic, and stable UI tests that run against a real browser and real HTTP — without flaky backends, test environments, or complex setups.

---

🧠 What is this project?

This project demonstrates a testing approach that I call isolated UI tests.

The idea is simple:

• UI tests run against a real browser
• the frontend makes real HTTP requests
• the backend is fully replaced with a controllable HTTP mock
• each UI scenario is executed in a fully deterministic environment
• tests validate UI behavior and contracts, not infrastructure

In this example:

• frontend — a simple Todo application (HTML + vanilla JS)
• mock — an HTTP backend mock
• UI tests control backend behavior dynamically via mock rules

There is no real backend in this project by design.

---

❓ What are isolated UI tests?

UI tests are tests that:

• operate on the UI level using a real browser
• do not depend on real backend services
• replace backend dependencies with HTTP mocks
• verify only the responsibility of the frontend
• are deterministic, fast, and stable

Such tests:

• are a perfect fit for left-shift testing
• scale well as the UI grows
• integrate naturally into CI/CD
• execute in seconds, not minutes

---

⚡ Why does this matter?

• Tests run very fast (hundreds of milliseconds)
• They are stable and deterministic
• They can be executed on every commit
• They are simpler than they look

This approach does not replace integration tests, but it allows you to:

• move most business logic verification into isolation
• keep integration tests minimal (happy-path only)

---

🛠 Technologies

• Python 3.12
• Playwright
• FastAPI
• pytest
• HTTP mocks
• Docker / Docker Compose

The example is written in Python, but the approach itself is language-agnostic
and can be applied to Java, Go, JS/TS, and other ecosystems.

---

📂 Project structure

.
├── frontend/                 # static frontend (HTML + JS)
├── tests/
│   ├── elements/             # Page Factory elements
│   ├── pages/                # Page Objects
│   ├── schema/               # UI / backend contracts
│   ├── mock/                 # HTTP mock service
│   └── suites/               # UI test scenarios
├── docker-compose.yaml
├── frontend/Dockerfile
├── tests/Dockerfile
└── .github/workflows/test.yml

---

🚀 Run locally

1️⃣ Install test dependencies

pip install -r tests/requirements.txt
playwright install --with-deps

2️⃣ Start services

docker compose up -d --build

This will start:

• the frontend on http://localhost:8080
• the mock backend on http://localhost:8000

3️⃣ Run tests

pytest

4️⃣ Stop services

docker compose down -v

---

🏗 Frontend

Empty state

State with tasks