← 全部文章

教程

从零搭建 QA 工具栏 —— 每天省下 2 小时的 5 个动作

15 5月 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 每次都生成唯一的地址 —— 反复测试注册而不会撞上「邮箱已存在」。

动作 2 —— CART（橙色）—— 把商品加入购物车

用于电商 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

你向开发演示一个 bug。你把链接粘给他 —— 但他没登录，是另一个会话。复制一个在查询字符串里带着有效令牌的 URL：

// 从 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');

警告：这个覆盖只影响前端。后端返回的仍然是「真正的现在」。要做全栈测试，需要在 API 一侧做改动，或者一个「模拟日期」的功能开关。

搭建工具栏的好做法

• 标签要短（最多 4 个字符）。FILL、CART、STATE、LINK、TIME —— 一眼可读，占地很小。
• 按动作类型分配颜色：绿色 = 「添加/创建」，红色 = 「删除/重置」，紫色 = 「跳过/模拟」，蓝色 = 「复制/导出」，灰色 = 「调试/信息」。
• 破坏性动作要加确认框 —— 一个清空购物车的 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 团队那些开发团队永远不会做的工具。