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() }) })