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

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

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

// 生成唯一的测试机器ID
const generateMachineId = () => `TEST_${Date.now()}`

// data-id 选择器辅助函数
const byDataId = (id: string) => `[data-id="${id}"]`

test.describe('机器管理 CRUD 测试', () => {
  // 登录辅助函数
  async function login(page: Page) {
    await page.goto('/login')
    await page.evaluate(() => {
      localStorage.clear()
      document.cookie.split(';').forEach((c) => {
        document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/')
      })
    })
    await page.reload()

    await page.getByPlaceholder('请输入用户名').fill(TEST_USERNAME)
    await page.getByPlaceholder('请输入密码').fill(TEST_PASSWORD)
    await page.getByRole('button', { name: '登 录' }).click()
    await expect(page).not.toHaveURL(/\/login/, { timeout: 15000 })
  }

  test('机器管理页面正确显示', async ({ page }) => {
    await login(page)
    await page.goto('/machine')

    // 验证页面元素
    await expect(page.locator(byDataId('btn-add-machine'))).toBeVisible()
    await expect(page.locator(byDataId('btn-refresh'))).toBeVisible()
    await expect(page.locator(byDataId('machine-table'))).toBeVisible()

    // 验证表头
    await expect(page.getByText('机器ID')).toBeVisible()
    await expect(page.getByText('名称')).toBeVisible()
    await expect(page.getByText('位置')).toBeVisible()
  })

  test('刷新列表功能', async ({ page }) => {
    await login(page)
    await page.goto('/machine')

    // 等待表格加载
    await expect(page.locator(byDataId('machine-table'))).toBeVisible()

    // 点击刷新按钮
    await page.locator(byDataId('btn-refresh')).click()

    // 验证加载状态（可能很快消失）
    await page.waitForTimeout(500)

    // 表格应该仍然可见
    await expect(page.locator(byDataId('machine-table'))).toBeVisible()
  })

  test('新增机器完整流程', async ({ page }) => {
    await login(page)
    await page.goto('/machine')

    const machineId = generateMachineId()
    const machineName = `测试机器_${Date.now()}`

    // 点击新增按钮
    await page.locator(byDataId('btn-add-machine')).click()

    // 验证弹窗打开
    await expect(page.locator(byDataId('dialog-machine'))).toBeVisible()
    await expect(page.locator('.el-dialog__title')).toContainText('新增机器')

    // 填写表单
    await page.getByPlaceholder('请输入机器ID').fill(machineId)
    await page.getByPlaceholder('请输入名称').fill(machineName)
    await page.getByPlaceholder('请输入位置').fill('测试位置')
    await page.getByPlaceholder('请输入描述').fill('E2E测试创建的机器')

    // 等待提交按钮可用后点击
    const submitBtn = page.locator(byDataId('btn-submit'))
    await expect(submitBtn).toBeEnabled()
    await submitBtn.click()

    // 验证弹窗关闭
    await expect(page.locator(byDataId('dialog-machine'))).not.toBeVisible({ timeout: 5000 })

    // 验证新机器出现在列表中
    await expect(page.getByText(machineId)).toBeVisible({ timeout: 5000 })
    await expect(page.getByText(machineName)).toBeVisible()
  })

  test('编辑机器功能', async ({ page }) => {
    await login(page)
    await page.goto('/machine')

    // 等待表格加载
    await expect(page.locator(byDataId('machine-table'))).toBeVisible()
    await page.waitForTimeout(1000)

    // 点击第一行的名称链接
    const firstNameLink = page.locator('[data-id^="link-edit-"]').first()

    // 检查是否有数据可编辑
    const linkCount = await firstNameLink.count()
    if (linkCount === 0) {
      test.skip()
      return
    }

    await firstNameLink.click()

    // 验证弹窗打开
    await expect(page.locator(byDataId('dialog-machine'))).toBeVisible()
    await expect(page.locator('.el-dialog__title')).toContainText('编辑机器')

    // 修改名称
    const nameInput = page.getByPlaceholder('请输入名称')
    await nameInput.clear()
    await nameInput.fill(`编辑测试_${Date.now()}`)

    // 等待提交按钮可用后点击
    const submitBtn = page.locator(byDataId('btn-submit'))
    await expect(submitBtn).toBeEnabled()
    await submitBtn.click()

    // 验证弹窗关闭
    await expect(page.locator(byDataId('dialog-machine'))).not.toBeVisible({ timeout: 15000 })
  })

  test('删除机器功能', async ({ page }) => {
    await login(page)
    await page.goto('/machine')

    // 先创建一个测试机器用于删除
    const machineId = `DEL_${Date.now()}`
    const machineName = `待删除机器_${Date.now()}`

    // 新增机器
    await page.locator(byDataId('btn-add-machine')).click()
    await page.getByPlaceholder('请输入机器ID').fill(machineId)
    await page.getByPlaceholder('请输入名称').fill(machineName)

    // 等待提交按钮可用后点击
    const submitBtn = page.locator(byDataId('btn-submit'))
    await expect(submitBtn).toBeEnabled()
    await submitBtn.click()

    // 等待弹窗关闭（更可靠的成功指示）
    await expect(page.locator(byDataId('dialog-machine'))).not.toBeVisible({ timeout: 15000 })

    // 等待新机器出现在列表中
    await expect(page.getByText(machineId)).toBeVisible({ timeout: 5000 })

    // 找到刚创建的机器的删除按钮
    await page.locator(byDataId(`btn-delete-${machineId}`)).click()

    // 确认删除对话框
    await expect(page.locator('.el-message-box')).toBeVisible()
    await page.locator('.el-message-box').getByRole('button', { name: '确定' }).click()

    // 等待成功消息
    await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 10000 })

    // 验证机器从列表中消失
    await expect(page.getByText(machineId)).not.toBeVisible({ timeout: 5000 })
  })

  test('新增机器表单验证', async ({ page }) => {
    await login(page)
    await page.goto('/machine')

    // 点击新增按钮
    await page.locator(byDataId('btn-add-machine')).click()
    await expect(page.locator(byDataId('dialog-machine'))).toBeVisible()

    // 直接点击确定，不填写任何内容
    await page.locator(byDataId('btn-submit')).click()

    // 验证显示验证错误
    await expect(page.getByText('请输入机器ID')).toBeVisible()
    await expect(page.getByText('请输入名称')).toBeVisible()
  })

  test('取消新增机器', async ({ page }) => {
    await login(page)
    await page.goto('/machine')

    // 点击新增按钮
    await page.locator(byDataId('btn-add-machine')).click()
    await expect(page.locator(byDataId('dialog-machine'))).toBeVisible()

    // 填写部分内容
    await page.getByPlaceholder('请输入机器ID').fill('TEST_CANCEL')

    // 点击取消
    await page.locator(byDataId('btn-cancel')).click()

    // 验证弹窗关闭
    await expect(page.locator(byDataId('dialog-machine'))).not.toBeVisible()
  })

  test('从侧边栏导航到机器管理', async ({ page }) => {
    await login(page)

    // 点击侧边栏机器管理菜单项
    await page.getByRole('menuitem', { name: '机器管理' }).click()

    // 验证跳转到机器管理页面
    await expect(page).toHaveURL(/\/machine/)
    await expect(page.locator(byDataId('btn-add-machine'))).toBeVisible()
  })
})