← All posts

Tutorials

Build a QA toolbar from scratch — 5 actions that save 2 hours a day

15 May 2026 · by JustZix Team

A QA tester fills the same registration form 30 times a day. The developer says "I'll build you a test panel" and never does. JustZix has "actions" — one-click buttons injected into a floating toolbar, with arbitrary JS underneath. Five actions that will genuinely save you 2 hours daily.

What are actions in JustZix

An action is a button on the floating toolbar — 4-character label, colour, and JavaScript fired on click. The toolbar appears on every page matching a URL pattern. Each tester has their own set, synced across devices, shareable with the team via a link.

Action 1 — FILL (green) — auto-fill test data

Fills every recognised form field with a test value. Dispatches input + change events so frameworks (React/Vue) react:

const data = {
  email: 'test+' + Date.now() + '@example.com',
  phone: '+15550100',
  firstName: 'John',
  lastName: 'Tester',
  address: '1 Test Street',
  city: 'New York',
  postalCode: '10001',
  password: 'TestPass123!',
};

Object.entries(data).forEach(([name, value]) => {
  const el = document.querySelector(
    `[name="${name}"], [id="${name}"], [data-test="${name}"]`
  );
  if (!el) return;
  el.value = value;
  el.dispatchEvent(new Event('input', { bubbles: true }));
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

Trick: test+TIMESTAMP@example.com generates unique addresses every time — test signup over and over without hitting "email already exists".

Action 2 — CART (orange) — add product to cart

For e-commerce QA — skip browsing the catalogue, get a product into the cart immediately:

// Declarative version — via store API (fastest)
fetch('/api/cart/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 12345, quantity: 1 })
}).then(() => location.reload());

// Fallback — click the "Add to cart" button
// document.querySelector('[data-action="add-to-cart"]')?.click();

Two flavours because some stores expect the full JS flow with analytics, while the API endpoint skips analytics — pick based on what you're testing.

Action 3 — STATE (purple) — set widget to a specific state

You're testing a multi-step wizard. Step 5 requires passing 1-4. Jump straight to 5:

// Set state via SessionStorage / LocalStorage
sessionStorage.setItem('wizardState', JSON.stringify({
  step: 5,
  completed: [1, 2, 3, 4],
  data: { /* mocked data from previous steps */ }
}));
location.reload();

// Or directly via Redux DevTools (when the app uses Redux)
// window.__REDUX_DEVTOOLS_EXTENSION__?.dispatch({ type: 'SET_STEP', step: 5 });

Action 4 — LINK (blue) — copy URL with auth token

You show the dev a bug. You paste them a link — but they're logged out, different session. Copy URL with an active token in the query string:

// Read token from cookie / localStorage (depends where app stores it)
const token = document.cookie.match(/auth_token=([^;]+)/)?.[1]
  || localStorage.getItem('auth_token');

const url = new URL(location.href);
if (token) url.searchParams.set('debug_token', token);
url.searchParams.set('source', 'qa-share');

navigator.clipboard.writeText(url.toString()).then(() => {
  // Visual feedback — green flash
  document.body.style.outline = '4px solid #2D9D53';
  setTimeout(() => document.body.style.outline = '', 500);
});

Action 5 — TIME (gray) — fast-forward dates

You're testing subscription expiration in 30 days. Or a 7-day refund window. Override Date.now():

const OFFSET_DAYS = 30;
const offsetMs = OFFSET_DAYS * 24 * 60 * 60 * 1000;

const origDateNow = Date.now;
Date.now = () => origDateNow() + offsetMs;

const OrigDate = window.Date;
window.Date = class extends OrigDate {
  constructor(...args) {
    super(args.length ? args[0] : Date.now());
  }
};
window.Date.now = Date.now;

console.log(`%c[QA] Date shifted by +${OFFSET_DAYS} days`,
  'background:#888;color:#fff;padding:2px 6px;border-radius:3px');

Warning: this override only affects the front-end. The backend still returns "real now". For full-stack tests you need API-side intervention or a "simulated date" feature flag.

Best practices when building a toolbar

• Short labels (4 chars max). FILL, CART, STATE, LINK, TIME — instantly readable, take little space.
• Colours per action type: green = "add/create", red = "delete/reset", purple = "skip/mock", blue = "copy/export", gray = "debug/info".
• Destructive actions behind confirm — RESET that wipes a cart should start with if (!confirm('Reset cart?')) return;.
• Toolbar scoped to environment — URL pattern *staging* or *localhost*, NEVER *. QA toolbar in production = danger.
• Sync the key to your whole team — one person writes the action, every QA gets it within 30 seconds.

How to plug into JustZix

1. Install JustZix.
2. Folder "QA toolbar". URL pattern: https://*-staging.example.com/*.
3. Enable "Action panel" in folder settings.
4. Add actions 1-5 from this article — each with its own colour and 4-character label.
5. Generate a share link and send to the team — they import the toolbar in one click.

Install JustZix for free and give your QA team the tools the dev team will never build.