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

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

test.describe('Camera Management E2E Tests', () => {
  const username = process.env.TEST_USERNAME || 'admin'
  const password = process.env.TEST_PASSWORD || '123456'

  async function login(page: any) {
    await page.goto('/login')
    await page.getByPlaceholder('用户名').fill(username)
    await page.getByPlaceholder('密码').fill(password)
    await page.getByRole('button', { name: '登录' }).click()
    await expect(page).not.toHaveURL(/\/login/, { timeout: 10000 })
  }

  test.describe('Camera List Page', () => {
    test('should display camera management page', async ({ page }) => {
      await login(page)
      await page.goto('/camera')

      await expect(page.getByRole('button', { name: '新增' })).toBeVisible()
      await expect(page.locator('.el-table')).toBeVisible()
    })

    test('should have correct table columns', async ({ page }) => {
      await login(page)
      await page.goto('/camera')

      // 验证表头列 - 使用 thead 来区分
      await expect(page.locator('thead').getByText('摄像头ID')).toBeVisible()
      await expect(page.locator('thead').getByText('名称')).toBeVisible()
      await expect(page.locator('thead').getByText('IP地址')).toBeVisible()
      await expect(page.locator('thead').getByText('所属机器')).toBeVisible()
      await expect(page.locator('thead').getByText('状态')).toBeVisible()
    })

    test('should have machine filter', async ({ page }) => {
      await login(page)
      await page.goto('/camera')

      // 机器筛选下拉框
      await expect(page.locator('.el-select').first()).toBeVisible()
    })
  })

  test.describe('Add Camera Dialog', () => {
    test('should open add dialog when clicking add button', async ({ page }) => {
      await login(page)
      await page.goto('/camera')

      await page.getByRole('button', { name: '新增' }).click()

      await expect(page.getByRole('dialog')).toBeVisible()
      // 验证弹窗标题
      await expect(page.locator('.el-dialog__title')).toContainText('新增')
    })

    test('should validate required fields', async ({ page }) => {
      await login(page)
      await page.goto('/camera')

      await page.getByRole('button', { name: '新增' }).click()
      await expect(page.getByRole('dialog')).toBeVisible()

      // 等待弹窗完全加载
      await page.waitForTimeout(500)

      await page.getByRole('dialog').getByRole('button', { name: '确定' }).click()

      // 等待表单验证
      await page.waitForTimeout(500)

      // 验证弹窗仍然打开（因为验证失败）
      await expect(page.getByRole('dialog')).toBeVisible()
    })

    test('should close dialog when clicking cancel', async ({ page }) => {
      await login(page)
      await page.goto('/camera')

      await page.getByRole('button', { name: '新增' }).click()
      await expect(page.getByRole('dialog')).toBeVisible()

      await page.getByRole('dialog').getByRole('button', { name: '取消' }).click()
      await expect(page.getByRole('dialog')).not.toBeVisible()
    })
  })

  test.describe('Navigation', () => {
    test('should have camera menu item in sidebar', async ({ page }) => {
      await login(page)

      // 查找侧边栏中的摄像头管理菜单
      await expect(page.locator('.layout__nav').getByText('摄像头管理')).toBeVisible()
    })

    test('should navigate to camera page from sidebar', async ({ page }) => {
      await login(page)

      // 点击侧边栏摄像头管理菜单
      await page.locator('.layout__nav').getByText('摄像头管理').click()
      await expect(page).toHaveURL(/\/camera/)
    })
  })
})