张翔
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('基础UI功能测试', () => {
|
|
test('前端应用基本功能验证', async ({ page }) => {
|
|
// 测试1: 应用首页加载
|
|
await test.step('加载应用首页', async () => {
|
|
await page.goto('/');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// 验证页面标题
|
|
const title = await page.title();
|
|
expect(title).toContain('Novalon');
|
|
});
|
|
|
|
// 测试2: 登录页面渲染
|
|
await test.step('验证登录页面元素', async () => {
|
|
await page.goto('/login');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// 验证登录表单元素
|
|
await expect(page.locator('input[type="text"]')).toBeVisible();
|
|
await expect(page.locator('input[type="password"]')).toBeVisible();
|
|
await expect(page.locator('button:has-text("登录")')).toBeVisible();
|
|
});
|
|
|
|
// 测试3: 页面导航
|
|
await test.step('验证页面导航功能', async () => {
|
|
// 检查页面是否有基本的导航元素 - 使用更灵活的选择器
|
|
const navigationSelectors = [
|
|
'nav', '.navbar', '.menu', '.el-menu', '.el-header',
|
|
'.layout-header', '.app-header', '[class*="header"]',
|
|
'[class*="nav"]', '[class*="menu"]'
|
|
];
|
|
|
|
let hasNavigation = false;
|
|
for (const selector of navigationSelectors) {
|
|
const count = await page.locator(selector).count();
|
|
if (count > 0) {
|
|
hasNavigation = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 如果找不到传统导航元素，检查是否有其他页面结构
|
|
if (!hasNavigation) {
|
|
const hasAppContainer = await page.locator('#app, .app, .container').count() > 0;
|
|
const hasBodyContent = await page.locator('body').textContent() !== '';
|
|
hasNavigation = hasAppContainer && hasBodyContent;
|
|
}
|
|
|
|
expect(hasNavigation).toBeTruthy();
|
|
});
|
|
|
|
// 测试4: 响应式设计验证
|
|
await test.step('验证响应式设计', async () => {
|
|
// 设置移动端视口
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.waitForTimeout(500);
|
|
|
|
// 验证页面在移动端仍然可访问
|
|
await expect(page.locator('body')).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test('应用静态资源加载', async ({ page }) => {
|
|
await page.goto('/');
|
|
|
|
// 验证CSS加载
|
|
const cssLoaded = await page.evaluate(() => {
|
|
return document.styleSheets.length > 0;
|
|
});
|
|
expect(cssLoaded).toBeTruthy();
|
|
|
|
// 验证JavaScript加载
|
|
const jsLoaded = await page.evaluate(() => {
|
|
return typeof window !== 'undefined';
|
|
});
|
|
expect(jsLoaded).toBeTruthy();
|
|
|
|
// 验证Vue应用挂载
|
|
const vueMounted = await page.evaluate(() => {
|
|
return !!document.querySelector('#app');
|
|
});
|
|
expect(vueMounted).toBeTruthy();
|
|
});
|
|
}); |