tg-live-game-web/tests/e2e/live-stream.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'

// 登录辅助函数
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.describe('LiveStream 管理 - 搜索功能测试', () => {
  /**
   * 按 Stream SN 搜索
   */
  test('按 Stream SN 搜索 - 验证参数传递', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 设置 API 拦截来验证参数
    let requestBody: any = null
    await page.route('**/admin/live-stream/list', async (route) => {
      const request = route.request()
      if (request.method() === 'POST') {
        requestBody = request.postDataJSON()
      }
      await route.continue()
    })

    // 在 stream sn 搜索框输入
    await page.getByPlaceholder('stream sn').fill('stream_123')

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

    // 验证请求参数中包含 streamSn
    expect(requestBody).not.toBeNull()
    expect(requestBody.streamSn).toBe('stream_123')
  })

  /**
   * 按 Name 搜索
   */
  test('按 Name 搜索 - 验证参数传递', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 设置 API 拦截
    let requestBody: any = null
    await page.route('**/admin/live-stream/list', async (route) => {
      const request = route.request()
      if (request.method() === 'POST') {
        requestBody = request.postDataJSON()
      }
      await route.continue()
    })

    // 在 name 搜索框输入
    await page.getByPlaceholder('名称').fill('测试流')

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

    // 验证请求参数中包含 name
    expect(requestBody).not.toBeNull()
    expect(requestBody.name).toBe('测试流')
  })

  /**
   * 按 LSS 搜索
   */
  test('按 LSS 搜索 - 验证参数传递', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 设置 API 拦截
    let requestBody: any = null
    await page.route('**/admin/live-stream/list', async (route) => {
      const request = route.request()
      if (request.method() === 'POST') {
        requestBody = request.postDataJSON()
      }
      await route.continue()
    })

    // 点击 LSS 下拉框
    await page.locator('.el-select').filter({ hasText: 'LSS' }).click()
    await page.waitForTimeout(300)

    // 选择第一个 LSS 选项（如果有）
    const firstOption = page.locator('.el-select-dropdown__item').first()
    if (await firstOption.isVisible()) {
      const lssValue = await firstOption.textContent()
      await firstOption.click()

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

      // 验证请求参数中包含 lssId
      expect(requestBody).not.toBeNull()
      expect(requestBody.lssId).toBe(lssValue?.trim())
    }
  })

  /**
   * 按设备ID搜索
   */
  test('按设备ID搜索 - 验证参数传递', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 设置 API 拦截
    let requestBody: any = null
    await page.route('**/admin/live-stream/list', async (route) => {
      const request = route.request()
      if (request.method() === 'POST') {
        requestBody = request.postDataJSON()
      }
      await route.continue()
    })

    // 在设备ID搜索框输入
    await page.getByPlaceholder('设备ID').fill('EEE1')

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

    // 验证请求参数中包含 cameraId
    expect(requestBody).not.toBeNull()
    expect(requestBody.cameraId).toBe('EEE1')
  })

  /**
   * 组合搜索 - 所有字段
   */
  test('组合搜索 - 多字段同时搜索', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 设置 API 拦截
    let requestBody: any = null
    await page.route('**/admin/live-stream/list', async (route) => {
      const request = route.request()
      if (request.method() === 'POST') {
        requestBody = request.postDataJSON()
      }
      await route.continue()
    })

    // 填入所有搜索条件
    await page.getByPlaceholder('stream sn').fill('stream_001')
    await page.getByPlaceholder('名称').fill('测试')
    await page.getByPlaceholder('设备ID').fill('EEE1')

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

    // 验证请求参数包含所有字段
    expect(requestBody).not.toBeNull()
    expect(requestBody.streamSn).toBe('stream_001')
    expect(requestBody.name).toBe('测试')
    expect(requestBody.cameraId).toBe('EEE1')
  })

  /**
   * 重置搜索条件
   */
  test('重置搜索条件 - 清空所有输入', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 填入搜索条件
    await page.getByPlaceholder('stream sn').fill('test-sn')
    await page.getByPlaceholder('名称').fill('test-name')
    await page.getByPlaceholder('设备ID').fill('test-device')

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

    // 验证搜索条件已清空
    await expect(page.getByPlaceholder('stream sn')).toHaveValue('')
    await expect(page.getByPlaceholder('name')).toHaveValue('')
    await expect(page.getByPlaceholder('设备ID')).toHaveValue('')
  })
})

