← Todos los artículos

Tutoriales

Construir una toolbar QA desde cero — 5 acciones que ahorran 2 horas al día

15 mayo 2026 · por JustZix Team

Un tester QA rellena el mismo formulario de registro 30 veces al día. El desarrollador dice «te construyo un panel de pruebas» y nunca lo hace. JustZix tiene las «acciones» — botones de un clic inyectados en una toolbar flotante, con JS arbitrario por debajo. Cinco acciones que de verdad te ahorrarán 2 horas al día.

Qué son las acciones en JustZix

Una acción es un botón en la toolbar flotante — etiqueta de 4 caracteres, color y JavaScript que se dispara al clic. La toolbar aparece en cada página que coincide con un patrón de URL. Cada tester tiene su propio conjunto, sincronizado entre los dispositivos, compartible con el equipo vía enlace.

Acción 1 — FILL (verde) — rellenar datos de prueba

Rellena cada campo del formulario reconocido con un valor de prueba. Emite los eventos input + change para que los frameworks (React/Vue) reaccionen:

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

Truco: test+TIMESTAMP@example.com genera direcciones únicas cada vez — prueba el registro una y otra vez sin toparte con «el correo ya existe».

Acción 2 — CART (naranja) — añadir un producto al carrito

Para el QA de e-commerce — sáltate la navegación del catálogo, lleva un producto directo al carrito:

// Versión declarativa — mediante la API de la tienda (la más rápida)
fetch('/api/cart/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 12345, quantity: 1 })
}).then(() => location.reload());

// Fallback — pulsar el botón "Añadir al carrito"
// document.querySelector('[data-action="add-to-cart"]')?.click();

Dos variantes porque algunas tiendas esperan el flujo JS completo con analytics, mientras que el endpoint API se salta los analytics — elige según lo que estés probando.

Acción 3 — STATE (morado) — poner un widget en un estado preciso

Estás probando un asistente de varios pasos. El paso 5 requiere haber superado del 1 al 4. Salta directamente al 5:

// Establecer el estado vía SessionStorage / LocalStorage
sessionStorage.setItem('wizardState', JSON.stringify({
  step: 5,
  completed: [1, 2, 3, 4],
  data: { /* datos mockeados de los pasos anteriores */ }
}));
location.reload();

// O directamente vía Redux DevTools (cuando la app usa Redux)
// window.__REDUX_DEVTOOLS_EXTENSION__?.dispatch({ type: 'SET_STEP', step: 5 });

Acción 4 — LINK (azul) — copiar la URL con token de autenticación

Le muestras un bug al desarrollador. Le pegas un enlace — pero él está desconectado, sesión distinta. Copia la URL con un token activo en la query string:

// Leer el token de cookie / localStorage (según dónde lo guarde la app)
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 visual — destello verde
  document.body.style.outline = '4px solid #2D9D53';
  setTimeout(() => document.body.style.outline = '', 500);
});

Acción 5 — TIME (gris) — avanzar las fechas

Estás probando la caducidad de una suscripción dentro de 30 días. O una ventana de reembolso de 7 días. Sobrescribe 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] Fecha desplazada +${OFFSET_DAYS} días`,
  'background:#888;color:#fff;padding:2px 6px;border-radius:3px');

Advertencia: este override afecta solo al front-end. El backend sigue devolviendo el «verdadero ahora». Para pruebas full-stack hace falta una intervención del lado de la API o un feature flag «fecha simulada».

Buenas prácticas al construir una toolbar

• Etiquetas cortas (máx. 4 caracteres). FILL, CART, STATE, LINK, TIME — legibles al instante, ocupan poco espacio.
• Colores por tipo de acción: verde = «añadir/crear», rojo = «eliminar/resetear», morado = «saltar/mockear», azul = «copiar/exportar», gris = «depurar/info».
• Acciones destructivas tras un confirm — un RESET que vacía un carrito debería empezar con if (!confirm('¿Resetear el carrito?')) return;.
• Toolbar limitada al entorno — patrón de URL *staging* o *localhost*, NUNCA *. Toolbar QA en producción = peligro.
• Sincroniza la clave con todo el equipo — una persona escribe la acción, cada QA la tiene en 30 segundos.

Cómo conectarlo a JustZix

1. Instala JustZix.
2. Carpeta «Toolbar QA». Patrón de URL: https://*-staging.example.com/*.
3. Habilita el «Panel de acciones» en los ajustes de la carpeta.
4. Añade las acciones 1-5 de este artículo — cada una con su propio color y etiqueta de 4 caracteres.
5. Genera un enlace de compartición y envíalo al equipo — importan la toolbar con un clic.

Instala JustZix gratis y dale a tu equipo QA las herramientas que el equipo dev nunca construirá.