← Все статьи

Туториалы

Построить QA-тулбар с нуля — 5 действий, которые экономят 2 часа в день

15 мая 2026 · автор JustZix Team

QA-тестировщик заполняет одну и ту же форму регистрации 30 раз в день. Разработчик говорит «я построю тебе тестовую панель» и никогда этого не делает. У JustZix есть «действия» — кнопки в один клик, внедрённые в плавающий тулбар, с произвольным JS под капотом. Пять действий, которые реально сэкономят тебе 2 часа в день.

Что такое действия в JustZix

Действие — это кнопка на плавающем тулбаре: метка из 4 символов, цвет и JavaScript, который срабатывает при клике. Тулбар появляется на каждой странице, совпадающей с URL-паттерном. У каждого тестировщика свой набор, синхронизированный между устройствами, разделяемый с командой по ссылке.

Действие 1 — FILL (зелёное) — заполнить тестовыми данными

Заполняет каждое распознанное поле формы тестовым значением. Эмитит события input + change, чтобы фреймворки (React/Vue) реагировали:

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

Трюк: test+TIMESTAMP@example.com генерирует уникальные адреса каждый раз — тестируй регистрацию снова и снова без ошибки «email уже существует».

Действие 2 — CART (оранжевое) — добавить товар в корзину

Для e-commerce QA — пропускаешь навигацию по каталогу, сразу отправляешь товар в корзину:

// Декларативная версия — через API магазина (самая быстрая)
fetch('/api/cart/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 12345, quantity: 1 })
}).then(() => location.reload());

// Запасной вариант — нажать кнопку "Добавить в корзину"
// document.querySelector('[data-action="add-to-cart"]')?.click();

Два варианта, потому что некоторые магазины ожидают полный JS-поток с аналитикой, а API-эндпоинт пропускает аналитику — выбирай в зависимости от того, что тестируешь.

Действие 3 — STATE (фиолетовое) — привести виджет в точное состояние

Ты тестируешь многошаговый мастер. Шаг 5 требует пройденных 1-4. Прыгни сразу на 5:

// Устанавливаем состояние через SessionStorage / LocalStorage
sessionStorage.setItem('wizardState', JSON.stringify({
  step: 5,
  completed: [1, 2, 3, 4],
  data: { /* замоканные данные из предыдущих шагов */ }
}));
location.reload();

// Или напрямую через Redux DevTools (когда приложение использует Redux)
// window.__REDUX_DEVTOOLS_EXTENSION__?.dispatch({ type: 'SET_STEP', step: 5 });

Действие 4 — LINK (синее) — копировать URL с токеном авторизации

Ты показываешь баг разработчику. Вставляешь ему ссылку — но он разлогинен, другая сессия. Скопируй URL с активным токеном в query string:

// Читаем токен из cookie / localStorage (зависит от того, где приложение его хранит)
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(() => {
  // Визуальная обратная связь — зелёная вспышка
  document.body.style.outline = '4px solid #2D9D53';
  setTimeout(() => document.body.style.outline = '', 500);
});

Действие 5 — TIME (серое) — прокрутить даты вперёд

Ты тестируешь истечение подписки через 30 дней. Или окно возврата в 7 дней. Переопредели 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] Дата сдвинута на +${OFFSET_DAYS} дней`,
  'background:#888;color:#fff;padding:2px 6px;border-radius:3px');

Предупреждение: это переопределение касается только фронтенда. Бэкенд по-прежнему возвращает «настоящее сейчас». Для full-stack тестов нужно вмешательство на стороне API или фича-флаг «симулированная дата».

Хорошие практики при построении тулбара

• Короткие метки (максимум 4 символа). FILL, CART, STATE, LINK, TIME — читаются мгновенно, занимают мало места.
• Цвета по типу действия: зелёный = «добавить/создать», красный = «удалить/сбросить», фиолетовый = «пропустить/замокать», синий = «копировать/экспортировать», серый = «отладка/инфо».
• Деструктивные действия за confirm — RESET, очищающий корзину, должен начинаться с if (!confirm('Сбросить корзину?')) return;.
• Тулбар, ограниченный окружением — URL-паттерн *staging* или *localhost*, НИКОГДА *. QA-тулбар в продакшене = опасность.
• Синхронизируй ключ со всей командой — один человек пишет действие, у каждого QA оно есть в течение 30 секунд.

Как подключить это к JustZix

1. Установи JustZix.
2. Папка «QA-тулбар». URL-паттерн: https://*-staging.example.com/*.
3. Включи «Панель действий» в настройках папки.
4. Добавь действия 1-5 из этой статьи — каждое со своим цветом и меткой из 4 символов.
5. Сгенерируй ссылку для импорта и отправь её команде — они импортируют тулбар в один клик.

Установи JustZix бесплатно и дай своей QA-команде инструменты, которые команда разработки никогда не построит.