[oysters.dev v2] 軽微な修正

.github/workflows/CI.yml

@@ -36,7 +36,7 @@ jobs:
 
             | Name | Link |
             |----|----|
-            | :hammer: Latest commit | ${{ github.sha }} |
+            | :hammer: Latest commit | ${{ github.event.pull_request.head.sha }} |
             | :sunglasses: Deploy Preview | ${{ steps.netlify.outputs.netlify-url }} |
           comment_tag: deploy-preview
 

.lintstagedrc.js

@@ -1,10 +1,10 @@
 /** @type {import('lint-staged').Config} */
 export default {
-  '*.{css,scss,astro}': ['npm run fix:css', 'npm run fix:format'],
-  '*.{js,cjs,mjs,ts,jsx,tsx,astro}': [
+  '**.{css,scss,astro}': ['npm run fix:css', 'npm run fix:format'],
+  '**.{js,cjs,mjs,ts,jsx,tsx,astro}': [
     'npm run fix:js',
     'npm run fix:format',
     () => 'npm run type-check'
   ],
-  '*.{md,html,json,yaml,yml}': ['npm run fix:format']
+  '**.{md,html,json,yaml,yml}': ['npm run fix:format']
 }

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 actualDir = `${workDir}/actual`
@@ -10,6 +9,18 @@ test.describe('Capture screenshots', () => {
       const isExpectedDir = expectedDir === dir
 
       await page.goto(isExpectedDir ? 'https://oysters.dev' : '/')
+
+      // loading='lazy'が指定されている画像を読み込む
+      await page.evaluate(async () => {
+        const browserHeight = window.innerHeight
+        const pageHeight = document.body.scrollHeight
+
+        for (let i = 0; i < pageHeight; i += browserHeight) {
+          window.scrollTo(0, i)
+          await new Promise((r) => window.setTimeout(r, 100))
+        }
+      })
+
       await page.screenshot({
         path: `${dir}/${info.title}/${info.project.name}.png`,
         fullPage: true,