test.describe('LiveStream 管理 - BUG 回归测试', () => {
  /**
   * BUG 回归测试：按设备ID搜索应该只返回匹配的记录
   *
   * 问题描述：
   * - 前端已修复：searchForm.cameraId 参数现在会正确传递给 API
   * - 后端待修复：API 目前未实现 cameraId 过滤，返回所有数据
   *
   * 预期行为：
   * - 搜索设备ID "EEE1" 应该只返回 1 条记录
   * - 该记录的设备ID列应该显示 "EEE1"
   *
   * 当前状态：测试会失败，等待后端实现过滤
   */
  test('BUG: 按设备ID搜索 EEE1 应该只返回 1 条匹配记录', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })
    await page.waitForTimeout(500)

    // 在设备ID搜索框输入 "EEE1"
    await page.getByPlaceholder('设备ID').fill('EEE1')

    // 点击查询按钮
    await page.getByRole('button', { name: '查询' }).click()

    // 等待搜索结果加载
    await page.waitForTimeout(1000)

    // 验证：应该只有 1 条记录
    const tableRows = page.locator('tbody tr')
    const rowCount = await tableRows.count()
    expect(rowCount).toBe(1)

    // 验证：该记录的设备ID应该是 "EEE1"
    const firstRowDeviceId = await tableRows.first().locator('td').nth(3).textContent()
    expect(firstRowDeviceId?.trim()).toBe('EEE1')

    // 验证：分页显示 Total 1
    await expect(page.locator('.el-pagination')).toContainText('Total 1')
  })
})

test.describe('LiveStream 管理 - 页面功能测试', () => {
  test('LiveStream 管理页面正确显示', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 验证页面标题
    await expect(page.locator('text=LiveStream 管理')).toBeVisible()

    // 验证搜索表单元素
    await expect(page.getByPlaceholder('stream sn')).toBeVisible()
    await expect(page.getByPlaceholder('name')).toBeVisible()
    await expect(page.getByPlaceholder('设备ID')).toBeVisible()
    await expect(page.getByRole('button', { name: '查询' })).toBeVisible()
    await expect(page.getByRole('button', { name: '重置' })).toBeVisible()
    await expect(page.getByRole('button', { name: '新增' })).toBeVisible()

    // 验证表头
    await expect(page.locator('th:has-text("Stream SN"), th:has-text("stream sn")')).toBeVisible()
    await expect(page.locator('th:has-text("Name"), th:has-text("名称")')).toBeVisible()
    await expect(page.locator('th:has-text("LSS")')).toBeVisible()
    await expect(page.locator('th:has-text("Device ID"), th:has-text("设备ID")')).toBeVisible()
  })

  test('打开新增 LiveStream 抽屉', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 点击新增按钮
    await page.getByRole('button', { name: '新增' }).click()

    // 验证抽屉打开
    const drawer = page.locator('.el-drawer').filter({ hasText: '新增 Live Stream' })
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 验证表单元素
    await expect(drawer.locator('label:has-text("名称")')).toBeVisible()
    await expect(drawer.locator('label:has-text("LSS 节点")')).toBeVisible()
    await expect(drawer.locator('label:has-text("摄像头")')).toBeVisible()

    // 关闭抽屉
    await drawer.getByRole('button', { name: '取消' }).click()
    await expect(drawer).not.toBeVisible({ timeout: 5000 })
  })

  test('分页功能正常', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForTimeout(1000)

    // 验证分页组件存在
    const pagination = page.locator('.el-pagination')
    await expect(pagination).toBeVisible()

    // 验证 Total 显示
    await expect(pagination.locator('text=/Total \\d+/')).toBeVisible()
  })

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

    // 点击侧边栏 LiveStream 管理菜单项
    await page.getByText('LiveStream 管理').first().click()

    // 验证跳转到 LiveStream 管理页面
    await expect(page).toHaveURL(/\/live-stream-manage\/list/)
    await expect(page.locator('text=LiveStream 管理')).toBeVisible()
  })
})

