← Tutti gli articoli

Tutorial

Costruire una toolbar QA da zero — 5 azioni che fanno risparmiare 2 ore al giorno

15 maggio 2026 · di JustZix Team

Un tester QA compila lo stesso modulo di registrazione 30 volte al giorno. Lo sviluppatore dice «ti costruisco un pannello di test» e non lo fa mai. JustZix ha le «azioni» — pulsanti a un clic iniettati in una toolbar flottante, con JS arbitrario sotto. Cinque azioni che ti faranno davvero risparmiare 2 ore al giorno.

Cosa sono le azioni in JustZix

Un'azione è un pulsante sulla toolbar flottante — etichetta di 4 caratteri, colore e JavaScript che scatta al clic. La toolbar appare su ogni pagina che corrisponde a un pattern URL. Ogni tester ha il proprio set, sincronizzato tra i dispositivi, condivisibile col team via link.

Azione 1 — FILL (verde) — compilare dati di test

Compila ogni campo del modulo riconosciuto con un valore di test. Emette gli eventi input + change così i framework (React/Vue) reagiscono:

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 }));
});

Trucco: test+TIMESTAMP@example.com genera indirizzi unici ogni volta — testa la registrazione più e più volte senza incappare in «e-mail già esistente».

Azione 2 — CART (arancione) — aggiungere un prodotto al carrello

Per il QA e-commerce — salta la navigazione del catalogo, porta subito un prodotto nel carrello:

// Versione dichiarativa — tramite l'API dello store (la più veloce)
fetch('/api/cart/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 12345, quantity: 1 })
}).then(() => location.reload());

// Fallback — cliccare il pulsante "Aggiungi al carrello"
// document.querySelector('[data-action="add-to-cart"]')?.click();

Due varianti perché alcuni negozi si aspettano il flusso JS completo con analytics, mentre l'endpoint API salta gli analytics — scegli in base a cosa stai testando.

Azione 3 — STATE (viola) — mettere un widget in uno stato preciso

Stai testando una procedura guidata a più passi. Il passo 5 richiede di aver superato 1-4. Salta direttamente al 5:

// Impostare lo stato via SessionStorage / LocalStorage
sessionStorage.setItem('wizardState', JSON.stringify({
  step: 5,
  completed: [1, 2, 3, 4],
  data: { /* dati mockati dai passi precedenti */ }
}));
location.reload();

// Oppure direttamente via Redux DevTools (quando l'app usa Redux)
// window.__REDUX_DEVTOOLS_EXTENSION__?.dispatch({ type: 'SET_STEP', step: 5 });

Azione 4 — LINK (blu) — copiare l'URL con token di autenticazione

Mostri un bug allo sviluppatore. Gli incolli un link — ma lui è disconnesso, sessione diversa. Copia l'URL con un token attivo nella query string:

// Leggere il token da cookie / localStorage (a seconda di dove l'app lo salva)
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(() => {
  // Feedback visivo — lampo verde
  document.body.style.outline = '4px solid #2D9D53';
  setTimeout(() => document.body.style.outline = '', 500);
});

Azione 5 — TIME (grigio) — far avanzare le date

Stai testando la scadenza di un abbonamento tra 30 giorni. O una finestra di rimborso di 7 giorni. Sovrascrivi 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 spostata di +${OFFSET_DAYS} giorni`,
  'background:#888;color:#fff;padding:2px 6px;border-radius:3px');

Avvertenza: questo override riguarda solo il front-end. Il backend restituisce ancora il «vero adesso». Per test full-stack serve un intervento lato API o un feature flag «data simulata».

Buone pratiche nel costruire una toolbar

• Etichette corte (max 4 caratteri). FILL, CART, STATE, LINK, TIME — leggibili all'istante, occupano poco spazio.
• Colori per tipo di azione: verde = «aggiungi/crea», rosso = «elimina/resetta», viola = «salta/mocka», blu = «copia/esporta», grigio = «debug/info».
• Azioni distruttive dietro un confirm — un RESET che svuota un carrello dovrebbe iniziare con if (!confirm('Resettare il carrello?')) return;.
• Toolbar limitata all'ambiente — pattern URL *staging* o *localhost*, MAI *. Toolbar QA in produzione = pericolo.
• Sincronizza la chiave a tutto il team — una persona scrive l'azione, ogni QA la ha entro 30 secondi.

Come collegarlo a JustZix

1. Installa JustZix.
2. Cartella «Toolbar QA». Pattern URL: https://*-staging.example.com/*.
3. Abilita il «Pannello azioni» nelle impostazioni della cartella.
4. Aggiungi le azioni 1-5 di questo articolo — ognuna con il proprio colore ed etichetta di 4 caratteri.
5. Genera un link di condivisione e invialo al team — importano la toolbar con un clic.

Installa JustZix gratis e dai al tuo team QA gli strumenti che il team dev non costruirà mai.