139 lines
5.2 KiB
TypeScript
139 lines
5.2 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
||
|
||
/**
|
||
* DCS 编辑器 - 基础导航测试
|
||
*
|
||
* 应用使用 Hash 路由（createWebHashHistory('/dcs-web')），
|
||
* 首次访问 Web 端默认跳转到 /canvases 画布列表页。
|
||
*/
|
||
|
||
test.describe('基础导航', () => {
|
||
test('应用加载无错误', async ({ page }) => {
|
||
const errors: string[] = []
|
||
page.on('pageerror', (err) => {
|
||
errors.push(err.message)
|
||
})
|
||
|
||
await page.goto('/')
|
||
// 等待应用框架渲染完毕（路由守卫会重定向到 canvases 或 editor）
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
// 不应产生未捕获的 JS 异常
|
||
expect(errors).toEqual([])
|
||
})
|
||
|
||
test('可以导航到画布列表页', async ({ page }) => {
|
||
await page.goto('/')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
// Web 模式下默认重定向到画布列表
|
||
await expect(page.locator('.canvases-page')).toBeVisible({ timeout: 10000 })
|
||
// 页面标题区域应包含 "DCS图"
|
||
await expect(page.locator('.page-title')).toContainText('DCS图')
|
||
// 应有"添加DCS图"卡片
|
||
await expect(page.locator('.add-card')).toBeVisible()
|
||
})
|
||
|
||
test('可以导航到编辑器页面', async ({ page }) => {
|
||
await page.goto('/')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
// 通过"添加DCS图"创建一个画布并进入编辑器
|
||
await page.locator('.add-card').click()
|
||
// 等待创建对话框出现
|
||
const dialog = page.locator('.el-dialog')
|
||
await expect(dialog).toBeVisible({ timeout: 5000 })
|
||
|
||
// 填写画布名称
|
||
await dialog.locator('input').first().fill('测试画布')
|
||
// 点击创建按钮
|
||
await dialog.locator('button').filter({ hasText: '创建' }).click()
|
||
|
||
// 等待跳转到编辑器页面
|
||
await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
|
||
})
|
||
|
||
test('编辑器包含侧边栏、画布舞台和属性面板', async ({ page }) => {
|
||
await page.goto('/')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
// 先创建画布进入编辑器
|
||
await page.locator('.add-card').click()
|
||
const dialog = page.locator('.el-dialog')
|
||
await expect(dialog).toBeVisible({ timeout: 5000 })
|
||
await dialog.locator('input').first().fill('结构测试画布')
|
||
await dialog.locator('button').filter({ hasText: '创建' }).click()
|
||
await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
|
||
|
||
// 验证编辑器三大区域
|
||
// 1. 侧边栏（工具栏 + 面板）
|
||
await expect(page.locator('.editor-sidebar-shell')).toBeVisible()
|
||
await expect(page.locator('.tool-rail')).toBeVisible()
|
||
|
||
// 2. 画布舞台
|
||
await expect(page.locator('.canvas-wrapper')).toBeVisible()
|
||
|
||
// 3. 属性面板
|
||
await expect(page.locator('.property-panel-shell')).toBeVisible()
|
||
})
|
||
|
||
test('编辑器头部可见且包含撤销重做按钮', async ({ page }) => {
|
||
await page.goto('/')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
// 创建画布进入编辑器
|
||
await page.locator('.add-card').click()
|
||
const dialog = page.locator('.el-dialog')
|
||
await expect(dialog).toBeVisible({ timeout: 5000 })
|
||
await dialog.locator('input').first().fill('头部测试画布')
|
||
await dialog.locator('button').filter({ hasText: '创建' }).click()
|
||
await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
|
||
|
||
// 编辑器头部
|
||
await expect(page.locator('.editor-header')).toBeVisible()
|
||
|
||
// 撤销按钮（fa-rotate-left 图标）
|
||
const undoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-left') })
|
||
await expect(undoBtn).toBeVisible()
|
||
|
||
// 重做按钮（fa-rotate-right 图标）
|
||
const redoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-right') })
|
||
await expect(redoBtn).toBeVisible()
|
||
})
|
||
|
||
test('状态栏在编辑器中可见', async ({ page }) => {
|
||
await page.goto('/')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
// 创建画布进入编辑器
|
||
await page.locator('.add-card').click()
|
||
const dialog = page.locator('.el-dialog')
|
||
await expect(dialog).toBeVisible({ timeout: 5000 })
|
||
await dialog.locator('input').first().fill('状态栏测试画布')
|
||
await dialog.locator('button').filter({ hasText: '创建' }).click()
|
||
await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
|
||
|
||
// 状态栏
|
||
await expect(page.locator('.editor-status-bar')).toBeVisible()
|
||
// 状态栏应显示缩放百分比
|
||
await expect(page.locator('.editor-status-bar .status-item')).toContainText(['%'])
|
||
})
|
||
|
||
test('可以通过头部 "DCS编辑器" 按钮返回画布列表', async ({ page }) => {
|
||
await page.goto('/')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
// 先进入编辑器
|
||
await page.locator('.add-card').click()
|
||
const dialog = page.locator('.el-dialog')
|
||
await expect(dialog).toBeVisible({ timeout: 5000 })
|
||
await dialog.locator('input').first().fill('返回测试画布')
|
||
await dialog.locator('button').filter({ hasText: '创建' }).click()
|
||
await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
|
||
|
||
// 点击 "DCS编辑器" 返回画布列表
|
||
await page.locator('.scope-btn').click()
|
||
await expect(page.locator('.canvases-page')).toBeVisible({ timeout: 10000 })
|
||
})
|
||
})
|