feat: add mobile compatibility test suite

2026-03-05 15:28:51 +08:00
parent 8611f84b48
commit 57c002b26c
1 changed files with 94 additions and 0 deletions
@@ -0,0 +1,94 @@
+import { test, expect } from '@playwright/test';
+import { getMobileDevices } from '../../../utils/devices';
+
+test.describe('移动端兼容性测试 @mobile @compatibility', () => {
+  const devices = getMobileDevices();
+  
+  for (const device of devices) {
+    test(`${device.name} - 页面布局正常`, async ({ page }) => {
+      await page.setViewportSize(device.viewport);
+      await page.goto('/');
+      
+      await expect(page.locator('header')).toBeVisible();
+      await expect(page.locator('main')).toBeVisible();
+      await expect(page.locator('footer')).toBeVisible();
+    });
+  }
+  
+  for (const device of devices) {
+    test(`${device.name} - 导航菜单可访问`, async ({ page }) => {
+      await page.setViewportSize(device.viewport);
+      await page.goto('/');
+      
+      const navMenu = page.locator('nav').first();
+      await expect(navMenu).toBeVisible();
+      
+      if (device.viewport.width < 768) {
+        const mobileMenuToggle = page.locator('[aria-label="mobile-menu"]');
+        if (await mobileMenuToggle.isVisible()) {
+          await mobileMenuToggle.click();
+          await expect(page.locator('.mobile-menu')).toBeVisible();
+        }
+      }
+    });
+  }
+  
+  for (const device of devices) {
+    test(`${device.name} - 表单元素可交互`, async ({ page }) => {
+      await page.setViewportSize(device.viewport);
+      await page.goto('/contact');
+      
+      const nameInput = page.locator('input[name="name"]');
+      const emailInput = page.locator('input[name="email"]');
+      const submitButton = page.locator('button[type="submit"]');
+      
+      await expect(nameInput).toBeVisible();
+      await expect(emailInput).toBeVisible();
+      await expect(submitButton).toBeVisible();
+      
+      await nameInput.fill('Test User');
+      await emailInput.fill('test@example.com');
+      
+      expect(await nameInput.inputValue()).toBe('Test User');
+      expect(await emailInput.inputValue()).toBe('test@example.com');
+    });
+  }
+  
+  for (const device of devices) {
+    test(`${device.name} - 图片资源加载正常`, async ({ page }) => {
+      await page.setViewportSize(device.viewport);
+      await page.goto('/');
+      
+      const images = page.locator('img');
+      const imageCount = await images.count();
+      
+      for (let i = 0; i < imageCount; i++) {
+        const image = images.nth(i);
+        await expect(image).toHaveJSProperty('naturalWidth', { timeout: 5000 });
+      }
+    });
+  }
+  
+  test('移动端 - 横屏布局适配', async ({ page }) => {
+    await page.setViewportSize({ width: 844, height: 390 });
+    await page.goto('/');
+    
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('main')).toBeVisible();
+    
+    const headerHeight = await page.locator('header').evaluate(el => el.offsetHeight);
+    expect(headerHeight).toBeLessThan(100);
+  });
+  
+  test('移动端 - 触摸事件支持', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto('/');
+    
+    const button = page.locator('button').first();
+    await expect(button).toBeVisible();
+    
+    await button.tap();
+    
+    await expect(button).toBeVisible();
+  });
+});