# 模糊记忆功能测试指南

## 测试环境准备

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

## 测试用例

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

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

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

**验证方法：**
```javascript
// 在控制台执行
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）**

**预期结果：**
- ✅ 页面不再显示任何模糊效果
- ✅ 不显示"已恢复"提示
- ✅ 存储数据已清空

**验证方法：**
```javascript
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 动态删除

**排查方法：**
```javascript
// 检查存储数据
chrome.storage.local.get(['blurredData'], console.log);

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

### 问题 2：部分元素未恢复

**可能原因：**
- DOM 结构变化
- CSS 选择器失效
- 元素动态加载延迟

**解决方案：**
- 查看控制台警告
- 手动重新模糊

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

**可能原因：**
- 文本内容改变
- XPath 路径变化
- 文本节点被重新渲染

**验证方法：**
```javascript
// 检查 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. 观察恢复时间和性能

**监控指标：**
```javascript
// 在控制台执行
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. 无

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

---

## 自动化测试（可选）

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

```javascript
// 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();
```