Просмотр исходного кода

docs(story-12.6): 添加 Playwright MCP 探索结果到 Dev Notes

- 添加页面 URL 和路由结构分析 (/talent-mini, 端口 10087)
- 添加登录表单元素选择器分析(当前无 data-testid)
- 确认 Token 存储方式 (talent_token in localStorage)
- 添加与企业小程序的对比表
- 添加源码位置参考(登录页面、路由配置等)
- 更新选择器策略和 Token 管理策略

Co-Authored-By: Claude <noreply@anthropic.com>
yourname 5 дней назад
Родитель
Сommit
b7554d7b8c
1 измененных файлов с 103 добавлено и 20 удалено
  1. 103 20
      _bmad-output/implementation-artifacts/12-6-talent-mini-page-object.md

+ 103 - 20
_bmad-output/implementation-artifacts/12-6-talent-mini-page-object.md

@@ -197,33 +197,85 @@ const talentUserData = {
 };
 ```
 
+### Playwright MCP 探索结果
+
+**页面 URL 和路由结构:**
+- H5 URL: `http://localhost:8080/talent-mini` (生产环境)
+- 开发环境: `http://localhost:10087/talent-mini`
+- 配置源: `mini-talent/config/index.ts`
+  - `publicPath: '/talent-mini/'`
+  - `router.basename: '/talent-mini'`
+- 路由配置: `mini-talent/src/app.config.ts`
+  - 首页: `pages/index/index`
+  - 登录页: `pages/login/index`
+
+**登录表单元素选择器(当前无 data-testid):**
+- 源码位置: `mini-ui-packages/rencai-auth-ui/src/pages/LoginPage/LoginPage.tsx`
+- **重要**: 当前登录页面**没有**添加 `data-testid` 属性,需要使用 role/text 选择器
+- 表单结构:
+  ```
+  - 导航栏标题: "人才登录" (Navbar组件)
+  - 页面标题: "人才服务平台" (text)
+  - 副标题: "欢迎回来" (text)
+  - 账号输入标签: "手机号/身份证号/残疾证号" (text)
+  - 账号输入框: placeholder="请输入手机号/身份证号/残疾证号" (Input)
+  - 密码输入标签: "密码" (text)
+  - 密码输入框: placeholder="请输入密码" (Input, password模式)
+  - 登录按钮: "登录" (Button)
+  - 忘记密码链接: "忘记密码?" (text)
+  ```
+
+**Token 存储方式(通过源码确认):**
+- Token Key: `talent_token` (在 `rencai-auth-ui/src/hooks/useAuth.tsx` 第22行)
+- User Key: `talent_user` (同上)
+- 存储方式: `Taro.setStorageSync(TOKEN_KEY, token)`
+- 在 H5 环境中,Taro.setStorageSync 会映射到 localStorage
+
+**与企业小程序对比:**
+
+| 特性 | 企业小程序 | 人才小程序 |
+|------|-----------|-----------|
+| H5 URL | `/mini` | `/talent-mini` |
+| Token Key | `enterprise_token` | `talent_token` |
+| User Key | `enterprise_user` | `talent_user` |
+| 首页路径 | `/pages/yongren/dashboard/index` | `/pages/index/index` |
+| 登录页标题 | "企业用户登录" | "人才登录" |
+| 账号标签 | "请输入手机号" | "手机号/身份证号/残疾证号" |
+| data-testid | ✅ 已添加 | ❌ 待添加 |
+
+**源码位置参考:**
+- 人才小程序登录页面: `mini-ui-packages/rencai-auth-ui/src/pages/LoginPage/LoginPage.tsx`
+- 人才小程序桥接文件: `mini-talent/src/pages/login/index.tsx`
+- 人才小程序路由配置: `mini-talent/src/app.config.ts`
+- 人才小程序 H5 配置: `mini-talent/config/index.ts`
+- 企业小程序登录页面: `mini-ui-packages/mini-enterprise-auth-ui/src/pages/login/Login.tsx`
+- Auth Hook: `mini-ui-packages/rencai-auth-ui/src/hooks/useAuth.tsx`
+
 ### Token 管理策略
 
-**存储位置:** localStorage 或 sessionStorage(根据实际小程序实现)
+**存储位置:** localStorage (H5 环境,通过 Taro.setStorageSync 映射)
 
