blurweb/TESTING.md

模糊记忆功能测试指南

测试环境准备

1. 在 Chrome/Edge 浏览器中加载扩展
2. 打开 test.html 测试页面
3. 打开浏览器控制台（F12）查看日志

测试用例

测试 1：元素模式模糊记忆

步骤：

1. 点击扩展图标，选择"元素模式"
2. 点击"开启模糊模式"
3. 在测试页面上点击几个元素进行模糊
4. 按 ESC 退出模糊模式
5. 刷新页面（F5）
6. 等待页面加载完成

预期结果：

• ✅ 页面顶部显示提示："已恢复 N 个模糊效果"
• ✅ 之前模糊的元素自动恢复模糊状态
• ✅ 控制台输出恢复日志

验证方法：

// 在控制台执行
chrome.storage.local.get(['blurredData'], (result) => {
  console.log('存储的模糊数据:', result.blurredData);
});

---

测试 2：文本选择模式模糊记忆

步骤：

1. 点击扩展图标，选择"文本选择模式"
2. 点击"开启模糊模式"
3. 拖动选择几段文本，点击浮动按钮模糊
4. 按 ESC 退出模糊模式
5. 刷新页面（F5）

预期结果：

• ✅ 选中的文本段落自动恢复模糊
• ✅ 点击模糊的文本可以恢复

注意事项：

• 如果文本内容改变，可能无法恢复
• XPath 必须能够找到对应的文本节点

---

测试 3：区域模式模糊记忆

步骤：

1. 点击扩展图标，选择"区域模式"
2. 点击"开启模糊模式"
3. 拖动鼠标绘制几个矩形区域
4. 按 ESC 退出模糊模式
5. 刷新页面（F5）

预期结果：

• ✅ 模糊区域自动恢复
• ✅ 点击区域可以移除
• ✅ 区域位置和大小保持一致

注意事项：

• 使用绝对坐标存储
• 如果页面布局改变，区域位置可能偏移

---

测试 4：混合模式模糊记忆

步骤：

1. 使用元素模式模糊几个元素
2. 切换到文本选择模式模糊几段文本
3. 切换到区域模式绘制几个区域
4. 刷新页面（F5）

预期结果：

• ✅ 所有模式的模糊效果都能恢复
• ✅ 提示显示总数量

---

测试 5：清除模糊效果

步骤：

1. 添加一些模糊效果
2. 点击扩展图标
3. 点击"清除所有模糊"按钮
4. 刷新页面（F5）

预期结果：

• ✅ 页面不再显示任何模糊效果
• ✅ 不显示"已恢复"提示
• ✅ 存储数据已清空

验证方法：

chrome.storage.local.get(['blurredData'], (result) => {
  const pageData = result.blurredData?.[window.location.href];
  console.log('当前页面数据:', pageData); // 应该为 undefined
});

---

测试 6：多页面隔离

步骤：

1. 在 test.html 页面添加模糊效果
2. 打开另一个网页（如 file:///F:/test2.html）
3. 添加不同的模糊效果
4. 分别刷新两个页面

预期结果：

• ✅ 每个页面只恢复自己的模糊效果
• ✅ 不会互相干扰

---

测试 7：强度变化

步骤：

1. 添加模糊效果（强度 10px）
2. 调整强度滑块到 15px
3. 不刷新页面，再添加新的模糊效果
4. 刷新页面

预期结果：

• ✅ 所有模糊效果恢复
• ✅ 强度可能不完全一致（当前实现使用全局 intensity）

改进建议：

• 每个元素单独存储其强度值

---

控制台日志参考

正常的恢复日志：

[BlurText] Content script loaded
[BlurText] Loaded blur intensity: 10
[BlurText] Restoring blur data: {elements: Array(3), selections: Array(2), areas: Array(1), timestamp: 1234567890}
[BlurText] Restored element blur: div.test-section > h2:nth-of-type(1)
[BlurText] Restored selection blur: 138-0000-1234
[BlurText] Restored area blur: {left: 100, top: 200, width: 300, height: 150}

没有存储数据：

[BlurText] No saved blur data for this page

恢复失败警告：

[BlurText] Failed to restore element: div.removed-element Error: Element not found

---

常见问题排查

问题 1：刷新后没有恢复

可能原因：

• 存储数据未保存成功
• URL 变化（如添加了查询参数）
• 元素被 JavaScript 动态删除

排查方法：

// 检查存储数据
chrome.storage.local.get(['blurredData'], console.log);

// 检查当前 URL
console.log('Current URL:', window.location.href);

问题 2：部分元素未恢复

可能原因：

• DOM 结构变化
• CSS 选择器失效
• 元素动态加载延迟

解决方案：

• 查看控制台警告
• 手动重新模糊

问题 3：文本选择恢复失败

可能原因：

• 文本内容改变
• XPath 路径变化
• 文本节点被重新渲染

验证方法：

// 检查 XPath 是否有效
const xpath = "//div[@id='content']/p[1]/text()[1]";
const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
console.log('XPath result:', result.singleNodeValue);

---

性能测试

大量模糊元素测试

步骤：

1. 在页面上添加 50-100 个模糊效果
2. 刷新页面
3. 观察恢复时间和性能

监控指标：

// 在控制台执行
console.time('restore');
// 刷新页面
// 等待恢复完成
console.timeEnd('restore'); // 查看恢复耗时

性能目标：

• 50 个元素：< 200ms
• 100 个元素：< 500ms
• 200 个元素：< 1000ms

---

测试结论模板

测试日期：2025-01-11
测试浏览器：Chrome 120.0
测试页面：test.html

元素模式：✅ 通过
文本选择模式：✅ 通过
区域模式：✅ 通过
混合模式：✅ 通过
清除功能：✅ 通过
多页面隔离：✅ 通过

性能表现：
- 10 个元素恢复耗时：45ms
- 50 个元素恢复耗时：180ms

已知问题：
1. 无

备注：
功能正常，符合预期

---

自动化测试（可选）

如需编写自动化测试，可以参考以下代码：

// test-restore.js
async function testRestore() {
  // 1. 清空存储
  await chrome.storage.local.clear();

  // 2. 模拟添加模糊数据
  const testData = {
    blurredData: {
      [window.location.href]: {
        elements: [
          { selector: 'h1', intensity: 10 }
        ],
        selections: [],
        areas: [],
        timestamp: Date.now()
      }
    }
  };
  await chrome.storage.local.set(testData);

  // 3. 刷新页面
  window.location.reload();

  // 4. 验证恢复（需要在新页面加载后执行）
  setTimeout(() => {
    const h1 = document.querySelector('h1');
    const isBlurred = h1.classList.contains('blurtext-blurred');
    console.log('Test result:', isBlurred ? 'PASS' : 'FAIL');
  }, 1000);
}

testRestore();