feat(vrt): スクリーンショットのバリエーションの追加

- ライト/ダークモード
- 画面サイズ（デスクトップ用）
- 画面向き（モバイル用）

playwright.config.ts

@@ -11,24 +11,35 @@ export default defineConfig({
     baseURL: 'http://localhost:4321',
     trace: 'on-first-retry'
   },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] }
-    },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] }
-    },
-    {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 6a'] }
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 13 mini'] }
-    }
-  ],
+  projects: ['dark', 'light'].flatMap((colorScheme) => [
+    // PC
+    ...[
+      { name: 'Desktop Chrome', device: 'Desktop Chrome' },
+      { name: 'Desktop Safari', device: 'Desktop Safari' }
+    ].flatMap(({ name, device }) =>
+      [640, 768, 1024, 1280, 1536].flatMap((width) => ({
+        name: `${name}/W${width}px/${colorScheme}`,
+        use: { ...devices[device], viewport: { width, height: 1080 } },
+        colorScheme
+      }))
+    ),
+    // Mobile
+    ...[
+      { name: 'Mobile Chrome', device: 'Pixel 7' },
+      { name: 'Mobile Safari', device: 'iPhone 13 Mini' }
+    ].flatMap(({ name, device }) => [
+      {
+        name: `${name}/Portrait/${colorScheme}`,
+        use: devices[device],
+        colorScheme
+      },
+      {
+        name: `${name}/Landscape/${colorScheme}`,
+        use: devices[`${device} landscape`],
+        colorScheme
+      }
+    ])
+  ]),
   webServer: {
     command: 'npm run build && npm run preview',
     url: 'http://localhost:4321',

tests/vrt.spec.ts

@@ -1,5 +1,4 @@
 import { test } from '@playwright/test'
-
 test.describe('Capture screenshots', () => {
   const workDir = '.reg'
   const saveDir = `${workDir}/screenshots`