Welcome to AuraDash, a modern System Under Test (SUT) meticulously designed to validate the capabilities of contemporary test automation frameworks.
This application is not a commercial product but a testing crucible. Each feature is deliberately chosen to probe the limits of automation tools and promote best practices in test script development. It is built on a modern stack featuring Angular 19, Tailwind CSS, and Lit to provide a rich and challenging surface for test automation.
- Challenging by Design: Features like Shadow DOM, interactive SVG charts, infinite scroll, and drag-and-drop are included specifically to test a framework's resilience against common automation pain points.
- Form Interaction: Includes complex form controls like checkboxes and radio buttons with backend persistence to test form handling and verification.
- Built for Testability: The most important feature is the mock backend's programmatic state control. A dedicated API endpoint (
/api/state/reset) allows tests to set the application's state to a known baseline, enabling idempotent and non-flaky test runs. - Deployment Simplicity: The entire application can be launched with a single command, eliminating environment-specific setup issues and providing a consistent testing target.
| Technology | Role in AuraDash | Primary Testing Challenge |
|---|---|---|
| Angular 19 | Core SPA Framework (with SSR) | Component lifecycle, SSR hydration, Signals reactivity, and route guards. |
| Tailwind CSS 3 | Utility-First Styling | Locator strategy robustness (semantic vs utility classes), responsive layout. |
| Lit 3 | Encapsulated Web Components | Shadow DOM traversal and event handling within isolated components. |
| Chart.js | Data Visualization | Interacting with and asserting on dynamic Canvas/SVG elements and tooltips. |
| Node.js/Express | Mock API & Data Source | Network mocking, loading states, error handling, and programmatic data seeding. |
| Playwright | E2E Testing Framework | Cross-browser automation, robust locator strategies, and state verification. |
| Docker | Infrastructure | Ensuring a consistent, one-command deployment environment. |
You can run AuraDash locally using Node.js or via Docker. Docker is the recommended method for the most consistent experience.
- Node.js v18 or later
- npm v9 or later
- Docker and Docker Compose (for containerized setup)
This is the simplest and most reliable way to run AuraDash.
- Clone the repository.
- Run the application from the root:
docker-compose up
- Open your browser to
http://localhost.
This is the preferred method for development. You can start both the mock server and the Angular application from the root directory using the unified dev script.
- Install dependencies in the root:
npm install
- Start both services:
npm run dev
- Open your browser to
http://localhost:4200.
You can run unit tests for both the Angular application and the mock backend from the root directory.
npm test# Frontend only
npm run test:app
# Backend only
npm run test:mockIf you are running in WSL and encounter issues with the Chrome binary during frontend tests, you can point to your Windows Chrome installation and use the headless mode:
- Set the
CHROME_BINenvironment variable:export CHROME_BIN="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"
- Run all tests in CI mode:
npm run test:ci
Functional tests are implemented using Playwright and are located in the tests/ directory.
npm run test:e2eTo access the dashboard, use the following credentials:
- Email:
test@example.com - Password:
password123
You can reset the application state to a specific profile at any time by sending a POST request to the mock server:
curl -X POST http://localhost:3001/api/state/reset -H "Content-Type: application/json" -d '{"profile": "default"}'Available profiles: default, empty_state, error_state.
Made with love using Gemini-CLI and Conductor