← Wszystkie wpisy

Poradniki

Toolbar QA od zera — 5 akcji, które zaoszczędzą 2h dziennie

15 maja 2026 · autor JustZix Team

QA wypełnia ten sam formularz rejestracji 30 razy dziennie. Programista mówi „zbuduję wam panel testowy" i nigdy nie buduje. JustZix ma „akcje" — przyciski jednoklikowe wstrzykiwane na pasku, z dowolnym JS-em pod spodem. Pięć akcji, które realnie oszczędzą Ci 2 godziny dziennie.

Czym są akcje w JustZix

Akcja to przycisk na pływającym pasku (toolbar) — 4 znaki etykiety, kolor i kod JavaScript uruchamiany przy kliku. Pasek pojawia się na każdej stronie pasującej do wzorca URL. Każdy QA ma swój własny zestaw, zsynchronizowany między urządzeniami, można udostępnić linkiem zespołowi.

Akcja 1 — FILL (zielony) — auto-uzupełnij dane testowe

Wypełnia każde rozpoznane pole formularza testową wartością. Dispatch event input + change żeby framework (React/Vue) zareagował:

const data = {
  email: 'test+' + Date.now() + '@example.com',
  phone: '600000000',
  firstName: 'Jan',
  lastName: 'Testowy',
  address: 'ul. Testowa 1',
  city: 'Warszawa',
  postalCode: '00-001',
  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 generuje unikalne adresy każdorazowo — testujesz signup wiele razy bez wpadania w „email already exists".

Akcja 2 — CART (pomarańczowy) — dodaj produkt do koszyka

Dla e-commerce QA — pomijasz browsing katalogu, od razu masz produkt w koszyku:

// Wersja deklaratywna — przez API sklepu (najszybciej)
fetch('/api/cart/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 12345, quantity: 1 })
}).then(() => location.reload());

// Wersja fallback — klik przycisku "Dodaj do koszyka"
// document.querySelector('[data-action="add-to-cart"]')?.click();

Dwa warianty bo niektóre sklepy oczekują pełnego JS flow z analytics, a API endpoint pomija analytics — wybór zależy od tego, co testujesz.

Akcja 3 — STATE (fioletowy) — ustaw widget w konkretny stan

Testujesz multi-step wizard. Krok 5 wymaga przejścia przez kroki 1-4. Przeskakujesz wprost do 5:

// Mocowanie state przez SessionStorage / LocalStorage
sessionStorage.setItem('wizardState', JSON.stringify({
  step: 5,
  completed: [1, 2, 3, 4],
  data: { /* mockowane dane z poprzednich kroków */ }
}));
location.reload();

// Albo bezpośrednio przez Redux DevTools (gdy strona używa Reduxa)
// window.__REDUX_DEVTOOLS_EXTENSION__?.dispatch({ type: 'SET_STEP', step: 5 });

Akcja 4 — LINK (niebieski) — skopiuj URL z auth tokenem

Pokazujesz programiście bug. Wklejasz mu link — ale on jest po wylogowaniu na innej sesji. Skopiuj URL z aktywnym tokenem w query string:

// Pobierz token z cookie / localStorage (zależnie gdzie aplikacja go trzyma)
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 — flash zielonym screenshotem
  document.body.style.outline = '4px solid #2D9D53';
  setTimeout(() => document.body.style.outline = '', 500);
});

Akcja 5 — TIME (szary) — fast-forward dat

Testujesz expirację subskrypcji za 30 dni. Albo refund po 7 dniach. 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] Data przesunięta o +${OFFSET_DAYS} dni`,
  'background:#888;color:#fff;padding:2px 6px;border-radius:3px');

Ostrzeżenie: ten override działa tylko po stronie frontu. Backend nadal zwróci „real now". Dla full-stack testów potrzeba ingerencji w API albo feature flag „simulated date".

Best practices przy budowaniu toolbara

• Krótkie etykiety (4 znaki max). FILL, CART, STATE, LINK, TIME — natychmiast czytelne, nie zajmują miejsca.
• Kolory per typ akcji: zielone = „dodaj/utwórz", czerwone = „usuń/reset", fioletowe = „przeskocz/mock", niebieskie = „kopiuj/eksportuj", szare = „debug/info".
• Akcje destruktywne za confirm — RESET które kasuje koszyk powinno mieć if (!confirm('Reset koszyka?')) return; na początku.
• Toolbar tylko per środowisko — wzorzec URL *staging* albo *localhost*, NIGDY *. QA toolbar na produkcji = niebezpieczeństwo.
• Sync klucz do całego zespołu — jedna osoba pisze akcję, wszyscy QA dostają w 30 sekund.

Jak wpiąć w JustZix

1. Zainstaluj JustZix.
2. Katalog „QA toolbar". Wzorzec URL: https://*-staging.example.com/*.
3. Włącz „Panel akcji" w ustawieniach katalogu.
4. Dorzuć akcje 1-5 z tego artykułu — każda z osobnym kolorem i 4-znakową etykietą.
5. Wygeneruj share link i wyślij zespołowi — w 1 kliku zaimportują toolbar.

Zainstaluj JustZix za darmo i daj swojemu zespołowi QA narzędzia, których programista i tak nie zbuduje.