feat: extend Playwright config for mobile testing

e2e/playwright.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, devices } from '@playwright/test';
 import { getEnvironment } from './src/config/environments';
+import { getMobileDevices } from './src/utils/devices';
 
 const env = getEnvironment();
 
@@ -59,6 +60,35 @@ export default defineConfig({
       name: 'Mobile Safari',
       use: { ...devices['iPhone 12'] },
     },
+    ...getMobileDevices().map(device => ({
+      name: `mobile-${device.name.replace(/\s+/g, '-').toLowerCase()}`,
+      use: {
+        ...devices['Mobile Chrome'],
+        viewport: device.viewport,
+        userAgent: device.userAgent,
+        deviceScaleFactor: device.deviceScaleFactor,
+        isMobile: true,
+      },
+    })),
+    {
+      name: 'performance-mobile',
+      use: {
+        ...devices['Mobile Chrome'],
+        viewport: { width: 375, height: 667 },
+        isMobile: true,
+      },
+      testMatch: /.*\.perf\.spec\.ts/,
+    },
+    {
+      name: 'pwa-mobile',
+      use: {
+        ...devices['Mobile Chrome'],
+        viewport: { width: 375, height: 667 },
+        isMobile: true,
+        serviceWorkers: 'allow',
+      },
+      testMatch: /.*\.pwa\.spec\.ts/,
+    },
   ],
   webServer: env.name === 'development' ? {
     command: 'cd .. && npm run dev',