# Instructions - Following Playwright test failed. - Explain why, be concise, respect Playwright best practices. - Provide a snippet of code with the fix, if possible. # Test info - Name: tests\regression\23-frontend-e2e.spec.ts >> 前端 UI 完整验收 >> E08: 章节详情页 - 章节信息/音频视频按钮/返回 - Location: tests\regression\23-frontend-e2e.spec.ts:241:7 # Error details ``` TimeoutError: page.goto: Timeout 30000ms exceeded. Call log: - navigating to "http://localhost:5173/#/pages/book-generator/chapter-detail", waiting until "networkidle" ``` # Page snapshot ```yaml - generic [ref=e7]: - generic [ref=e9]: - generic [ref=e11]: ← - generic [ref=e12]: 章节详情 - generic [ref=e16]: - generic [ref=e17]: - generic [ref=e18]: 第0章 - generic [ref=e20]: 0字 - generic [ref=e22]: - generic [ref=e23]: 📖 - generic [ref=e24]: 这是一个章，没有具体内容 - generic [ref=e26]: - generic [ref=e27]: 💡 - generic [ref=e28]: 这是一个章，请点击具体小节查看内容和生成音频 - generic [ref=e29]: - generic [ref=e31]: 没有上一章 - generic [ref=e33]: 没有下一章 ``` # Test source ```ts 142 | 143 | // 播放器UI存在 144 | const hasPlayerUI = 145 | (await page.locator('text=正在播放').count()) > 0 || 146 | (await page.locator('text=播放列表').count()) > 0 || 147 | (await page.locator('text=暂无音频').count()) > 0 || 148 | (await page.locator('.player').count()) > 0; 149 | expect(hasPlayerUI || true).toBeTruthy(); 150 | 151 | // 上一首/下一首 152 | const prevBtn = page.locator('text=上一首').first(); 153 | const nextBtn = page.locator('text=下一首').first(); 154 | if (await prevBtn.count() > 0) await expect(prevBtn).toBeVisible(); 155 | if (await nextBtn.count() > 0) await expect(nextBtn).toBeVisible(); 156 | 157 | await page.screenshot({ path: `${SCREENSHOT_DIR}/e2e-E05-player.png`, fullPage: true }).catch(() => {}); 158 | }); 159 | 160 | // ============================================= 161 | // E06-E10: 业务页面（创建/交互/章节/会员/专辑） 162 | // ============================================= 163 | 164 | test('E06: 创建书籍页(一键模式) - 表单输入/规模选择/模板应用/创建按钮', async ({ page }) => { 165 | await page.goto(`${FRONTEND_URL}/#/pages/book-generator/create`, { waitUntil: 'networkidle', timeout: 30000 }); 166 | await page.waitForTimeout(3000); 167 | 168 | await expect(page.locator('text=创建书籍').first()).toBeVisible(); 169 | 170 | // 描述输入框 171 | const descInput = page.locator('textarea').first(); 172 | if (await descInput.count() > 0) { 173 | await descInput.click(); 174 | await descInput.fill('这是一本关于人工智能的入门书籍'); 175 | await page.waitForTimeout(500); 176 | } 177 | 178 | // AI自动优化描述按钮 179 | const smartBtn = page.locator('text=AI自动优化描述').first(); 180 | if (await smartBtn.count() > 0) await expect(smartBtn).toBeVisible(); 181 | 182 | // 规模选择 chips 183 | const scaleChip = page.locator('text=1千字').first(); 184 | if (await scaleChip.count() > 0) { 185 | await scaleChip.click(); 186 | await page.waitForTimeout(300); 187 | } 188 | 189 | // 高级定制展开/折叠 190 | const advancedBtn = page.locator('text=高级定制').first(); 191 | if (await advancedBtn.count() > 0) { 192 | await advancedBtn.click(); 193 | await page.waitForTimeout(300); 194 | } 195 | 196 | // 模板卡片点击 197 | const templateCard = page.locator('.template-card').first(); 198 | if (await templateCard.count() > 0) { 199 | await templateCard.click(); 200 | await page.waitForTimeout(500); 201 | } 202 | 203 | // 切换到交互模式 204 | const switchBtn = page.locator('text=切换到交互模式').first(); 205 | if (await switchBtn.count() > 0) await expect(switchBtn).toBeVisible(); 206 | 207 | // 创建书籍按钮 208 | const createBtn = page.locator('text=创建书籍').last(); 209 | await expect(createBtn).toBeVisible(); 210 | 211 | await page.screenshot({ path: `${SCREENSHOT_DIR}/e2e-E06-book-create.png`, fullPage: true }).catch(() => {}); 212 | }); 213 | 214 | test('E07: 交互式创建页 - 4步向导/表单输入/下一步/切换模式', async ({ page }) => { 215 | await page.goto(`${FRONTEND_URL}/#/pages/book-generator/interactive`, { waitUntil: 'networkidle', timeout: 30000 }); 216 | await page.waitForTimeout(3000); 217 | 218 | await expect(page.locator('text=交互式创建').first()).toBeVisible(); 219 | 220 | // 步骤指示器 221 | const hasStepIndicator = 222 | (await page.locator('text=信息输入').count()) > 0 || 223 | (await page.locator('text=AI规划').count()) > 0; 224 | expect(hasStepIndicator).toBeTruthy(); 225 | 226 | // AI智能推荐按钮 227 | const aiRecommend = page.locator('text=AI智能推荐').first(); 228 | if (await aiRecommend.count() > 0) await expect(aiRecommend).toBeVisible(); 229 | 230 | // 下一步按钮 231 | const nextBtn = page.locator('text=下一步').first(); 232 | if (await nextBtn.count() > 0) await expect(nextBtn).toBeVisible(); 233 | 234 | // 切换到一键模式 235 | const switchBtn = page.locator('text=切换到一键模式').first(); 236 | if (await switchBtn.count() > 0) await expect(switchBtn).toBeVisible(); 237 | 238 | await page.screenshot({ path: `${SCREENSHOT_DIR}/e2e-E07-interactive.png`, fullPage: true }).catch(() => {}); 239 | }); 240 | 241 | test('E08: 章节详情页 - 章节信息/音频视频按钮/返回', async ({ page }) => { > 242 | await page.goto(`${FRONTEND_URL}/#/pages/book-generator/chapter-detail`, { waitUntil: 'networkidle', timeout: 30000 }); | ^ TimeoutError: page.goto: Timeout 30000ms exceeded. 243 | await page.waitForTimeout(3000); 244 | 245 | await expect(page.locator('#app')).toBeVisible(); 246 | 247 | // 章节相关内容 248 | const hasChapterUI = 249 | (await page.locator('text=章节').count()) > 0 || 250 | (await page.locator('text=第').count()) > 0 || 251 | (await page.locator('.chapter-content').count()) > 0; 252 | expect(hasChapterUI || true).toBeTruthy(); 253 | 254 | // 返回按钮 255 | const backBtn = page.locator('.back-icon').first(); 256 | if (await backBtn.count() > 0) await expect(backBtn).toBeVisible(); 257 | 258 | await page.screenshot({ path: `${SCREENSHOT_DIR}/e2e-E08-chapter-detail.png`, fullPage: true }).catch(() => {}); 259 | }); 260 | 261 | test('E09: 会员订阅页 - 套餐卡片/支付方式/订阅按钮/点击套餐', async ({ page }) => { 262 | await page.goto(`${FRONTEND_URL}/#/pages/member/index`, { waitUntil: 'networkidle', timeout: 30000 }); 263 | await page.waitForTimeout(3000); 264 | 265 | // Token 余额 266 | const tokenEl = page.locator('text=Token').first(); 267 | if (await tokenEl.count() > 0) await expect(tokenEl).toBeVisible(); 268 | 269 | // 套餐选择按钮 270 | const planBtns = page.locator('text=选择此套餐'); 271 | if (await planBtns.count() > 0) await expect(planBtns.first()).toBeVisible(); 272 | 273 | // 订阅按钮 274 | const subscribeBtn = page.locator('text=立即订阅').first(); 275 | if (await subscribeBtn.count() > 0) await expect(subscribeBtn).toBeVisible(); 276 | 277 | await page.screenshot({ path: `${SCREENSHOT_DIR}/e2e-E09-member.png`, fullPage: true }).catch(() => {}); 278 | }); 279 | 280 | test('E10: 专辑列表页 - 列表展示/空状态/创建入口', async ({ page }) => { 281 | await page.goto(`${FRONTEND_URL}/#/pages/albums/index`, { waitUntil: 'networkidle', timeout: 30000 }); 282 | await page.waitForTimeout(3000); 283 | 284 | await expect(page.locator('text=专辑').first()).toBeVisible(); 285 | 286 | // 空状态或内容（更宽松检查） 287 | const hasContent = 288 | (await page.locator('text=暂无专辑').count()) > 0 || 289 | (await page.locator('text=创建你的第一个专辑').count()) > 0 || 290 | (await page.locator('.item').count()) > 0 || 291 | (await page.locator('.album-card').count()) > 0; 292 | expect(hasContent).toBeTruthy(); 293 | 294 | // 创建专辑按钮 295 | const createBtn = page.locator('text=创建专辑').first(); 296 | if (await createBtn.count() > 0) await expect(createBtn).toBeVisible(); 297 | 298 | await page.screenshot({ path: `${SCREENSHOT_DIR}/e2e-E10-albums.png`, fullPage: true }).catch(() => {}); 299 | }); 300 | 301 | // ============================================= 302 | // E11-E15: 功能页面（搜索/历史/视频/收藏/设置） 303 | // ============================================= 304 | 305 | test('E11: 搜索页 - 搜索框输入/历史记录/热门推荐/点击搜索', async ({ page }) => { 306 | await page.goto(`${FRONTEND_URL}/#/pages/search/index`, { waitUntil: 'networkidle', timeout: 30000 }); 307 | await page.waitForTimeout(4000); 308 | 309 | // 搜索输入框（uniapp可能用input或view模拟） 310 | const searchInput = page.locator('input').first(); 311 | if (await searchInput.count() > 0) { 312 | await expect(searchInput).toBeVisible(); 313 | await searchInput.click(); 314 | await searchInput.fill('测试搜索'); 315 | await page.waitForTimeout(500); 316 | } 317 | 318 | // 搜索按钮（使用CSS类选择器避免匹配placeholder） 319 | const searchBtn = page.locator('.search-btn').first(); 320 | if (await searchBtn.count() > 0) { 321 | await expect(searchBtn).toBeVisible(); 322 | } 323 | 324 | // 历史记录或热门推荐或输入提示（至少有一个区域存在） 325 | const hasSection = 326 | (await page.locator('text=搜索历史').count()) > 0 || 327 | (await page.locator('text=热门推荐').count()) > 0 || 328 | (await page.locator('text=输入关键词').count()) > 0; 329 | expect(hasSection || true).toBeTruthy(); 330 | 331 | await page.screenshot({ path: `${SCREENSHOT_DIR}/e2e-E11-search.png`, fullPage: true }).catch(() => {}); 332 | }); 333 | 334 | test('E12: 历史记录页 - 时间标签栏/视图切换/列表项点击', async ({ page }) => { 335 | await page.goto(`${FRONTEND_URL}/#/pages/history/index`, { waitUntil: 'networkidle', timeout: 30000 }); 336 | await page.waitForTimeout(3000); 337 | 338 | // 全部标签 339 | await expect(page.locator('text=全部').first()).toBeVisible(); 340 | 341 | // 时间标签切换 342 | const todayTab = page.locator('text=今天').first(); ```