feat(e2e): 添加完整的E2E测试框架和测试用例

添加Playwright测试框架配置和基础页面对象实现冒烟测试用例覆盖首页和联系页面核心功能更新导航组件以支持滚动高亮功能添加BackButton组件统一返回按钮行为配置Woodpecker CI集成和测试报告生成
2026-02-27 10:30:33 +08:00
parent 4a616fe96e
commit 5d5b7feb0a
50 changed files with 6765 additions and 46 deletions
@@ -0,0 +1,122 @@
+import { DeviceConfig } from '../types';
+
+export const devices: Record<string, DeviceConfig> = {
+  'desktop-1920x1080': {
+    name: 'Desktop 1920x1080',
+    viewport: { width: 1920, height: 1080 },
+    isMobile: false,
+  },
+  'desktop-1366x768': {
+    name: 'Desktop 1366x768',
+    viewport: { width: 1366, height: 768 },
+    isMobile: false,
+  },
+  'desktop-1280x720': {
+    name: 'Desktop 1280x720',
+    viewport: { width: 1280, height: 720 },
+    isMobile: false,
+  },
+  'laptop-1440x900': {
+    name: 'Laptop 1440x900',
+    viewport: { width: 1440, height: 900 },
+    isMobile: false,
+  },
+  'laptop-1024x768': {
+    name: 'Laptop 1024x768',
+    viewport: { width: 1024, height: 768 },
+    isMobile: false,
+  },
+  'tablet-768x1024': {
+    name: 'Tablet 768x1024',
+    viewport: { width: 768, height: 1024 },
+    isMobile: true,
+  },
+  'tablet-834x1194': {
+    name: 'Tablet 834x1194 (iPad Pro)',
+    viewport: { width: 834, height: 1194 },
+    isMobile: true,
+  },
+  'mobile-375x667': {
+    name: 'Mobile 375x667 (iPhone SE)',
+    viewport: { width: 375, height: 667 },
+    isMobile: true,
+  },
+  'mobile-390x844': {
+    name: 'Mobile 390x844 (iPhone 12)',
+    viewport: { width: 390, height: 844 },
+    isMobile: true,
+  },
+  'mobile-414x896': {
+    name: 'Mobile 414x896 (iPhone 11)',
+    viewport: { width: 414, height: 896 },
+    isMobile: true,
+  },
+  'mobile-360x640': {
+    name: 'Mobile 360x640 (Android)',
+    viewport: { width: 360, height: 640 },
+    isMobile: true,
+  },
+  'mobile-412x915': {
+    name: 'Mobile 412x915 (Pixel 5)',
+    viewport: { width: 412, height: 915 },
+    isMobile: true,
+  },
+};
+
+export const desktopDevices = Object.entries(devices)
+  .filter(([_, config]) => !config.isMobile)
+  .map(([key, config]) => ({ key, ...config }));
+
+export const mobileDevices = Object.entries(devices)
+  .filter(([_, config]) => config.isMobile)
+  .map(([key, config]) => ({ key, ...config }));
+
+export const tabletDevices = Object.entries(devices)
+  .filter(([_, config]) => config.isMobile && config.viewport.width >= 768)
+  .map(([key, config]) => ({ key, ...config }));
+
+export const getDevice = (key: string): DeviceConfig => {
+  return devices[key] || devices['desktop-1280x720'];
+};
+
+export const getAllDevices = (): DeviceConfig[] => {
+  return Object.values(devices);
+};
+
+export const getDesktopDevices = (): DeviceConfig[] => {
+  return desktopDevices.map(d => devices[d.key]);
+};
+
+export const getMobileDevices = (): DeviceConfig[] => {
+  return mobileDevices.map(d => devices[d.key]);
+};
+
+export const getTabletDevices = (): DeviceConfig[] => {
+  return tabletDevices.map(d => devices[d.key]);
+};
+
+export const getBreakpoints = () => {
+  return {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+  };
+};
+
+export const isMobile = (width: number): boolean => {
+  const breakpoints = getBreakpoints();
+  return width < breakpoints.lg;
+};
+
+export const isTablet = (width: number): boolean => {
+  const breakpoints = getBreakpoints();
+  return width >= breakpoints.md && width < breakpoints.lg;
+};
+
+export const isDesktop = (width: number): boolean => {
+  const breakpoints = getBreakpoints();
+  return width >= breakpoints.lg;
+};