-**Token 操作方法(参考 Story 12.4):**
+**Token 操作方法(使用 talent_token key):**
 ```typescript
 // 获取 token
 async getToken(): Promise<string | null> {
   return await this.page.evaluate(() => {
-    return localStorage.getItem('token') || sessionStorage.getItem('token');
+    return localStorage.getItem('talent_token');
   });
 }
 
 // 设置 token(用于测试前置条件)
 async setToken(token: string): Promise<void> {
   await this.page.evaluate((t) => {
-    localStorage.setItem('token', t);
+    localStorage.setItem('talent_token', t);
   }, token);
 }
 
 // 清除所有认证存储
 async clearAuth(): Promise<void> {
   await this.page.evaluate(() => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('auth_token');
-    sessionStorage.removeItem('token');
-    sessionStorage.removeItem('auth_token');
+    localStorage.removeItem('talent_token');
+    localStorage.removeItem('talent_user');
   });
 }
 ```
@@ -286,27 +338,49 @@ Token 在页面刷新后的持久性验证将在 Story 12.7 的 E2E 测试中实
 
 ### 选择器策略
 
-**优先级(遵循项目标准):**
-1. `data-testid` 属性(最高优先级)
-2. ARIA 属性 + role
-3. 文本内容(最低优先级,避免使用)
+**重要说明:人才小程序当前没有 data-testid 属性**
+
+根据 Playwright MCP 探索结果,人才小程序登录页面 (`rencai-auth-ui/src/pages/LoginPage/LoginPage.tsx`) 目前**没有添加** `data-testid` 属性。与企业小程序不同:
+- 企业小程序登录页面已在 Story 12.4 中添加 `data-testid` 属性
+- 人才小程序需要在任务 8 中添加这些属性
+
+**当前阶段的选择器策略:**
+
+由于页面目前没有 `data-testid`,在实现 Page Object 时需要:
+
+1. **优先使用 text 定位(临时方案)**:
+```typescript
+// 账号输入框 - 使用 placeholder
+this.page.getByPlaceholder('请输入手机号/身份证号/残疾证号')
 
-**示例:**
+// 密码输入框 - 使用 placeholder
+this.page.getByPlaceholder('请输入密码')
+
+// 登录按钮 - 使用 text
+this.page.getByRole('button', { name: '登录' })
+```
+
+2. **任务 8 添加 data-testid 后的最终方案**:
 ```typescript
 private readonly selectors = {
-  // ✅ 优先:data-testid(使用 talent- 前缀)
-  usernameInput: '[data-testid="talent-username-input"]',
+  // ✅ 任务 8 完成后:data-testid(使用 talent- 前缀)
+  loginPage: '[data-testid="talent-login-page"]',
+  identifierInput: '[data-testid="talent-identifier-input"]',
   passwordInput: '[data-testid="talent-password-input"]',
   loginButton: '[data-testid="talent-login-button"]',
 
-  // ⚠️ 备选:ARIA + role(如 data-testid 不可用)
-  // usernameInput: '[aria-label="用户名"]',
-
-  // ❌ 避免:纯文本选择器
-  // usernameInput: 'text=用户名',
+  // ⚠️ 当前阶段:使用 role/text 选择器(临时方案)
+  // identifierInput: 'input[placeholder="请输入手机号/身份证号/残疾证号"]',
+  // passwordInput: 'input[placeholder="请输入密码"]',
+  // loginButton: 'button:has-text("登录")',
 };
 ```
 
+**标准优先级(任务 8 完成后):**
+1. `data-testid` 属性(最高优先级)
+2. ARIA 属性 + role
+3. 文本内容(最低优先级,避免使用)
+
 ### TypeScript 类型定义
 
 **Page Object 类类型:**
@@ -372,3 +446,12 @@ _待开发完成后填写_
   - 登录功能封装需求
   - Token 管理策略
   - 状态:ready-for-dev
+
+- 2026-01-14: Dev Notes 更新 - 添加 Playwright MCP 探索结果
+  - 页面 URL 和路由结构 (`/talent-mini`, 端口 10087)
+  - 登录表单元素选择器(当前无 data-testid,需使用 role/text 选择器)
+  - Token 存储方式确认 (`talent_token` in localStorage)
+  - 与企业小程序对比(URL、Token Key、首页路径等区别)
+  - 源码位置参考(登录页面、路由配置、H5 配置等)
+  - 更新选择器策略,添加当前阶段的临时方案说明
+  - 更新 Token 管理策略,使用 `talent_token` key