|
|
/**
|
|
|
* CNC管理后台 - 三模块重构E2E测试
|
|
|
*
|
|
|
* 测试范围：
|
|
|
* 1. 仪表盘新布局（NC程序排行+分布饼图、无告警区域）
|
|
|
* 2. 产量报表3子页导航+筛选联动
|
|
|
* 3. 设备详情页（latest-tags实时状态+采集时间+日期筛选）
|
|
|
*
|
|
|
* 使用Mock模式（/mock前缀路由），不依赖后端API
|
|
|
*/
|
|
|
import { test, expect, type Page } from '@playwright/test'
|
|
|
|
|
|
/** 模拟登录Token（Mock模式下路由守卫只检查token存在性） */
|
|
|
const MOCK_TOKEN = 'mock-test-token'
|
|
|
|
|
|
// 全局beforeEach：在每个测试前预设token到localStorage，避免路由守卫拦截
|
|
|
test.beforeEach(async ({ page }) => {
|
|
|
await page.addInitScript((token) => {
|
|
|
localStorage.setItem('token', token)
|
|
|
}, MOCK_TOKEN)
|
|
|
})
|
|
|
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
// 套件1：仪表盘重设计
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
test.describe('仪表盘重设计', () => {
|
|
|
test.beforeEach(async ({ page }) => {
|
|
|
await page.goto('/mock/dashboard', { waitUntil: 'networkidle' })
|
|
|
})
|
|
|
|
|
|
test('4个统计卡片存在且标签正确', async ({ page }) => {
|
|
|
const cards = page.locator('.stat-card')
|
|
|
await expect(cards).toHaveCount(4)
|
|
|
|
|
|
// 逐个验证标签文本包含预期关键字
|
|
|
await expect(cards.nth(0)).toContainText('在线机床数')
|
|
|
await expect(cards.nth(1)).toContainText('今日总产量')
|
|
|
await expect(cards.nth(2)).toContainText('采集服务')
|
|
|
await expect(cards.nth(3)).toContainText('运行机床')
|
|
|
})
|
|
|
|
|
|
test('不包含旧版告警和状态分布区域', async ({ page }) => {
|
|
|
// 验证以下文字在页面中不存在，确保已移除旧布局
|
|
|
await expect(page.locator('text=活跃告警')).toHaveCount(0)
|
|
|
await expect(page.locator('text=最新告警')).toHaveCount(0)
|
|
|
await expect(page.locator('text=机床状态分布')).toHaveCount(0)
|
|
|
await expect(page.locator('text=采集成功率')).toHaveCount(0)
|
|
|
})
|
|
|
|
|
|
test('NC程序产量排行表可见', async ({ page }) => {
|
|
|
// 第4行的NC程序排行卡片标题包含"NC程序产量排行"
|
|
|
await expect(page.locator('.card-title:has-text("NC程序产量排行")')).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('NC程序产量分布饼图区域可见', async ({ page }) => {
|
|
|
// 第2行右侧卡片的标题包含"NC程序产量分布"
|
|
|
await expect(page.locator('.card-title:has-text("NC程序产量分布")')).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('排行区域排序控件为el-select下拉选择', async ({ page }) => {
|
|
|
// 机床排行和工人排行在 .rank-row 中，验证含有 el-select
|
|
|
const rankSelects = page.locator('.rank-row .el-select')
|
|
|
// 至少应存在一个：机床排序(v-model="machineSortOrder")
|
|
|
await expect(rankSelects.first()).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('产量趋势图表区域可见', async ({ page }) => {
|
|
|
// 第2行左侧卡片
|
|
|
await expect(page.locator('.card-title:has-text("产量趋势")')).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('车间平均单机产量区域可见', async ({ page }) => {
|
|
|
// 第5行右侧卡片，标题动态包含日期标签
|
|
|
await expect(page.locator('.card-title:has-text("车间平均单机产量")')).toBeVisible()
|
|
|
})
|
|
|
})
|
|
|
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
// 套件2：产量报表子菜单导航
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
test.describe('产量报表子菜单', () => {
|
|
|
test.beforeEach(async ({ page }) => {
|
|
|
await page.goto('/mock/dashboard', { waitUntil: 'networkidle' })
|
|
|
})
|
|
|
|
|
|
test('产量报表有子菜单且可见', async ({ page }) => {
|
|
|
// Sidebar中产量报表是 el-sub-menu，内部 span 包含"产量报表"文字
|
|
|
const submenu = page.locator('.el-sub-menu:has-text("产量报表")')
|
|
|
await expect(submenu).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('点击机床产量导航到正确路径', async ({ page }) => {
|
|
|
// 先展开子菜单（点击产量报表标题）
|
|
|
await page.locator('.el-sub-menu:has-text("产量报表")').click()
|
|
|
// 点击"机床产量"子项（使用精确匹配避免与"机床产量排行"混淆）
|
|
|
await page.locator('.el-menu-item:has-text("机床产量")').click()
|
|
|
await expect(page).toHaveURL(/\/production\/machine/)
|
|
|
})
|
|
|
|
|
|
test('点击员工产量导航到正确路径', async ({ page }) => {
|
|
|
await page.locator('.el-sub-menu:has-text("产量报表")').click()
|
|
|
await page.locator('.el-menu-item:has-text("员工产量")').click()
|
|
|
await expect(page).toHaveURL(/\/production\/worker/)
|
|
|
})
|
|
|
|
|
|
test('点击程序产量导航到正确路径', async ({ page }) => {
|
|
|
await page.locator('.el-sub-menu:has-text("产量报表")').click()
|
|
|
await page.locator('.el-menu-item:has-text("程序产量")').click()
|
|
|
await expect(page).toHaveURL(/\/production\/program/)
|
|
|
})
|
|
|
|
|
|
test('/production重定向到/production/machine', async ({ page }) => {
|
|
|
await page.goto('/mock/production', { waitUntil: 'networkidle' })
|
|
|
await expect(page).toHaveURL(/\/production\/machine/)
|
|
|
})
|
|
|
})
|
|
|
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
// 套件3：机床产量子页面
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
test.describe('机床产量子页面', () => {
|
|
|
test.beforeEach(async ({ page }) => {
|
|
|
await page.goto('/mock/production/machine', { waitUntil: 'networkidle' })
|
|
|
})
|
|
|
|
|
|
test('页面加载后统计卡片可见', async ({ page }) => {
|
|
|
// 机床产量页面有4个统计卡片（总产量/运行机床数/平均单产/最高单产机床）
|
|
|
const cards = page.locator('.stat-card')
|
|
|
await expect(cards.first()).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('筛选栏包含日期范围和查询按钮', async ({ page }) => {
|
|
|
// 验证筛选控件存在
|
|
|
await expect(page.locator('text=日期范围')).toBeVisible()
|
|
|
await expect(page.locator('button:has-text("查询")')).toBeVisible()
|
|
|
await expect(page.locator('button:has-text("重置")')).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('图表区域可见', async ({ page }) => {
|
|
|
// 验证柱状图和饼图的卡片标题
|
|
|
await expect(page.locator('.card-title:has-text("机床产量柱状图")')).toBeVisible()
|
|
|
await expect(page.locator('.card-title:has-text("各机床产量占比")')).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('明细排行表格可见', async ({ page }) => {
|
|
|
// 验证表格存在
|
|
|
await expect(page.locator('.card-title:has-text("明细排行")')).toBeVisible()
|
|
|
})
|
|
|
})
|
|
|
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
// 套件4：员工产量子页面
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
test.describe('员工产量子页面', () => {
|
|
|
test('页面加载成功且有统计卡片', async ({ page }) => {
|
|
|
await page.goto('/mock/production/worker', { waitUntil: 'networkidle' })
|
|
|
const cards = page.locator('.stat-card')
|
|
|
await expect(cards.first()).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('筛选栏存在', async ({ page }) => {
|
|
|
await page.goto('/mock/production/worker', { waitUntil: 'networkidle' })
|
|
|
await expect(page.locator('text=日期范围')).toBeVisible()
|
|
|
await expect(page.locator('button:has-text("查询")')).toBeVisible()
|
|
|
})
|
|
|
})
|
|
|
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
// 套件5：程序产量子页面
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
test.describe('程序产量子页面', () => {
|
|
|
test('页面加载成功且有统计卡片', async ({ page }) => {
|
|
|
await page.goto('/mock/production/program', { waitUntil: 'networkidle' })
|
|
|
const cards = page.locator('.stat-card')
|
|
|
await expect(cards.first()).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('筛选栏存在', async ({ page }) => {
|
|
|
await page.goto('/mock/production/program', { waitUntil: 'networkidle' })
|
|
|
await expect(page.locator('text=日期范围')).toBeVisible()
|
|
|
await expect(page.locator('button:has-text("查询")')).toBeVisible()
|
|
|
})
|
|
|
})
|
|
|
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
// 套件6：设备详情页改造
|
|
|
// ════════════════════════════════════════════════════════════════
|
|
|
test.describe('设备详情页改造', () => {
|
|
|
test('实时状态表格有采集时间列', async ({ page }) => {
|
|
|
await page.goto('/mock/machine/1', { waitUntil: 'networkidle' })
|
|
|
// latest-tags 实时状态表格有"采集时间"列头（th>div>采集时间）
|
|
|
await expect(page.locator('th:has-text("采集时间")')).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('基本信息卡片存在', async ({ page }) => {
|
|
|
await page.goto('/mock/machine/1', { waitUntil: 'networkidle' })
|
|
|
await expect(page.locator('text=基本信息')).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('实时状态卡片存在', async ({ page }) => {
|
|
|
await page.goto('/mock/machine/1', { waitUntil: 'networkidle' })
|
|
|
await expect(page.locator('text=实时状态')).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('采集记录区域有日期选择器', async ({ page }) => {
|
|
|
await page.goto('/mock/machine/1', { waitUntil: 'networkidle' })
|
|
|
// 最近采集记录卡片的头部包含一个日期选择器
|
|
|
const datepickers = page.locator('.el-date-editor')
|
|
|
await expect(datepickers.first()).toBeVisible()
|
|
|
})
|
|
|
|
|
|
test('今日产量表格存在', async ({ page }) => {
|
|
|
await page.goto('/mock/machine/1', { waitUntil: 'networkidle' })
|
|
|
await expect(page.locator('text=今日产量')).toBeVisible()
|
|
|
})
|
|
|
})
|