JX Online Testing Platform

JX Online Testing Platform is a full-stack web application for managing test projects, authoring structured test cases, and running browser-based execution workflows with real-time status updates.

It combines a React frontend with a Django backend, WebSocket-based live execution events, Celery background workers, and a containerized deployment setup built around Docker Compose and Nginx.

Why This Project

Modern QA workflows often split test management, execution visibility, and deployment into separate tools. This project brings them together in one platform so a team can:

• organize projects and test assets in one place
• define structured, repeatable test case steps
• execute browser-driven workflows asynchronously
• monitor progress in real time
• deploy the entire stack with a reproducible container setup

Features

• User authentication with JWT
• Project and member management
• Structured test case authoring
• Execution logs, reports, screenshots, and video artifacts
• Real-time execution updates over WebSocket
• Containerized deployment with PostgreSQL and Redis
• CI/CD workflows for validation, image build, and deployment

Tech Stack

• Frontend: React, React Router, Vite
• Backend: Django, Django REST Framework, Channels, Celery
• Data services: PostgreSQL, Redis
• Automation runtime: Playwright Python
• Deployment: Docker, Docker Compose, Nginx, GitHub Actions

Architecture

flowchart LR
    U["User"] --> N["Nginx"]
    N --> F["React Frontend"]
    N --> B["Django + DRF + Channels"]
    B --> P["PostgreSQL"]
    B --> R["Redis"]
    B --> W["Celery Worker"]
    W --> A["Playwright Execution Runtime"]
    B -. "WebSocket events" .-> F
    W -. "logs / reports / media metadata" .-> B

Loading

Core Workflow

flowchart TD
    A["Create Project"] --> B["Author Test Case"]
    B --> C["Trigger Execution"]
    C --> D["Celery Dispatch"]
    D --> E["Playwright Browser Run"]
    E --> F["Store Logs / Results / Report"]
    F --> G["Broadcast Live Status"]
    G --> H["Review Outcome In UI"]

Loading

Repository Structure

.
├── backend/              # Django, REST API, Channels, Celery
├── frontend/             # React application
├── docker/               # Nginx config and runtime scripts
├── docs/                 # Deployment documentation
├── .github/workflows/    # CI/CD workflows
├── compose.yaml          # Local container stack
└── compose.prod.yaml     # Production image-based stack

Getting Started

Frontend

cd /Users/jasperxue/PycharmProjects/JX-Online-Testing-Platform/frontend
npm ci
npm run dev

Backend

cd /Users/jasperxue/PycharmProjects/JX-Online-Testing-Platform/backend
./.venv/bin/python manage.py migrate
./.venv/bin/python manage.py runserver

Background Worker

cd /Users/jasperxue/PycharmProjects/JX-Online-Testing-Platform/backend
./.venv/bin/celery -A config worker --loglevel=info

By default:

• Frontend runs on http://localhost:5173
• Backend runs on http://localhost:8000
• Vite proxies /api, /ws, and /media to the backend

Docker Deployment

cd /Users/jasperxue/PycharmProjects/JX-Online-Testing-Platform
cp .env.example .env
docker compose up --build -d

Key endpoints:

• Application: http://localhost
• Health check: http://localhost/api/health/

Quality Gates

Frontend:

cd /Users/jasperxue/PycharmProjects/JX-Online-Testing-Platform/frontend
npm run lint
npm run build

Backend:

cd /Users/jasperxue/PycharmProjects/JX-Online-Testing-Platform/backend
./.venv/bin/python manage.py test --settings=config.settings.test
./.venv/bin/python manage.py check --deploy --fail-level WARNING --settings=config.settings.prod

CI/CD

• Continuous integration: .github/workflows/ci.yml
• Build and deployment pipeline: .github/workflows/deploy.yml
• Production compose file: compose.prod.yaml

The pipeline validates frontend and backend changes, builds container images, publishes them to GHCR, and can deploy the stack to a remote server over SSH.

Use Cases

• QA teams who want lightweight in-house test management plus execution tracking
• full-stack learning projects that combine React, Django, WebSocket, Celery, and container deployment
• portfolios that need a realistic example of asynchronous job processing and browser automation

Documentation

• Frontend notes: frontend/README.md
• Backend notes: backend/README.md
• Deployment guide: docs/deployment.md