← Alle Beiträge

Anleitungen

Eine QA-Toolbar von Grund auf bauen — 5 Aktionen, die 2 Stunden am Tag sparen

15 Mai 2026 · von JustZix Team

Ein QA-Tester füllt 30-mal am Tag dasselbe Registrierungsformular aus. Der Entwickler sagt „ich bau dir ein Testpanel" und tut es nie. JustZix hat „Aktionen" — Ein-Klick-Buttons, die in eine schwebende Toolbar injiziert werden, mit beliebigem JS darunter. Fünf Aktionen, die dir wirklich 2 Stunden täglich sparen.

Was sind Aktionen in JustZix

Eine Aktion ist ein Button auf der schwebenden Toolbar — 4-Zeichen-Label, Farbe und JavaScript, das beim Klick feuert. Die Toolbar erscheint auf jeder Seite, die einem URL-Muster entspricht. Jeder Tester hat sein eigenes Set, geräteübergreifend synchronisiert, per Link mit dem Team teilbar.

Aktion 1 — FILL (grün) — Testdaten automatisch ausfüllen

Füllt jedes erkannte Formularfeld mit einem Testwert. Löst input- + change-Events aus, damit Frameworks (React/Vue) reagieren:

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 erzeugt jedes Mal eindeutige Adressen — teste die Registrierung immer wieder, ohne auf „E-Mail existiert bereits" zu stoßen.

Aktion 2 — CART (orange) — Produkt in den Warenkorb legen

Für E-Commerce-QA — überspring das Durchstöbern des Katalogs, bring sofort ein Produkt in den Warenkorb:

// Deklarative Version — über die Store-API (am schnellsten)
fetch('/api/cart/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 12345, quantity: 1 })
}).then(() => location.reload());

// Fallback — den "In den Warenkorb"-Button klicken
// document.querySelector('[data-action="add-to-cart"]')?.click();

Zwei Varianten, weil manche Shops den vollen JS-Flow mit Analytics erwarten, während der API-Endpunkt Analytics überspringt — wähle nach dem, was du testest.

Aktion 3 — STATE (violett) — Widget in einen bestimmten Zustand setzen

Du testest einen mehrstufigen Wizard. Schritt 5 setzt das Durchlaufen von 1-4 voraus. Spring direkt zu 5:

// Zustand über SessionStorage / LocalStorage setzen
sessionStorage.setItem('wizardState', JSON.stringify({
  step: 5,
  completed: [1, 2, 3, 4],
  data: { /* gemockte Daten aus den vorherigen Schritten */ }
}));
location.reload();

// Oder direkt über Redux DevTools (wenn die App Redux nutzt)
// window.__REDUX_DEVTOOLS_EXTENSION__?.dispatch({ type: 'SET_STEP', step: 5 });

Aktion 4 — LINK (blau) — URL mit Auth-Token kopieren

Du zeigst dem Entwickler einen Bug. Du schickst ihm einen Link — aber er ist ausgeloggt, andere Session. Kopiere die URL mit aktivem Token im Query-String:

// Token aus Cookie / localStorage lesen (je nachdem, wo die App ihn speichert)
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(() => {
  // Visuelles Feedback — grünes Aufblitzen
  document.body.style.outline = '4px solid #2D9D53';
  setTimeout(() => document.body.style.outline = '', 500);
});

Aktion 5 — TIME (grau) — Datum vorspulen

Du testest den Ablauf eines Abos in 30 Tagen. Oder ein 7-tägiges Rückgabefenster. Überschreibe 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] Datum um +${OFFSET_DAYS} Tage verschoben`,
  'background:#888;color:#fff;padding:2px 6px;border-radius:3px');

Warnung: dieses Override betrifft nur das Frontend. Das Backend gibt weiterhin das „echte Jetzt" zurück. Für Full-Stack-Tests brauchst du eine API-seitige Intervention oder ein „simuliertes Datum"-Feature-Flag.

Best Practices beim Bau einer Toolbar

• Kurze Labels (max. 4 Zeichen). FILL, CART, STATE, LINK, TIME — sofort lesbar, brauchen wenig Platz.
• Farben pro Aktionstyp: grün = „hinzufügen/erstellen", rot = „löschen/zurücksetzen", violett = „überspringen/mocken", blau = „kopieren/exportieren", grau = „debuggen/info".
• Destruktive Aktionen hinter ein confirm — ein RESET, das einen Warenkorb leert, sollte mit if (!confirm('Warenkorb zurücksetzen?')) return; beginnen.
• Toolbar auf die Umgebung beschränkt — URL-Muster *staging* oder *localhost*, NIEMALS *. QA-Toolbar in der Produktion = Gefahr.
• Synchronisiere den Schlüssel im ganzen Team — eine Person schreibt die Aktion, jeder QA hat sie innerhalb von 30 Sekunden.

So bindest du es in JustZix ein

1. Installiere JustZix.
2. Ordner „QA-Toolbar". URL-Muster: https://*-staging.example.com/*.
3. Aktiviere „Aktionspanel" in den Ordnereinstellungen.
4. Füge die Aktionen 1-5 aus diesem Artikel hinzu — jede mit eigener Farbe und 4-Zeichen-Label.
5. Erzeuge einen Freigabe-Link und sende ihn ans Team — sie importieren die Toolbar mit einem Klick.

Installiere JustZix kostenlos und gib deinem QA-Team die Tools, die das Dev-Team nie bauen wird.