Add proper visual regression testing

.github/workflows/ci.yml

@@ -20,3 +20,27 @@ jobs:
       - run: pnpm build
         env:
           GITHUB_ACCESS_TOKEN: ${{ secrets.BLOG_GH_ACCESS_TOKEN }}
+
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: pnpm
+      - run: pnpm install
+      - run: pnpm exec playwright install --with-deps chromium
+      - run: pnpm test
+        env:
+          GITHUB_ACCESS_TOKEN: ${{ secrets.BLOG_GH_ACCESS_TOKEN }}
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -36,6 +36,5 @@ yarn-error.log*
 next-env.d.ts
 /test-results/
 /playwright-report/
-/playwright-screenshots/
 /blob-report/
 /playwright/.cache/

README.md

@@ -24,8 +24,9 @@ Using this structure, I can subscribe to GitHub's webhooks, and revalidate only
 
 ## Stack
 
-- Next.js
-- GitHub Discussions / Octokit
-- Shiki
-- Remote MDX
-- Tailwind CSS
+- [Next.js](https://nextjs.org/)
+- [GitHub Discussions](https://github.com/timomeh/timomeh.de/discussions) / Octokit
+- [Shiki](https://shiki.style/)
+- [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Playwright](https://playwright.dev/) & [Argos CI](https://argos-ci.com)

next.config.mjs

@@ -15,6 +15,10 @@ const nextConfig = {
         hostname: 'github.com',
         pathname: '/timomeh/timomeh.de/assets/4227520/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+      },
     ],
   },
   async rewrites() {

package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "test": "playwright test",
-    "test:ui": "playwright test --ui"
+    "test:ui": "pnpm test -- --ui"
   },
   "dependencies": {
     "@octokit/graphql": "8.0.1",
@@ -43,6 +43,7 @@
     "shiki": "1.2.1"
   },
   "devDependencies": {
+    "@argos-ci/playwright": "2.0.0",
     "@playwright/test": "1.42.1",
     "@tailwindcss/typography": "0.5.12",
     "@types/ellipsize": "0.1.3",

playwright.config.ts

@@ -17,7 +17,10 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: process.env.CI ? 'github' : 'html',
+  reporter: [
+    process.env.CI ? ['github'] : ['html'],
+    ['@argos-ci/playwright/reporter', { uploadToArgos: !!process.env.CI }],
+  ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL,
@@ -29,7 +32,7 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
+      name: 'chromium-e2e',
       use: { ...devices['Desktop Chrome'] },
     },
   ],