feat: 优化网站性能、响应式设计和测试覆盖率

- 更新next.config.ts配置以优化图片和静态资源 - 优化字体加载策略，减少首屏阻塞 - 使用Next.js Image组件替换img标签并实现懒加载 - 重构移动端菜单交互，提升触摸体验 - 新增安全测试和可访问性测试用例 - 修复导航栏滚动定位问题 - 更新部署就绪测试脚本 - 添加相关文档说明优化细节
2026-02-28 22:32:45 +08:00
parent 7b2a8af19f
commit 13c4a2ca49
14 changed files with 2748 additions and 789 deletions
@@ -0,0 +1,131 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('快速上线评估测试 @deployment', () => {
+  test('首页基本功能检查', async ({ page }) => {
+    await page.goto('http://localhost:3000');
+    await page.waitForLoadState('networkidle');
+    
+    await expect(page).toHaveTitle(/Novalon|睿新致远/);
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('footer')).toBeVisible();
+  });
+
+  test('导航功能检查', async ({ page }) => {
+    await page.goto('http://localhost:3000');
+    
+    const navLinks = page.locator('nav a');
+    const count = await navLinks.count();
+    expect(count).toBeGreaterThan(0);
+    
+    for (let i = 0; i < Math.min(3, count); i++) {
+      const link = navLinks.nth(i);
+      await link.click();
+      await page.waitForLoadState('networkidle');
+      await page.goBack();
+      await page.waitForLoadState('networkidle');
+    }
+  });
+
+  test('联系页面检查', async ({ page }) => {
+    await page.goto('http://localhost:3000/contact');
+    await page.waitForLoadState('networkidle');
+    
+    await expect(page.locator('h1, h2').first()).toBeVisible();
+    
+    const form = page.locator('form');
+    if (await form.count() > 0) {
+      await expect(form).toBeVisible();
+    }
+  });
+
+  test('关于页面检查', async ({ page }) => {
+    await page.goto('http://localhost:3000/about');
+    await page.waitForLoadState('networkidle');
+    
+    await expect(page.locator('h1, h2').first()).toBeVisible();
+  });
+
+  test('响应式设计检查', async ({ page }) => {
+    await page.goto('http://localhost:3000');
+    
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.waitForLoadState('networkidle');
+    await expect(page.locator('header')).toBeVisible();
+    
+    await page.setViewportSize({ width: 1280, height: 720 });
+    await page.waitForLoadState('networkidle');
+    await expect(page.locator('header')).toBeVisible();
+  });
+
+  test('性能指标检查', async ({ page }) => {
+    const startTime = Date.now();
+    await page.goto('http://localhost:3000');
+    await page.waitForLoadState('networkidle');
+    const loadTime = Date.now() - startTime;
+    
+    console.log(`页面加载时间: ${loadTime}ms`);
+    expect(loadTime).toBeLessThan(5000);
+  });
+
+  test('无控制台错误', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        errors.push(msg.text());
+      }
+    });
+    
+    await page.goto('http://localhost:3000');
+    await page.waitForLoadState('networkidle');
+    
+    if (errors.length > 0) {
+      console.log('控制台错误:', errors);
+    }
+    expect(errors.length).toBe(0);
+  });
+
+  test('页面链接检查', async ({ page }) => {
+    await page.goto('http://localhost:3000');
+    await page.waitForLoadState('networkidle');
+    
+    const links = page.locator('a[href]').first(5);
+    const count = await links.count();
+    
+    for (let i = 0; i < count; i++) {
+      const href = await links.nth(i).getAttribute('href');
+      expect(href).toBeTruthy();
+      expect(href).not.toBe('#');
+    }
+  });
+
+  test('图片加载检查', async ({ page }) => {
+    await page.goto('http://localhost:3000');
+    await page.waitForLoadState('networkidle');
+    
+    const images = page.locator('img').first(3);
+    const count = await images.count();
+    
+    for (let i = 0; i < count; i++) {
+      const img = images.nth(i);
+      await expect(img).toBeVisible();
+      const src = await img.getAttribute('src');
+      expect(src).toBeTruthy();
+    }
+  });
+
+  test('移动端菜单检查', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto('http://localhost:3000');
+    await page.waitForLoadState('networkidle');
+    
+    const menuButton = page.locator('button[aria-label*="menu"], button[aria-label*="菜单"], .mobile-menu-button, .hamburger').first();
+    if (await menuButton.count() > 0) {
+      await menuButton.click();
+      await page.waitForTimeout(500);
+      const mobileMenu = page.locator('.mobile-menu, [role="dialog"], .dropdown-menu').first();
+      if (await mobileMenu.count() > 0) {
+        await expect(mobileMenu).toBeVisible();
+      }
+    }
+  });
+});
@@ -0,0 +1,86 @@
+import { test, expect } from '@playwright/test';
+
+test('快速上线评估 - 首页加载', async ({ page }) => {
+  console.log('📊 开始测试: 首页加载');
+  const startTime = Date.now();
+  
+  await page.goto('http://localhost:3000');
+  await page.waitForLoadState('domcontentloaded');
+  
+  const loadTime = Date.now() - startTime;
+  console.log(`✅ 首页加载完成，耗时: ${loadTime}ms`);
+  
+  await expect(page).toHaveTitle(/Novalon|睿新致远/);
+  console.log('✅ 页面标题验证通过');
+});
+
+test('快速上线评估 - 导航检查', async ({ page }) => {
+  console.log('📊 开始测试: 导航检查');
+  
+  await page.goto('http://localhost:3000');
+  await page.waitForLoadState('domcontentloaded');
+  
+  const header = page.locator('header');
+  await expect(header).toBeVisible();
+  console.log('✅ 页眉可见');
+  
+  const footer = page.locator('footer');
+  await expect(footer).toBeVisible();
+  console.log('✅ 页脚可见');
+});
+
+test('快速上线评估 - 联系页面', async ({ page }) => {
+  console.log('📊 开始测试: 联系页面');
+  
+  await page.goto('http://localhost:3000/contact');
+  await page.waitForLoadState('domcontentloaded');
+  
+  const heading = page.locator('h1, h2').first();
+  await expect(heading).toBeVisible();
+  console.log('✅ 联系页面标题可见');
+});
+
+test('快速上线评估 - 关于页面', async ({ page }) => {
+  console.log('📊 开始测试: 关于页面');
+  
+  await page.goto('http://localhost:3000/about');
+  await page.waitForLoadState('domcontentloaded');
+  
+  const heading = page.locator('h1, h2').first();
+  await expect(heading).toBeVisible();
+  console.log('✅ 关于页面标题可见');
+});
+
+test('快速上线评估 - 移动端适配', async ({ page }) => {
+  console.log('📊 开始测试: 移动端适配');
+  
+  await page.setViewportSize({ width: 375, height: 667 });
+  await page.goto('http://localhost:3000');
+  await page.waitForLoadState('domcontentloaded');
+  
+  const header = page.locator('header');
+  await expect(header).toBeVisible();
+  console.log('✅ 移动端页眉可见');
+});
+
+test('快速上线评估 - 无控制台错误', async ({ page }) => {
+  console.log('📊 开始测试: 控制台错误检查');
+  
+  const errors: string[] = [];
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      errors.push(msg.text());
+    }
+  });
+  
+  await page.goto('http://localhost:3000');
+  await page.waitForLoadState('domcontentloaded');
+  
+  if (errors.length > 0) {
+    console.log('⚠️  发现控制台错误:', errors);
+  } else {
+    console.log('✅ 无控制台错误');
+  }
+  
+  expect(errors.length).toBe(0);
+});