test.describe('LiveStream 管理 - CodeEditor 组件测试 (Bash模式)', () => {
  /**
   * 测试 CodeEditor Bash 模式 - 头部显示
   */
  test('CodeEditor Bash模式 - 验证头部显示Bash Script标签和复制按钮', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await expect(viewLink).toBeVisible({ timeout: 5000 })
    await viewLink.click()

    // 等待命令模板弹窗打开
    const dialog = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 验证 CodeEditor 头部显示 Bash Script 标签
    const codeEditor = dialog.locator('.code-editor')
    await expect(codeEditor).toBeVisible()
    await expect(codeEditor.locator('.editor-header')).toBeVisible()
    await expect(codeEditor.locator('.file-type')).toContainText('Bash Script')

    // 验证 Copy 按钮存在
    await expect(codeEditor.locator('button:has-text("复制"), button:has-text("Copy")')).toBeVisible()

    // 验证 Bash 模式没有格式化按钮
    await expect(codeEditor.locator('button:has-text("格式化")')).not.toBeVisible()
  })

  /**
   * 测试 CodeEditor Bash 模式 - 复制功能
   */
  test('CodeEditor Bash模式 - 复制按钮功能', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await viewLink.click()

    // 等待命令模板弹窗打开
    const dialog = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 点击复制按钮
    const copyButton = dialog.locator('.code-editor button:has-text("复制"), .code-editor button:has-text("Copy")')
    await copyButton.click()

    // 验证复制成功提示
    await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 3000 })
  })

  /**
   * 测试 CodeEditor Bash 模式 - 编辑器可编辑
   */
  test('CodeEditor Bash模式 - 编辑器可编辑', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await viewLink.click()

    // 等待命令模板弹窗打开
    const dialog = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 验证编辑器存在并可以编辑
    const codeEditor = dialog.locator('.code-editor')
    const editorContent = codeEditor.locator('.cm-content')
    await expect(editorContent).toBeVisible()

    // 尝试在编辑器中输入内容
    await editorContent.click()
    await page.keyboard.press('End')
    await page.keyboard.type('\n# Test comment')

    // 验证内容已添加
    await expect(editorContent).toContainText('# Test comment')
  })

  /**
   * 测试 CodeEditor Bash 模式 - 更新按钮存在 (Bug #4628: "关闭" changed to "取消", Bug #4629: dialog changed to drawer)
   */
  test('CodeEditor Bash模式 - 抽屉包含取消和更新按钮', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await viewLink.click()

    // 等待命令模板弹窗打开
    const dialog = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 验证关闭和更新按钮存在
    await expect(dialog.locator('button:has-text("取消"), button:has-text("Cancel")')).toBeVisible()
    await expect(dialog.locator('button:has-text("更新"), button:has-text("Update")')).toBeVisible()

    // 点击关闭按钮
    await dialog.locator('button:has-text("取消"), button:has-text("Cancel")').click()
    await expect(dialog).not.toBeVisible({ timeout: 5000 })
  })

  /**
   * 测试 CodeEditor Bash 模式 - 图标颜色正确（绿色）
   */
  test('CodeEditor Bash模式 - 图标显示为绿色', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await viewLink.click()

    // 等待命令模板弹窗打开
    const dialog = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 验证图标有 icon-bash 类（对应绿色）
    const codeEditor = dialog.locator('.code-editor')
    await expect(codeEditor.locator('.icon-bash')).toBeVisible()
  })

  /**
   * 测试 CodeEditor Bash 模式 - 更新命令模板并验证保存成功
   */
  test('CodeEditor Bash模式 - 更新命令模板并验证保存成功', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await viewLink.click()

    // 等待命令模板弹窗打开
    const dialog = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 获取编辑器
    const codeEditor = dialog.locator('.code-editor')
    const editorContent = codeEditor.locator('.cm-content')

    // 生成唯一标识用于验证更新
    const timestamp = Date.now()
    const testComment = `# Test update at ${timestamp}`

    // 在编辑器末尾添加测试注释
    await editorContent.click()
    await page.keyboard.press('Meta+End')
    await page.keyboard.type(`\n${testComment}`)

    // 点击更新按钮
    const updateButton = dialog.locator('button:has-text("更新"), button:has-text("Update")')
    await updateButton.click()

    // 等待更新成功提示
    await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 })

    // 等待弹窗关闭
    await expect(dialog).not.toBeVisible({ timeout: 5000 })

    // 重新打开命令模板弹窗验证内容已保存
    await page.waitForTimeout(500)
    await viewLink.click()

    // 等待弹窗重新打开
    const dialogReopened = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialogReopened).toBeVisible({ timeout: 5000 })

    // 验证内容包含我们添加的测试注释
    const editorContentReopened = dialogReopened.locator('.cm-content')
    await expect(editorContentReopened).toContainText(timestamp.toString())
  })

  /**
   * 测试 CodeEditor Bash 模式 - 修改全部内容并验证保存
   */
  test('CodeEditor Bash模式 - 替换全部命令模板并验证保存', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await viewLink.click()

    // 等待命令模板弹窗打开
    const dialog = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 获取编辑器
    const codeEditor = dialog.locator('.code-editor')
    const editorContent = codeEditor.locator('.cm-content')

    // 保存原始内容以便恢复
    const originalContent = await editorContent.textContent()

    // 生成唯一标识用于验证更新
    const timestamp = Date.now()
    const newScript = `#!/bin/bash
# Updated script at ${timestamp}
echo "Test script"
ffmpeg -i {RTSP_URL} -c copy output.mp4`

    // 全选并替换内容
    await editorContent.click()
    await page.keyboard.press('Meta+a')
    await page.keyboard.type(newScript)

    // 点击更新按钮
    const updateButton = dialog.locator('button:has-text("更新"), button:has-text("Update")')
    await updateButton.click()

    // 等待更新成功提示
    await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 })

    // 等待弹窗关闭
    await expect(dialog).not.toBeVisible({ timeout: 5000 })

    // 重新打开验证内容
    await page.waitForTimeout(500)
    await viewLink.click()

    const dialogReopened = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(dialogReopened).toBeVisible({ timeout: 5000 })

    const editorContentReopened = dialogReopened.locator('.cm-content')
    await expect(editorContentReopened).toContainText(`Updated script at ${timestamp}`)
    await expect(editorContentReopened).toContainText('echo "Test script"')

    // 恢复原始内容
    if (originalContent) {
      await editorContentReopened.click()
      await page.keyboard.press('Meta+a')
      await page.keyboard.type(originalContent)
      await dialogReopened.locator('button:has-text("更新"), button:has-text("Update")').click()
      await page.waitForTimeout(1000)
    }
  })
})

