assistant-storefront/WIDGET_TESTS_GUIDE.md

/widget_tests 页面使用指南

📋 功能说明

测试页面用于模拟 Chatwoot Widget 的用户登录/退出流程。

🔄 新的行为逻辑

1. 页面初始加载（游客模式）

无论 cookie 中是否有 token，都以游客模式启动：

• ✅ 不清除任何数据
• ✅ 不设置 userIdentifier
• ✅ 保留现有会话

原因： 让用户通过手动点击登录按钮来测试登录流程。

2. 点击"模拟用户登录"（不刷新页面）

执行步骤：

1. 设置 token cookie
2. 调用 window.$chatwoot.reset() 清除之前的聊天内容
3. 调用 window.$chatwoot.setUser() 设置用户信息
4. ✅ 不刷新页面

优点：

• 用户体验更好，无页面闪烁
• 切换快速

注意：

• SDK 仍然以游客模式初始化（没有 userIdentifier）
• 但通过 setUser() 设置了用户身份

3. 点击"用户退出"（刷新页面）

执行步骤：

1. 删除 token cookie
2. 调用 window.$chatwoot.reset() 清除所有数据
3. 清除 localStorage
4. ✅ 刷新页面（2秒倒计时）

原因：

• 确保完全清除用户状态
• 让 SDK 重新以游客模式初始化

🎯 完整流程示例

场景 1：游客 → 登录 → 退出

1. 访问页面
   → 游客模式启动
   → 可以发送游客消息

2. 点击"模拟用户登录"
   → reset() 清除聊天
   → setUser() 设置用户 211845
   → 不刷新页面
   → 可以发送已登录用户消息

3. 点击"用户退出"
   → reset() 清除数据
   → 刷新页面
   → 回到游客模式

场景 2：刷新页面（有 token）

1. 已登录状态（token 存在）
2. 刷新页面
3. → 仍然以游客模式启动
4. → 需要重新点击登录按钮

重要： 页面加载时不会自动检查 token 并设置用户，必须手动点击登录按钮。

🔍 关键代码

登录函数（不刷新）

function simulateLogin() {
  // 1. 设置 token
  setCookie('token', TEST_TOKEN);

  // 2. 清除之前的聊天
  window.$chatwoot.reset();

  // 3. 设置用户信息
  setTimeout(() => {
    window.$chatwoot.setUser('211845', {
      identifier_hash: userHash,
      email: '211845@example.com',
      name: '测试用户 211845',
      custom_attributes: {
        jwt_token: token,
        login_status: 'logged_in'
      }
    });
  }, 500);
}

退出函数（刷新页面）

function simulateLogout() {
  // 1. 删除 token
  deleteCookie('token');

  // 2. 清除数据
  window.$chatwoot.reset();

  // 3. 清除 localStorage

  // 4. 刷新页面（2秒倒计时）
  location.reload();
}

🎨 界面说明

状态卡片

• 游客模式：黄色边框
• 已登录：绿色边框

显示内容：

• User ID
• Token 状态
• 登录状态

操作按钮

• 🔐 模拟用户登录：设置用户并清除聊天
• 🚪 用户退出：清除数据并刷新页面
• 🔄 刷新页面：手动刷新
• 💬 打开聊天：打开 Widget 聊天窗口
• 🗑️ 清除所有数据：完全重置并刷新页面

日志输出

实时显示所有操作日志，包括：

• SDK 加载状态
• Token 设置/删除
• 用户信息设置
• 会话清除操作

⚠️ 注意事项

1. 页面加载不自动登录：即使有 token，也需要手动点击登录按钮
2. 登录不刷新页面：使用 reset() + setUser() 实现
3. 退出会刷新页面：确保完全清除状态
4. 会话数据：reset() 会清除 cw_conversation cookie，退出后会创建新会话

🧪 测试建议

测试 1：游客模式

1. 访问页面
2. 发送一条消息
3. 验证：消息以游客身份发送

测试 2：登录流程

1. 点击"模拟用户登录"
2. 观察日志：reset() → setUser()
3. 发送一条消息
4. 验证：消息以用户 211845 身份发送

测试 3：退出流程

1. 在已登录状态
2. 点击"用户退出"
3. 观察倒计时和刷新
4. 验证：回到游客模式

测试 4：会话隔离

1. 游客模式发送消息
2. 登录（reset 清除）
3. 发送消息
4. 退出（刷新）
5. 验证：之前的消息已被清除

📊 与之前实现的对比

操作	之前的行为	现在的行为
页面加载（有 token）	自动设置 userIdentifier	游客模式，不做处理
点击登录	刷新页面（2秒倒计时）	reset() + setUser()（不刷新）
点击退出	reset()（不刷新）	reset() + 刷新页面（2秒倒计时）

🎯 设计理念

新实现的目标：

• 更好的用户体验（登录不刷新）
• 更清晰的状态管理（退出刷新确保清理）
• 手动控制登录流程（便于测试）