diff --git a/frontend/e2e/diagnose.spec.ts b/frontend/e2e/diagnose.spec.ts new file mode 100644 index 0000000..910f0f8 --- /dev/null +++ b/frontend/e2e/diagnose.spec.ts @@ -0,0 +1,67 @@ +/** + * 诊断脚本 - 检查每个页面上的按钮和交互元素 + */ +import { test, expect, type Page } from '@playwright/test' + +const MOCK_TOKEN = 'mock-test-token' +test.beforeEach(async ({ page }) => { + await page.addInitScript((token) => { + localStorage.setItem('token', token) + }, MOCK_TOKEN) +}) + +async function resetMock(page: Page, endpoint: string) { + await page.evaluate(async (url) => { + await fetch(url, { method: 'POST' }) + }, endpoint) +} + +async function diagnosePage(page: Page, path: string, resetEndpoint: string, pageName: string) { + await page.goto(path, { waitUntil: 'networkidle' }) + await resetMock(page, resetEndpoint) + await page.reload({ waitUntil: 'networkidle' }) + await page.waitForSelector('.el-table', { timeout: 15000 }) + + // 1. 未勾选时,统计所有按钮 + const allButtonsBefore = await page.locator('.mb-16 button, .mb-16 .el-button').allTextContents() + console.log(`\n=== ${pageName} - 未勾选时的按钮 ===`) + console.log(JSON.stringify(allButtonsBefore)) + + // 2. 勾选第1行 + const checkboxes = page.locator('.el-table__body .el-checkbox') + const checkboxCount = await checkboxes.count() + console.log(`checkbox数量: ${checkboxCount}`) + if (checkboxCount > 0) { + await checkboxes.first().click() + await page.waitForTimeout(500) + } + + // 3. 勾选后,统计所有按钮 + const allButtonsAfter = await page.locator('.mb-16 button, .mb-16 .el-button').allTextContents() + console.log(`\n=== ${pageName} - 勾选后的按钮 ===`) + console.log(JSON.stringify(allButtonsAfter)) + + // 4. 查找状态列有没有 el-switch + const switches = await page.locator('.el-switch').count() + console.log(`状态列的el-switch数量: ${switches}`) + + // 5. 查找状态列的内容 + const statusTags = await page.locator('.el-table .el-tag').allTextContents() + console.log(`状态标签: ${JSON.stringify(statusTags)}`) + + // 6. 查找表格所有列标题 + const headers = await page.locator('.el-table__header th').allTextContents() + console.log(`列标题: ${JSON.stringify(headers)}`) +} + +test('诊断:设备管理页面', async ({ page }) => { + await diagnosePage(page, '/mock/machine', '/mock-api/test/reset-machines', '设备管理') +}) + +test('诊断:员工管理页面', async ({ page }) => { + await diagnosePage(page, '/mock/worker', '/mock-api/test/reset-workers', '员工管理') +}) + +test('诊断:采集地址页面', async ({ page }) => { + await diagnosePage(page, '/mock/collect-address', '/mock-api/test/reset-addresses', '采集地址') +}) diff --git a/frontend/e2e/manual-verify.spec.ts b/frontend/e2e/manual-verify.spec.ts new file mode 100644 index 0000000..92b467d --- /dev/null +++ b/frontend/e2e/manual-verify.spec.ts @@ -0,0 +1,62 @@ +/** + * 手动验证脚本 - 逐个打开三个页面,每页停留10秒供人眼观察 + * 验证:勾选checkbox后是否出现批量启用/停用/删除按钮 + */ +import { test, type Page } from '@playwright/test' + +const MOCK_TOKEN = 'mock-test-token' + +test.beforeEach(async ({ page }) => { + await page.addInitScript((token) => { + localStorage.setItem('token', token) + }, MOCK_TOKEN) +}) + +// 重置mock数据 +async function resetMock(page: Page, endpoint: string) { + await page.evaluate(async (url) => { + await fetch(url, { method: 'POST' }) + }, endpoint) +} + +async function openPage(page: Page, path: string, resetEndpoint: string) { + await page.goto(path, { waitUntil: 'networkidle' }) + await resetMock(page, resetEndpoint) + await page.reload({ waitUntil: 'networkidle' }) + await page.waitForSelector('.el-table', { timeout: 15000 }) +} + +test('设备管理 - 打开页面截图(未勾选)', async ({ page }) => { + await openPage(page, '/mock/machine', '/mock-api/test/reset-machines') + await page.screenshot({ path: 'test-results/manual-machine-no-select.png', fullPage: true }) + + // 勾选第1行 + await page.locator('.el-table__body .el-checkbox').first().click() + await page.waitForTimeout(1000) + await page.screenshot({ path: 'test-results/manual-machine-selected.png', fullPage: true }) + + // 等待10秒供人眼观察 + await page.waitForTimeout(10000) +}) + +test('员工管理 - 打开页面截图(未勾选)', async ({ page }) => { + await openPage(page, '/mock/worker', '/mock-api/test/reset-workers') + await page.screenshot({ path: 'test-results/manual-worker-no-select.png', fullPage: true }) + + await page.locator('.el-table__body .el-checkbox').first().click() + await page.waitForTimeout(1000) + await page.screenshot({ path: 'test-results/manual-worker-selected.png', fullPage: true }) + + await page.waitForTimeout(10000) +}) + +test('采集地址 - 打开页面截图(未勾选)', async ({ page }) => { + await openPage(page, '/mock/collect-address', '/mock-api/test/reset-addresses') + await page.screenshot({ path: 'test-results/manual-address-no-select.png', fullPage: true }) + + await page.locator('.el-table__body .el-checkbox').first().click() + await page.waitForTimeout(1000) + await page.screenshot({ path: 'test-results/manual-address-selected.png', fullPage: true }) + + await page.waitForTimeout(10000) +})