tg-live-game-web/tests/e2e/user.spec.ts

import { test, expect } from '@playwright/test'

// 测试账号配置
const TEST_USERNAME = process.env.TEST_USERNAME || 'admin'
const TEST_PASSWORD = process.env.TEST_PASSWORD || '123456'

test.describe('用户管理测试', () => {
  test.beforeEach(async ({ page }) => {
    // 先登录
    await page.goto('/login')
    await page.getByPlaceholder('用户名').fill(TEST_USERNAME)
    await page.getByPlaceholder('密码').fill(TEST_PASSWORD)
    await page.getByRole('button', { name: '登录' }).click()

    // 等待登录成功
    await page.waitForURL(/^(?!.*\/login).*$/, { timeout: 15000 })

    // 进入用户管理页面
    await page.goto('/user')
    await page.waitForLoadState('networkidle')
  })

  test('用户管理页面正确显示', async ({ page }) => {
    // 验证页面元素
    await expect(page.getByText('新增用户')).toBeVisible()
    await expect(page.getByText('刷新列表')).toBeVisible()

    // 验证表格存在
    await expect(page.locator('.el-table')).toBeVisible()
  })

  test('搜索功能正常工作', async ({ page }) => {
    // 输入搜索关键词
    const searchInput = page.getByPlaceholder('请输入用户名')
    if (await searchInput.isVisible()) {
      await searchInput.fill('admin')

      // 点击搜索
      await page.getByRole('button', { name: '搜索' }).click()
      await page.waitForTimeout(1000)

      // 验证表格中包含 admin
      await expect(page.locator('.el-table')).toContainText('admin')
    }
  })

  test('重置按钮清空搜索条件', async ({ page }) => {
    // 输入搜索关键词
    const searchInput = page.getByPlaceholder('请输入用户名')
    if (await searchInput.isVisible()) {
      await searchInput.fill('test')

      // 点击重置
      await page.getByRole('button', { name: '重置' }).click()
      await page.waitForTimeout(500)

      // 验证搜索框被清空
      await expect(searchInput).toHaveValue('')
    }
  })

  test('新增用户弹窗可以打开', async ({ page }) => {
    // 点击新增用户
    await page.getByRole('button', { name: '新增用户' }).click()

    // 验证弹窗显示
    await expect(page.getByRole('dialog')).toBeVisible()
    await expect(page.locator('.el-dialog__title')).toContainText(/新增用户|编辑用户/)
  })

  test('新增用户表单验证', async ({ page }) => {
    // 打开新增弹窗
    await page.getByRole('button', { name: '新增用户' }).click()
    await expect(page.getByRole('dialog')).toBeVisible()

    // 直接点击确定，触发验证
    await page.getByRole('button', { name: '确定' }).click()
    await page.waitForTimeout(500)

    // 验证表单验证信息
    // 根据实际的验证消息调整
    await expect(page.getByRole('dialog')).toBeVisible()
  })

  test('新增用户弹窗可以关闭', async ({ page }) => {
    // 打开新增弹窗
    await page.getByRole('button', { name: '新增用户' }).click()
    await expect(page.getByRole('dialog')).toBeVisible()

    // 点击取消
    await page.getByRole('button', { name: '取消' }).click()

    // 验证弹窗关闭
    await expect(page.getByRole('dialog')).not.toBeVisible()
  })

  test('刷新列表功能正常', async ({ page }) => {
    // 点击刷新列表
    await page.getByRole('button', { name: '刷新列表' }).click()

    // 等待加载完成
    await page.waitForTimeout(1000)

    // 验证表格仍然存在
    await expect(page.locator('.el-table')).toBeVisible()
  })

  test('角色筛选功能正常', async ({ page }) => {
    // 查找角色选择器
    const roleSelect = page
      .locator('.el-select')
      .filter({ hasText: /角色|请选择角色/ })
      .first()
    if (await roleSelect.isVisible()) {
      await roleSelect.click()
      await page.waitForTimeout(300)

      // 选择管理员
      const adminOption = page.getByRole('option', { name: '管理员' })
      if (await adminOption.isVisible()) {
        await adminOption.click()
        await page.waitForTimeout(500)
      }
    }
  })

  test('分页功能存在', async ({ page }) => {
    // 验证分页组件存在
    await expect(page.locator('.el-pagination')).toBeVisible()
  })

  test('表格显示用户信息', async ({ page }) => {
    // 等待表格数据加载
    await page.waitForTimeout(1000)

    // 验证表格列标题
    await expect(page.locator('.el-table')).toContainText('用户名')
    await expect(page.locator('.el-table')).toContainText('角色')
  })
})