test.describe('LiveStream 管理 - 从 LSS 页面创建流程', () => {
  /**
   * 测试带 action=create 参数时自动打开新增抽屉
   */
  test('带 action=create 参数访问时自动打开新增抽屉', async ({ page }) => {
    await login(page)

    // 直接导航到带有 action=create 参数的页面
    await page.goto('/live-stream?action=create')

    // 等待页面加载
    await page.waitForTimeout(1000)

    // 验证新增抽屉已打开
    const drawer = page.locator('.el-drawer').filter({ hasText: '新增 Live Stream' })
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 验证抽屉标题
    await expect(drawer.locator('.drawer-header')).toContainText('新增 Live Stream')

    // 验证表单字段存在
    await expect(drawer.locator('label:has-text("名称")')).toBeVisible()
    await expect(drawer.locator('label:has-text("LSS 节点")')).toBeVisible()
    await expect(drawer.locator('label:has-text("摄像头")')).toBeVisible()
  })

  /**
   * 测试带 cameraId 和 action=create 参数时自动填充摄像头信息
   */
  test('带 cameraId 和 action=create 参数访问时尝试填充摄像头信息', async ({ page }) => {
    await login(page)

    // 模拟 API 响应，返回带有 lssId 的摄像头数据
    await page.route('**/admin/camera/list*', async (route) => {
      const request = route.request()
      const url = request.url()

      // 检查是否是查询特定 cameraId 的请求
      if (url.includes('cameraId=TEST_CAM_001')) {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            errCode: 0,
            data: {
              list: [
                {
                  id: 1,
                  cameraId: 'TEST_CAM_001',
                  cameraName: '测试摄像头',
                  lssId: 'LSS_001',
                  status: 'active'
                }
              ],
              total: 1
            }
          })
        })
      } else {
        await route.continue()
      }
    })

    // 导航到带有 cameraId 和 action=create 参数的页面
    await page.goto('/live-stream?cameraId=TEST_CAM_001&action=create')

    // 等待页面和抽屉加载
    await page.waitForTimeout(1500)

    // 验证新增抽屉已打开
    const drawer = page.locator('.el-drawer').filter({ hasText: '新增 Live Stream' })
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 等待表单自动填充
    await page.waitForTimeout(1000)

    // 验证抽屉中的表单元素可见（LSS 节点选择器）
    // 由于是 mock 数据，这里主要验证流程不会出错，抽屉能正常打开
    await expect(drawer.locator('label:has-text("LSS")')).toBeVisible()
  })

  /**
   * 测试从 LSS 页面点击未创建 Stream 的摄像头时显示提示对话框
   * 注：这个测试需要在 LSS 页面进行，但这里测试的是对话框确认后的跳转结果
   */
  test('取消新增抽屉后返回列表页面', async ({ page }) => {
    await login(page)

    // 导航到创建页面
    await page.goto('/live-stream?action=create')

    // 等待抽屉打开
    const drawer = page.locator('.el-drawer').filter({ hasText: '新增 Live Stream' })
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 点击取消按钮
    await drawer.locator('button:has-text("取消"), button:has-text("Cancel")').click()

    // 验证抽屉关闭
    await expect(drawer).not.toBeVisible({ timeout: 3000 })

    // 验证仍在 live-stream 页面
    await expect(page).toHaveURL(/\/live-stream-manage\/list/)
  })

  /**
   * 测试 URL 参数中的 cameraId 同时作为搜索条件
   */
  test('cameraId 参数同时作为搜索条件', async ({ page }) => {
    await login(page)

    // 设置 API 拦截来验证参数
    let listRequestBody: any = null
    await page.route('**/admin/live-stream/list', async (route) => {
      const request = route.request()
      if (request.method() === 'POST') {
        listRequestBody = request.postDataJSON()
      }
      await route.continue()
    })

    // 导航到带有 cameraId 参数的页面（不带 action=create）
    await page.goto('/live-stream?cameraId=CAM_SEARCH_TEST')

    // 等待列表请求完成
    await page.waitForTimeout(1500)

    // 验证搜索框中已填入 cameraId
    const cameraIdInput = page.getByPlaceholder('设备ID')
    await expect(cameraIdInput).toHaveValue('CAM_SEARCH_TEST')

    // 验证 API 请求中包含 cameraId
    expect(listRequestBody).not.toBeNull()
    expect(listRequestBody.cameraId).toBe('CAM_SEARCH_TEST')
  })
})

