feat: add mobile PWA functionality test suite

2026-03-05 15:48:07 +08:00
parent edb8b249f8
commit 0074a9aab1
1 changed files with 114 additions and 0 deletions
@@ -0,0 +1,114 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('移动端 PWA 功能测试 @mobile @pwa', () => {
+  test('Service Worker 注册成功', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto('/');
+    
+    const swRegistration = await page.evaluate(() => {
+      return new Promise((resolve) => {
+        if ('serviceWorker' in navigator) {
+          navigator.serviceWorker.getRegistration().then((registration) => {
+            resolve(registration !== null);
+          }).catch(() => {
+            resolve(false);
+          });
+        } else {
+          resolve(false);
+        }
+      });
+    });
+    
+    expect(swRegistration).toBe(true);
+  });
+  
+  test('离线功能正常', async ({ page, context }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    
+    await context.setOffline(true);
+    
+    await page.reload();
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('main')).toBeVisible();
+    
+    await context.setOffline(false);
+  });
+  
+  test('离线缓存功能正常', async ({ page, context }) => {
+    await page.setViewportSize({ width: 414, height: 896 });
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    
+    await context.setOffline(true);
+    
+    await page.reload();
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('main')).toBeVisible();
+    
+    await context.setOffline(false);
+  });
+  
+  test('PWA manifest 加载正常', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto('/');
+    
+    const manifestLink = await page.evaluate(() => {
+      const link = document.querySelector('link[rel="manifest"]');
+      return link ? link.getAttribute('href') : null;
+    });
+    
+    expect(manifestLink).toBeTruthy();
+  });
+  
+  test('PWA 可安装提示', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto('/');
+    
+    const beforeInstallPrompt = await page.evaluate(() => {
+      return new Promise((resolve) => {
+        let promptFired = false;
+        
+        window.addEventListener('beforeinstallprompt', () => {
+          promptFired = true;
+          resolve(true);
+        });
+        
+        setTimeout(() => {
+          resolve(promptFired);
+        }, 2000);
+      });
+    });
+    
+    expect(beforeInstallPrompt).toBeDefined();
+  });
+  
+  test('PWA 响应式设计', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto('/');
+    
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('main')).toBeVisible();
+    await expect(page.locator('footer')).toBeVisible();
+    
+    await page.setViewportSize({ width: 768, height: 1024 });
+    
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('main')).toBeVisible();
+    await expect(page.locator('footer')).toBeVisible();
+  });
+  
+  test('PWA 离线页面显示', async ({ page, context }) => {
+    await page.setViewportSize({ width: 414, height: 896 });
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    
+    await context.setOffline(true);
+    
+    await page.goto('/offline');
+    await expect(page.locator('h1')).toContainText('离线');
+    
+    await context.setOffline(false);
+  });
+});