library-picturebook-activity/lesingle-creation-frontend/e2e/admin/login.spec.ts
En 7bc8c10d9a feat: 系统品牌更名为"智创未来"及相关配置调整
- 前后端所有"乐绘世界"统一更名为"智创未来"
- 生产环境乐读派API地址更新为公网地址
- 公众端登录页调整用户名/密码字段显示逻辑
- 同步更新文档、测试用例、主题样式中的品牌名称

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-11 19:30:26 +08:00

118 lines
4.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { test, expect } from '../fixtures/admin.fixture'
import { setupApiMocks, TENANT_CODE, MOCK_TOKEN } from '../fixtures/admin.fixture'
/**
* 登录流程测试
* 测试管理端登录页面的各项功能
*/
test.describe('管理端登录流程', () => {
test.beforeEach(async ({ page }) => {
await setupApiMocks(page)
})
test('L-01 管理端登录页正常渲染', async ({ page }) => {
await page.goto(`/${TENANT_CODE}/login`)
// 验证页面标题
await expect(page.locator('.login-header h2')).toHaveText('智创未来')
// 验证表单字段可见
await expect(page.locator('input[placeholder="请输入用户名"]')).toBeVisible()
await expect(page.locator('input[placeholder="请输入密码"]')).toBeVisible()
// 验证登录按钮可见
await expect(page.locator('button.login-btn')).toBeVisible()
// Ant Design 按钮文本可能有空格,使用正则匹配
await expect(page.locator('button.login-btn')).toHaveText(/登\s*录/)
})
test('L-02 空表单提交显示校验错误', async ({ page }) => {
await page.goto(`/${TENANT_CODE}/login`)
// 开发模式会自动填充 admin/admin123先清空字段
const usernameInput = page.locator('input[placeholder="请输入用户名"]')
const passwordInput = page.locator('input[type="password"]')
await usernameInput.clear()
await passwordInput.clear()
// 点击提交按钮触发 Ant Design 表单校验html-type="submit"
await page.locator('button.login-btn').click()
// Ant Design Vue 表单校验失败时会显示错误提示
await expect(
page.locator('.ant-form-item-explain-error, .ant-form-item-explain, .ant-form-item-with-help, .has-error').first()
).toBeVisible({ timeout: 5000 })
})
test('L-03 错误密码登录失败', async ({ page }) => {
await page.goto(`/${TENANT_CODE}/login`)
// 填写错误的用户名和密码
await page.locator('input[placeholder="请输入用户名"]').fill('wrong')
await page.locator('input[type="password"]').fill('wrongpassword')
// 点击登录
await page.locator('button.login-btn').click()
// 验证错误提示信息
await expect(page.locator('.ant-message')).toBeVisible({ timeout: 5000 })
})
test('L-04 正确凭据登录成功跳转', async ({ page }) => {
await page.goto(`/${TENANT_CODE}/login`)
// 填写正确的用户名和密码
await page.locator('input[placeholder="请输入用户名"]').fill('admin')
await page.locator('input[type="password"]').fill('admin123')
// 点击登录
await page.locator('button.login-btn').click()
// 验证跳转到管理端页面(离开登录页)
await page.waitForURL((url) => !url.pathname.includes('/login'), { timeout: 15_000 })
// 验证侧边栏可见(说明进入了管理端布局)
await expect(page.locator('.custom-sider')).toBeVisible({ timeout: 10_000 })
})
test('L-05 登录后 Token 存储正确', async ({ page }) => {
await page.goto(`/${TENANT_CODE}/login`)
// 填写并提交登录
await page.locator('input[placeholder="请输入用户名"]').fill('admin')
await page.locator('input[type="password"]').fill('admin123')
await page.locator('button.login-btn').click()
// 等待跳转
await page.waitForURL((url) => !url.pathname.includes('/login'), { timeout: 15_000 })
// 验证 Cookie 中包含 token
const cookies = await page.context().cookies()
const tokenCookie = cookies.find((c) => c.name === 'token')
expect(tokenCookie).toBeDefined()
expect(tokenCookie!.value.length).toBeGreaterThan(0)
})
test('L-06 退出登录清除状态', async ({ page }) => {
await page.goto(`/${TENANT_CODE}/login`)
// 先登录
await page.locator('input[placeholder="请输入用户名"]').fill('admin')
await page.locator('input[type="password"]').fill('admin123')
await page.locator('button.login-btn').click()
await page.waitForURL((url) => !url.pathname.includes('/login'), { timeout: 15_000 })
await expect(page.locator('.custom-sider')).toBeVisible({ timeout: 10_000 })
// 点击用户头像区域
await page.locator('.user-info').click()
// 点击退出登录
await page.locator('text=退出登录').click()
// 验证跳转回登录页
await page.waitForURL(/\/login/, { timeout: 10_000 })
await expect(page.locator('.login-container')).toBeVisible()
})
})