capture-screenshots.js: captures the reusable screenshot set into assets/screenshots/.
capture-demo-video.js: records a reusable product-tour video into assets/videos/.

Screenshot Prerequisites

The script does not start any Qlockify services. Start them before running it:

frontend: http://localhost:5173
backend: http://localhost:8000
database/Redis/Celery as required by your normal local app setup

Install Playwright for the script:

cd scripts
npm install

If Playwright cannot find a browser, either install Chromium:

npx playwright install chromium

or point the script to your installed Chrome:

$env:QLOCKIFY_CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"

Video recording also requires Playwright's bundled ffmpeg:

npx playwright install ffmpeg

Capture Public And App Screenshots

From the showcase repo root:

node scripts/capture-screenshots.js

Or from the scripts directory:

npm run screenshots

By default, the script deletes old .png files from assets/screenshots/ first. Disable that with:

$env:QLOCKIFY_CLEAN_SCREENSHOTS="0"
node scripts/capture-screenshots.js

Capture Admin Screenshots

Admin screenshots are optional. When enabled, the script creates/updates a local superuser fixture and logs into Django admin.

$env:QLOCKIFY_CAPTURE_ADMIN="1"
$env:QLOCKIFY_ADMIN_USERNAME="09900000000"
$env:QLOCKIFY_ADMIN_PASSWORD="QlockifyLocalAdmin!2026"
node scripts/capture-screenshots.js

If demo creation is rate-limited, the script falls back to the latest active local demo environment through Django shell. For that fallback and admin fixture setup, it needs the backend repo path:

$env:QLOCKIFY_BACKEND_REPO="D:\Programing\Scripts\Qlockify\qlockify-backend"

Environment Variables

QLOCKIFY_FRONTEND_URL: frontend URL, default http://localhost:5173.
QLOCKIFY_BACKEND_URL: backend URL, default http://localhost:8000.
QLOCKIFY_BACKEND_REPO: local backend repo path, default ../qlockify-backend.
QLOCKIFY_DEMO_TOKEN_FILE: optional JSON file with access, refresh, workspace_id, and expires_at.
QLOCKIFY_CAPTURE_ADMIN: set 1 to capture Django admin screenshots.
QLOCKIFY_ADMIN_USERNAME: local admin login mobile.
QLOCKIFY_ADMIN_PASSWORD: local admin password.
QLOCKIFY_ADMIN_USER_ID: optional user id for the admin user-detail screenshot; defaults to the demo owner when available.
QLOCKIFY_CHROME_PATH or CHROME_EXECUTABLE: optional installed Chrome path.
QLOCKIFY_CLEAN_SCREENSHOTS: set 0 to keep existing PNG files before capture.

Capture Demo Video

The video recorder creates a deterministic local fixture before recording:

one dedicated superuser
three workspaces
one populated workspace with clients, projects, tags, members, rates, time entries, and report data

It resets only the dedicated video fixture user/workspaces.

From the showcase repo root:

node scripts/capture-demo-video.js

Or from the scripts directory:

npm run video

The output is:

assets/videos/qlockify-demo-flow.webm

Video-specific variables:

QLOCKIFY_VIDEO_OUTPUT: optional WebM output path.
QLOCKIFY_VIDEO_MOBILE: fixture login mobile, default 09900000001.
QLOCKIFY_VIDEO_PASSWORD: fixture login password, default QlockifyVideo!2026.
QLOCKIFY_VIDEO_CURSOR: set 0 to disable the visible cursor overlay.

The export section of the video needs the local Celery worker/report export pipeline to be running. If export notifications do not arrive, the recorder fails with a timeout instead of producing a misleading video.