test.describe('LiveStream 管理 - Bug修复验证测试', () => {
  // 登录辅助函数
  async function loginHelper(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 })
  }

  /**
   * Bug #4627: 启动时间和关闭时间显示用户当前时区
   */
  test('Bug #4627 - 时间列正确格式化显示', async ({ page }) => {
    await loginHelper(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 验证启动时间列存在
    await expect(page.locator('th:has-text("启动时间")')).toBeVisible()
    await expect(page.locator('th:has-text("关闭时间")')).toBeVisible()

    // 验证时间格式正确 (YYYY-MM-DD HH:mm:ss)
    const startedAtCell = page.locator('tbody tr').first().locator('td').nth(7)
    const startedAtText = await startedAtCell.textContent()

    // 时间格式应该是 YYYY-MM-DD HH:mm:ss 或 "-"
    if (startedAtText && startedAtText.trim() !== '-') {
      expect(startedAtText).toMatch(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/)
    }
  })

  /**
   * Bug #4628: 命令模板按钮文字从"关闭"改为"取消"
   */
  test('Bug #4628 - 命令模板抽屉按钮显示"取消"而非"关闭"', async ({ page }) => {
    await loginHelper(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await expect(viewLink).toBeVisible({ timeout: 5000 })
    await viewLink.click()

    // 等待命令模板抽屉打开
    const drawer = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 验证有"取消"按钮而非"关闭"按钮
    await expect(drawer.locator('button:has-text("取消")')).toBeVisible()
    await expect(drawer.locator('button:has-text("关闭")')).not.toBeVisible()
  })

  /**
   * Bug #4629: 命令模板使用右到左抽屉显示
   */
  test('Bug #4629 - 命令模板使用抽屉而非对话框', async ({ page }) => {
    await loginHelper(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 点击命令模板列的"查看"链接
    const viewLink = page.locator('tbody tr').first().locator('a:has-text("查看"), a:has-text("View")')
    await expect(viewLink).toBeVisible({ timeout: 5000 })
    await viewLink.click()

    // 等待命令模板抽屉打开
    const drawer = page.locator('.el-drawer').filter({ hasText: '命令模板' })
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 验证是抽屉（el-drawer）而非对话框（el-dialog）
    const dialog = page.locator('.el-dialog').filter({ hasText: '命令模板' })
    await expect(dialog).not.toBeVisible()
  })

  /**
   * Bug #4630: 搜索框placeholder从"name"改为"名称"
   */
  test('Bug #4630 - 搜索框placeholder显示"名称"而非"name"', async ({ page }) => {
    await loginHelper(page)
    await page.goto('/live-stream-manage/list')

    // 验证名称搜索框的placeholder是"名称"
    const nameInput = page.getByPlaceholder('名称')
    await expect(nameInput).toBeVisible()

    // 验证没有placeholder为"name"的输入框
    const nameInputEnglish = page.getByPlaceholder('name')
    await expect(nameInputEnglish).not.toBeVisible()
  })

  /**
   * Bug #4541 (通用): 重置按钮使用灰底白字
   */
  test('Bug #4541 - 重置按钮使用灰底白字', async ({ page }) => {
    await loginHelper(page)
    await page.goto('/live-stream-manage/list')

    // 获取重置按钮
    const resetButton = page.getByRole('button', { name: '重置' })
    await expect(resetButton).toBeVisible()

    // 验证按钮有 el-button--info 类（灰色按钮）
    await expect(resetButton).toHaveClass(/el-button--info/)
  })
})

test.describe('LiveStream 管理 - 播放功能与 PTZ 控制测试', () => {
  /**
   * 测试播放按钮打开抽屉并加载 PTZ 预置位和能力信息
   */
  test('点击播放按钮打开抽屉并加载 PTZ 数据', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // 记录 API 调用
    let presetListCalled = false
    let capabilitiesCalled = false
    let presetListCameraId = ''
    let capabilitiesCameraId = ''

    // 拦截 PTZ 预置位列表请求
    await page.route('**/camera/control/*/preset/list', async (route) => {
      presetListCalled = true
      const url = route.request().url()
      const match = url.match(/camera\/control\/([^/]+)\/preset\/list/)
      if (match) {
        presetListCameraId = match[1]
      }
      // Mock 返回预置位数据
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          code: 200,
          msg: 'success',
          data: [
            { id: '1', name: 'Preset 1' },
            { id: '2', name: 'Preset 2' }
          ]
        })
      })
    })

    // 拦截 PTZ 能力请求
    await page.route('**/camera/control/*/ptz/capabilities', async (route) => {
      capabilitiesCalled = true
      const url = route.request().url()
      const match = url.match(/camera\/control\/([^/]+)\/ptz\/capabilities/)
      if (match) {
        capabilitiesCameraId = match[1]
      }
      // Mock 返回能力数据
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          code: 200,
          msg: 'success',
          data: {
            maxPresetNum: 255,
            controlProtocol: {
              options: ['ISAPI'],
              current: 'ISAPI'
            },
            absoluteZoom: {
              min: 1,
              max: 30
            },
            support3DPosition: true,
            supportPtzLimits: true
          }
        })
      })
    })

    // 找到包含 cameraId 的行并点击播放按钮
    const rows = page.locator('tbody tr')
    const rowCount = await rows.count()

    // 找到有 cameraId 的行
    let targetRow = null
    for (let i = 0; i < rowCount; i++) {
      const row = rows.nth(i)
      const cameraIdCell = await row.locator('td').nth(3).textContent()
      if (cameraIdCell && cameraIdCell.trim() !== '-' && cameraIdCell.trim() !== '') {
        targetRow = row
        break
      }
    }

    if (targetRow) {
      // 点击播放按钮 (data-id="live-stream-play-btn")
      const playButton = targetRow.locator('[data-id="live-stream-play-btn"]')
      await expect(playButton).toBeVisible()
      await playButton.click()

      // 等待抽屉打开
      const drawer = page.locator('.el-drawer')
      await expect(drawer).toBeVisible({ timeout: 5000 })

      // 验证播放 tab 被选中
      const playTab = drawer.locator('.el-tabs__item').filter({ hasText: '播放' })
      await expect(playTab).toHaveClass(/is-active/)

      // 等待 API 调用完成
      await page.waitForTimeout(2000)

      // 验证 PTZ 预置位和能力 API 被调用
      expect(presetListCalled).toBe(true)
      expect(capabilitiesCalled).toBe(true)

      // 验证抽屉中显示 PTZ 控制面板
      await expect(drawer.locator('text=PTZ')).toBeVisible()

      // 验证抽屉中显示预置位面板
      await expect(drawer.locator('text=预置位')).toBeVisible()

      // 验证抽屉中显示摄像头信息面板
      await expect(drawer.locator('text=摄像头信息')).toBeVisible()
    }
  })

  /**
   * 测试 PTZ 方向控制按钮
   */
  test('PTZ 方向控制按钮存在且可交互', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // Mock PTZ API 响应
    await page.route('**/camera/control/*/preset/list', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ code: 200, msg: 'success', data: [] })
      })
    })

    await page.route('**/camera/control/*/ptz/capabilities', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ code: 200, msg: 'success', data: { maxPresetNum: 255 } })
      })
    })

    // 找到有 cameraId 的行并点击播放按钮
    const rows = page.locator('tbody tr')
    const rowCount = await rows.count()

    for (let i = 0; i < rowCount; i++) {
      const row = rows.nth(i)
      const cameraIdCell = await row.locator('td').nth(3).textContent()
      if (cameraIdCell && cameraIdCell.trim() !== '-' && cameraIdCell.trim() !== '') {
        const playButton = row.locator('[data-id="live-stream-play-btn"]')
        await playButton.click()
        break
      }
    }

    // 等待抽屉打开
    const drawer = page.locator('.el-drawer')
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 展开 PTZ 控制面板
    const ptzHeader = drawer.locator('.el-collapse-item__header').filter({ hasText: 'PTZ' })
    if (await ptzHeader.isVisible()) {
      // 验证 PTZ 控制面板
      const ptzGrid = drawer.locator('.ptz-grid')
      await expect(ptzGrid).toBeVisible()

      // 验证 9 个方向按钮存在
      const ptzButtons = drawer.locator('.ptz-btn')
      await expect(ptzButtons).toHaveCount(9)

      // 验证缩放按钮存在
      const zoomButtons = drawer.locator('.zoom-buttons button')
      await expect(zoomButtons).toHaveCount(2)

      // 验证速度滑块存在
      const speedSlider = drawer.locator('.speed-slider')
      await expect(speedSlider).toBeVisible()
    }
  })

  /**
   * 测试预置位列表显示
   */
  test('预置位列表正确显示', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // Mock PTZ API 响应 - 返回预置位列表
    await page.route('**/camera/control/*/preset/list', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          code: 200,
          msg: 'success',
          data: [
            { id: '1', name: '门口' },
            { id: '2', name: '窗户' },
            { id: '3', name: '走廊' }
          ]
        })
      })
    })

    await page.route('**/camera/control/*/ptz/capabilities', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ code: 200, msg: 'success', data: { maxPresetNum: 255 } })
      })
    })

    // 找到有 cameraId 的行并点击播放按钮
    const rows = page.locator('tbody tr')
    const rowCount = await rows.count()

    for (let i = 0; i < rowCount; i++) {
      const row = rows.nth(i)
      const cameraIdCell = await row.locator('td').nth(3).textContent()
      if (cameraIdCell && cameraIdCell.trim() !== '-' && cameraIdCell.trim() !== '') {
        const playButton = row.locator('[data-id="live-stream-play-btn"]')
        await playButton.click()
        break
      }
    }

    // 等待抽屉打开
    const drawer = page.locator('.el-drawer')
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 等待预置位加载
    await page.waitForTimeout(1500)

    // 展开预置位面板
    const presetHeader = drawer.locator('.el-collapse-item__header').filter({ hasText: '预置位' })
    await expect(presetHeader).toBeVisible()

    // 验证预置位列表中有 3 个项目
    const presetItems = drawer.locator('.preset-item')
    await expect(presetItems).toHaveCount(3)

    // 验证预置位名称显示正确
    await expect(drawer.locator('.preset-name:has-text("门口")')).toBeVisible()
    await expect(drawer.locator('.preset-name:has-text("窗户")')).toBeVisible()
    await expect(drawer.locator('.preset-name:has-text("走廊")')).toBeVisible()
  })

  /**
   * 测试摄像头信息显示
   */
  test('摄像头能力信息正确显示', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // Mock PTZ API 响应
    await page.route('**/camera/control/*/preset/list', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ code: 200, msg: 'success', data: [] })
      })
    })

    await page.route('**/camera/control/*/ptz/capabilities', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          code: 200,
          msg: 'success',
          data: {
            maxPresetNum: 255,
            controlProtocol: {
              options: ['ISAPI', 'ONVIF'],
              current: 'ISAPI'
            },
            absoluteZoom: {
              min: 1,
              max: 30
            },
            support3DPosition: true,
            supportPtzLimits: true
          }
        })
      })
    })

    // 找到有 cameraId 的行并点击播放按钮
    const rows = page.locator('tbody tr')
    const rowCount = await rows.count()

    for (let i = 0; i < rowCount; i++) {
      const row = rows.nth(i)
      const cameraIdCell = await row.locator('td').nth(3).textContent()
      if (cameraIdCell && cameraIdCell.trim() !== '-' && cameraIdCell.trim() !== '') {
        const playButton = row.locator('[data-id="live-stream-play-btn"]')
        await playButton.click()
        break
      }
    }

    // 等待抽屉打开
    const drawer = page.locator('.el-drawer')
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 等待能力信息加载
    await page.waitForTimeout(1500)

    // 展开摄像头信息面板
    const cameraInfoHeader = drawer.locator('.el-collapse-item__header').filter({ hasText: '摄像头信息' })
    await expect(cameraInfoHeader).toBeVisible()

    // 验证能力信息显示
    const cameraInfoContent = drawer.locator('.camera-info-content')
    await expect(cameraInfoContent).toBeVisible()

    // 验证最大预置位数显示
    await expect(cameraInfoContent.locator('text=255')).toBeVisible()

    // 验证控制协议显示
    await expect(cameraInfoContent.locator('text=ISAPI')).toBeVisible()

    // 验证变焦倍数显示
    await expect(cameraInfoContent.locator('text=/1.*30/')).toBeVisible()
  })

  /**
   * 测试播放器控制按钮
   */
  test('播放器控制按钮存在', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // Mock PTZ API 响应
    await page.route('**/camera/control/**', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ code: 200, msg: 'success', data: null })
      })
    })

    // 点击第一行的播放按钮
    const playButton = page.locator('[data-id="live-stream-play-btn"]').first()
    await playButton.click()

    // 等待抽屉打开
    const drawer = page.locator('.el-drawer')
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 验证播放器控制按钮存在
    const controls = drawer.locator('.player-controls')
    await expect(controls).toBeVisible()

    // 验证各个控制按钮
    await expect(controls.locator('button:has-text("播放")')).toBeVisible()
    await expect(controls.locator('button:has-text("暂停")')).toBeVisible()
    await expect(controls.locator('button:has-text("停止")')).toBeVisible()
    await expect(controls.locator('button:has-text("截图")')).toBeVisible()
    await expect(controls.locator('button:has-text("全屏")')).toBeVisible()

    // 验证静音开关存在
    await expect(controls.locator('.el-switch')).toBeVisible()
  })

  /**
   * 测试时间轴组件
   */
  test('巡航时间轴组件存在', async ({ page }) => {
    await login(page)
    await page.goto('/live-stream-manage/list')

    // 等待表格加载
    await page.waitForSelector('tbody tr', { timeout: 10000 })

    // Mock PTZ API 响应
    await page.route('**/camera/control/**', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ code: 200, msg: 'success', data: null })
      })
    })

    // 点击播放按钮
    const playButton = page.locator('[data-id="live-stream-play-btn"]').first()
    await playButton.click()

    // 等待抽屉打开
    const drawer = page.locator('.el-drawer')
    await expect(drawer).toBeVisible({ timeout: 5000 })

    // 验证时间轴容器存在
    const timeline = drawer.locator('.timeline-container')
    await expect(timeline).toBeVisible()

    // 验证时间轴头部
    await expect(timeline.locator('text=巡航时间轴')).toBeVisible()

    // 验证时间选择器
    await expect(timeline.locator('.el-select')).toBeVisible()

    // 验证添加点按钮
    await expect(timeline.locator('button:has-text("添加点")')).toBeVisible()

    // 验证播放巡航按钮
    await expect(timeline.locator('button:has-text("播放巡航")')).toBeVisible()

    // 验证时间轴轨道
    await expect(timeline.locator('.timeline-track')).toBeVisible()
  })
})