/** * ETL 任务管理页面 E2E 测试。 * * 验证点: * - 5 个 Tab 切换(config、queue、schedule、history、status) * - 各 Tab 内容渲染 * - Tab 与 URL 查询参数同步 */ import { test, expect } from '@playwright/test'; import { injectAuth, mockAllApis } from './helpers'; test.describe('ETL 任务管理页面', () => { test.beforeEach(async ({ page }) => { await injectAuth(page); await mockAllApis(page); await page.goto('/etl-tasks'); // 等待页面标题渲染 await expect(page.locator('text=ETL 任务管理').first()).toBeVisible(); }); test('默认显示 config Tab', async ({ page }) => { // 默认 Tab 为"发起" const configTab = page.locator('[role="tab"]', { hasText: '发起' }); await expect(configTab).toHaveAttribute('aria-selected', 'true'); }); test('5 个 Tab 均可见', async ({ page }) => { await expect(page.locator('[role="tab"]', { hasText: '发起' })).toBeVisible(); await expect(page.locator('[role="tab"]', { hasText: '队列' })).toBeVisible(); await expect(page.locator('[role="tab"]', { hasText: '调度' })).toBeVisible(); await expect(page.locator('[role="tab"]', { hasText: '历史' })).toBeVisible(); await expect(page.locator('[role="tab"]', { hasText: '状态' })).toBeVisible(); }); test('切换到 queue Tab', async ({ page }) => { const queueTab = page.locator('[role="tab"]', { hasText: '队列' }); await queueTab.click(); await expect(queueTab).toHaveAttribute('aria-selected', 'true'); // URL 同步 await expect(page).toHaveURL(/\?tab=queue/); }); test('切换到 schedule Tab', async ({ page }) => { const scheduleTab = page.locator('[role="tab"]', { hasText: '调度' }); await scheduleTab.click(); await expect(scheduleTab).toHaveAttribute('aria-selected', 'true'); // URL 同步 await expect(page).toHaveURL(/\?tab=schedule/); }); test('切换到 history Tab', async ({ page }) => { const historyTab = page.locator('[role="tab"]', { hasText: '历史' }); await historyTab.click(); await expect(historyTab).toHaveAttribute('aria-selected', 'true'); // URL 同步 await expect(page).toHaveURL(/\?tab=history/); }); test('切换到 status Tab', async ({ page }) => { const statusTab = page.locator('[role="tab"]', { hasText: '状态' }); await statusTab.click(); await expect(statusTab).toHaveAttribute('aria-selected', 'true'); // URL 同步 await expect(page).toHaveURL(/\?tab=status/); }); test('通过 URL 直接访问 queue Tab', async ({ page }) => { await page.goto('/etl-tasks?tab=queue'); const queueTab = page.locator('[role="tab"]', { hasText: '队列' }); await expect(queueTab).toHaveAttribute('aria-selected', 'true'); }); test('通过 URL 直接访问 schedule Tab', async ({ page }) => { await page.goto('/etl-tasks?tab=schedule'); const scheduleTab = page.locator('[role="tab"]', { hasText: '调度' }); await expect(scheduleTab).toHaveAttribute('aria-selected', 'true'); }); test('通过 URL 直接访问 history Tab', async ({ page }) => { await page.goto('/etl-tasks?tab=history'); const historyTab = page.locator('[role="tab"]', { hasText: '历史' }); await expect(historyTab).toHaveAttribute('aria-selected', 'true'); }); test('通过 URL 直接访问 status Tab', async ({ page }) => { await page.goto('/etl-tasks?tab=status'); const statusTab = page.locator('[role="tab"]', { hasText: '状态' }); await expect(statusTab).toHaveAttribute('aria-selected', 'true'); }); test('无效 tab 参数回退到默认 config', async ({ page }) => { await page.goto('/etl-tasks?tab=invalid'); const configTab = page.locator('[role="tab"]', { hasText: '发起' }); await expect(configTab).toHaveAttribute('aria-selected', 'true'); }); });