Catch the CSS bug that kills checkout — before revenue does.
Created and maintained by KhyFee.
LensQA is a portfolio-grade frontend quality platform: deterministic Playwright workers inspect visual, accessibility, performance, network, responsive, SEO, and runtime quality, while a cinematic Next.js dashboard manages teams, live runs, private artifacts, baseline governance, analytics, and integrations.
LensQA was developed privately before its initial public release. It is now open source so developers can use it freely, learn from it, report problems, and improve it together.
The project uses the MIT License. Contributions are welcome—see CONTRIBUTING.md and the public roadmap in GitHub Issues.
E-commerce teams lose money when a bad CSS merge hides the mobile checkout button. Shift-left visual + quality automation is table stakes for remote hiring in 2026. LensQA proves you can ship the product and the QA system around it.
| Path | Role |
|---|---|
apps/web | Next.js 16 dashboard + marketing + ingest API |
apps/demo-store | Deterministic Lumen Market fixture (LENSQA_REGRESSION=1 breaks checkout) |
packages/runner | Playwright 1.61 suite + lensqa CLI |
packages/sdk | Typed TypeScript API client |
packages/shared | Shared types, confidence score, flake score |
supabase | Schema, RLS, seed |
extension | MV3 one-click capture draft |
docs | Architecture notes |
cd lensqa
cp .env.example .env
npm install
npm run build -w @lensqa/shared
# Demo storefront
npm run dev:store
# Dashboard (demo data works without Supabase)
npm run dev
# Visual + quality suite
npm run test:visual
# Deliberate mobile checkout regression (should FAIL)
npm run demo:regressionOpen:
- Marketing: http://localhost:3000
- Dashboard: http://localhost:3000/dashboard
- Failed run demo: http://localhost:3000/runs/run_fail
- Diff review: http://localhost:3000/review/res_fail_cart_mobile
- Press
⌘K/Ctrl+Kfor the command palette
Browsers only run in the Playwright container / CI. The hosted dashboard never executes untrusted browser jobs.
- RLS on every tenant table (
supabase/migrations) - Private
artifactsstorage bucket - API tokens & webhook secrets stored as hashes
- HMAC signatures on run ingest (
x-lensqa-signature) - GitHub webhook signature verification
- AI triage off by default; never uploads private screenshots unless explicitly enabled
npx tsx packages/runner/src/cli.ts init
npx tsx packages/runner/src/cli.ts list
npx tsx packages/runner/src/cli.ts run
npx tsx packages/runner/src/cli.ts upload .lensqa/last-run.jsonConfig: lensqa.config.ts
docker build -t lensqa .
docker run --rm -it lensqaImage: mcr.microsoft.com/playwright:v1.61.0-noble (version-matched).
.github/workflows/visual-tests.yml— Playwright in official container, HTML report artifact.github/workflows/ci.yml— build/typecheck/shared tests
Manual regression demo: Actions → Visual Tests → regression=true
Anime.js is centralized under apps/web/lib/motion:
- Respects
prefers-reduced-motion - In-app Motion toggle
?motion=offfor deterministic dashboard screenshots- Transform/opacity only
- Open marketing page (hero + pipeline)
- Dashboard → failed run
fix/checkout-css - Swipe/blink the visual diff
- Press
A/R/Ifor review actions - Show analytics + settings token generation
- Optionally run
npm run demo:regressionand open Playwright HTML report
npx supabase start
npx supabase db reset
npm run db:typesWithout Supabase, the web app uses seeded demo data.
GET /api/health·GET /api/ready·GET /api/versionPOST /api/ingest/runs(Bearer + optional HMAC)POST /api/tokensGET /api/export/:runId?format=json|csv|junitGET /openapi
SDK: @lensqa/sdk
- Demo mode does not persist to Postgres until Supabase is configured
- Visual baselines must be generated once on your machine/CI (
npx playwright test --update-snapshots) - GitHub App / self-hosted runners / billing are scaffolded for portfolio depth — wire credentials to go live
- Motion MCP was unavailable; Anime.js MCP patterns power the motion layer
MIT © 2026 KhyFee