KAMC Lab
hello@kamc.io

KAMC Lab micro-app

Practice Test Lab

A framework-ready testbed with a demo login, dropdowns, tick boxes, radio buttons, free-text notes, scoring, saved progress, and stable selectors for Cypress, Playwright, or Cucumber automation.

Demo login Dropdowns Checkboxes Radio buttons Scoring data-testid hooks SPA deploy ready
Start practice View framework hooks

Lab projects

Repurposed project cards

Practice Test Lab

Active prototype for login-gated practice tests, form interactions, scoring, and automation-ready selectors.

Open

Cypress / Mocha Starter

Use this page as the first target for E2E checks, fixtures, selectors, and CI smoke coverage.

Review hooks

Cypress / Cucumber BDD

Map the login, test selection, answering, saving, and scoring journeys into Gherkin scenarios.

View journeys

API Mocks & Contracts

Inline demo data is shaped so it can later come from an API, JSON fixture, or contract-tested backend.

View contract

Accessibility with aXe

Semantic forms, labels, fieldsets, aria-live messages, skip links, and keyboard-friendly controls.

View gates

Security Readiness

Flags what is demo-only and identifies where Cognito, Supabase, Firebase, or a custom API should attach.

View next steps

Interactive area

Practice Lab

demo mode

Framework contract

Ready for test automation

The page uses stable IDs and data-testid attributes so it can be driven safely by Cypress, Playwright, or Cucumber step definitions without relying on fragile CSS selectors.

  • login-email, login-password, login-submit
  • test-selector, start-test-button, question-form
  • answer-QUESTIONID-VALUE, submit-test, score-summary

Future integration points

Auth, API, and question bank

Today the test data is inline. Later, replace the demo adapters with real services while leaving the user journey and selectors intact.

window.KAMC_LAB_CONFIG = {
  authMode: 'demo',
  apiBase: '',
  questionSource: 'inline',
  passMark: 70
};

window.KAMCPracticeLab.getState();
window.KAMCPracticeLab.loadTest('qa-foundations');
window.KAMCPracticeLab.reset();

Suggested smoke journeys

What the framework should cover first

Happy path

  • Open the Lab.
  • Log in with demo learner details.
  • Select a practice test.
  • Answer radio, checkbox, dropdown, and text questions.
  • Submit and verify score output.

Validation path

  • Submit login with missing details.
  • Try to submit a test with unanswered scored questions.
  • Reset and confirm state clears.
  • Save progress and restore progress.

Accessibility path

  • Tab through login, dashboard, and questions.
  • Verify visible focus states.
  • Run aXe checks against the main page and the active test workspace.
  • Confirm labels and aria-live messages are present.

Quality gates

Before graduating from Lab

  • Replace demo login with real auth.
  • Move question data to a fixture, API, or admin-managed store.
  • Add CI checks for E2E smoke, accessibility, and basic security headers.
  • Confirm no private learner data is stored in localStorage.

Next build step

Split into framework folders

Once this single file is proven, the likely structure is:

/src
  /app
    auth-adapter.js
    question-bank.js
    scoring.js
    storage.js
  /components
    login-form.js
    test-dashboard.js
    question-renderer.js
/tests
  /e2e
  /fixtures
  /features
index.html

Local demo data

Attempt history

This table uses localStorage for demo purposes only. It should be replaced by a proper user-results service later.

WhenTestScoreStatus
No attempts yet.