← Tous les articles

Tutoriels

Construire une barre QA de zéro — 5 actions qui font gagner 2 heures par jour

15 mai 2026 · par JustZix Team

Un testeur QA remplit le même formulaire d'inscription 30 fois par jour. Le développeur dit « je te construis un panneau de test » et ne le fait jamais. JustZix a des « actions » — des boutons en un clic injectés dans une barre flottante, avec du JS arbitraire en dessous. Cinq actions qui vous feront vraiment gagner 2 heures par jour.

Qu'est-ce qu'une action dans JustZix

Une action est un bouton sur la barre flottante — label de 4 caractères, couleur, et JavaScript déclenché au clic. La barre apparaît sur chaque page correspondant à un motif d'URL. Chaque testeur a son propre jeu, synchronisé entre appareils, partageable avec l'équipe via un lien.

Action 1 — FILL (vert) — remplir des données de test

Remplit chaque champ de formulaire reconnu avec une valeur de test. Émet les événements input + change pour que les frameworks (React/Vue) réagissent :

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

Astuce : test+TIMESTAMP@example.com génère des adresses uniques à chaque fois — testez l'inscription encore et encore sans tomber sur « e-mail déjà existant ».

Action 2 — CART (orange) — ajouter un produit au panier

Pour le QA e-commerce — sautez la navigation du catalogue, mettez immédiatement un produit dans le panier :

// Version déclarative — via l'API de la boutique (le plus rapide)
fetch('/api/cart/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 12345, quantity: 1 })
}).then(() => location.reload());

// Fallback — cliquer le bouton "Ajouter au panier"
// document.querySelector('[data-action="add-to-cart"]')?.click();

Deux variantes parce que certaines boutiques attendent le flux JS complet avec analytics, tandis que l'endpoint API saute les analytics — choisissez selon ce que vous testez.

Action 3 — STATE (violet) — mettre un widget dans un état précis

Vous testez un assistant multi-étapes. L'étape 5 exige d'avoir passé 1-4. Sautez directement à 5 :

// Définir l'état via SessionStorage / LocalStorage
sessionStorage.setItem('wizardState', JSON.stringify({
  step: 5,
  completed: [1, 2, 3, 4],
  data: { /* données mockées des étapes précédentes */ }
}));
location.reload();

// Ou directement via Redux DevTools (quand l'appli utilise Redux)
// window.__REDUX_DEVTOOLS_EXTENSION__?.dispatch({ type: 'SET_STEP', step: 5 });

Action 4 — LINK (bleu) — copier l'URL avec token d'authentification

Vous montrez un bug au dev. Vous lui collez un lien — mais il est déconnecté, session différente. Copiez l'URL avec un token actif dans la query string :

// Lire le token depuis cookie / localStorage (selon où l'appli le stocke)
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(() => {
  // Retour visuel — flash vert
  document.body.style.outline = '4px solid #2D9D53';
  setTimeout(() => document.body.style.outline = '', 500);
});

Action 5 — TIME (gris) — avancer les dates

Vous testez l'expiration d'un abonnement dans 30 jours. Ou une fenêtre de remboursement de 7 jours. Surchargez 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 décalée de +${OFFSET_DAYS} jours`,
  'background:#888;color:#fff;padding:2px 6px;border-radius:3px');

Avertissement : cette surcharge n'affecte que le front-end. Le backend renvoie toujours le « vrai maintenant ». Pour des tests full-stack il faut une intervention côté API ou un feature flag « date simulée ».

Bonnes pratiques pour construire une barre

• Labels courts (4 caractères max). FILL, CART, STATE, LINK, TIME — lisibles instantanément, prennent peu de place.
• Couleurs par type d'action : vert = « ajouter/créer », rouge = « supprimer/réinitialiser », violet = « sauter/mocker », bleu = « copier/exporter », gris = « déboguer/info ».
• Actions destructrices derrière un confirm — un RESET qui vide un panier devrait commencer par if (!confirm('Réinitialiser le panier ?')) return;.
• Barre limitée à l'environnement — motif d'URL *staging* ou *localhost*, JAMAIS *. Barre QA en production = danger.
• Synchronisez la clé à toute l'équipe — une personne écrit l'action, chaque QA l'a en 30 secondes.

Comment brancher dans JustZix

1. Installez JustZix.
2. Dossier « Barre QA ». Motif d'URL : https://*-staging.example.com/*.
3. Activez le « Panneau d'actions » dans les réglages du dossier.
4. Ajoutez les actions 1-5 de cet article — chacune avec sa couleur et son label de 4 caractères.
5. Générez un lien de partage et envoyez-le à l'équipe — ils importent la barre en un clic.

Installez JustZix gratuitement et donnez à votre équipe QA les outils que l'équipe dev ne construira jamais.