303 lines
6.5 KiB
Markdown
303 lines
6.5 KiB
Markdown
# 模糊记忆功能测试指南
|
||
|
||
## 测试环境准备
|
||
|
||
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();
|
||
```
|