chore(ci): enhance CI pipeline with playwright container and adjust job dependencies (#739)

.github/workflows/ci-pipeline.yml

@@ -33,7 +33,7 @@ jobs:
 
   setup:
     name: Setup Dependencies
-    needs: check_changes
+    needs: [check_changes]
     if: ${{ needs.check_changes.outputs.exists == 'true' }}
     runs-on: ubuntu-latest
     steps:
@@ -50,6 +50,7 @@ jobs:
           lookup-only: true
 
       - name: Setup Node.js
+        if: steps.check-node-modules-cache.outputs.cache-hit != 'true'
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
@@ -66,22 +67,24 @@ jobs:
 
   quality_checks:
     name: ${{ matrix.name }}
-    needs: [check_changes, setup]
+    needs: [setup]
     if: ${{ needs.check_changes.outputs.exists == 'true' }}
     runs-on: ubuntu-latest
     strategy:
       matrix:
         include:
-          - check: lint
-            name: Lint
-          - check: format
-            name: Format
-          - check: test
-            name: Test
-          - check: spell
-            name: Spell Check
-          - check: build
-            name: Build
+          - name: Lint
+            check: lint
+          - name: Format
+            check: format
+          - name: Test
+            check: test
+          - name: Build
+            check: build
+          - name: TypeScript
+            check: typecheck
+          - name: Spell Check
+            check: spell
     steps:
       - uses: actions/checkout@v4
 
@@ -119,11 +122,22 @@ jobs:
       - name: Run ${{ matrix.name }}
         run: pnpm exec turbo run ${{ matrix.check }}
 
+      - name: Upload Build Artifact
+        if: matrix.name == 'Build'
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-dist-${{ github.sha }}
+          path: dist/
+
+  # We should depend on quality checks to save CI running time.
   playwright:
     name: Playwright Tests
-    needs: [check_changes, setup]
+    needs: [setup, quality_checks]
     if: ${{ needs.check_changes.outputs.exists == 'true' }}
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.54.1-noble
+      options: --user 1001
     steps:
       - uses: actions/checkout@v4
         with:
@@ -146,10 +160,12 @@ jobs:
           key: ${{ runner.os }}-node-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: ${{ runner.os }}-node-modules-
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Download Build Artifact
+        uses: actions/download-artifact@v4
         with:
-          node-version: lts/*
+          path: dist/
+          pattern: build-dist*
+          merge-multiple: true
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
@@ -160,16 +176,6 @@ jobs:
         if: steps.cache.outputs.cache-hit != 'true'
         run: pnpm install --frozen-lockfile
 
-      - name: Cache Playwright Browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: ${{ runner.os }}-playwright-
-
-      - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
-
       - name: Run Playwright Tests
         run: pnpm exec turbo run test:playwright
         timeout-minutes: 10

.gitignore

@@ -33,5 +33,6 @@ npm-debug.log*
 
 # cache
 .eslintcache
+.cspellcache
 # Turborepo
 .turbo

lefthook.yaml

@@ -1,5 +1,7 @@
 pre-commit:
   piped: true
+  exclude:
+    - pnpm-lock.yaml
   commands:
     prettier:
       priority: 1
@@ -36,7 +38,7 @@ cspell:
     base:
       glob: "*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,d.ts,astro,json,yaml,yml,md,mdx}"
       run: |
-        pnpm cspell {staged_files}
+        pnpm cspell {staged_files} --cache --cache-strategy=content --cache-location=.cspellcache
       stage_fixed: true
 
 commit-msg:

package.json

@@ -9,10 +9,10 @@
   "scripts": {
     "dev": "astro dev --port 3000",
     "start": "astro preview --port 3000",
-    "build": "astro check && astro build",
+    "build": "astro build",
     "preview": "astro preview --port 3000",
     "wrangler": "wrangler",
-    "astro": "astro",
+    "typecheck": "astro check",
     "lint": "eslint . --max-warnings=0 --cache",
     "lint:fix": "eslint . --fix",
     "spell": "cspell \"**/*.{ts,tsx,js,jsx,astro,md,json,yml,yaml}\"",

playwright.config.ts

@@ -1,69 +1,38 @@
 import { defineConfig, devices } from '@playwright/test'
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
 export default defineConfig({
   testDir: './src/tests',
   testIgnore: ['**.test.ts'],
   fullyParallel: true,
   forbidOnly: Boolean(process.env.CI),
   retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
   use: {
     baseURL: 'http://localhost:3000',
     trace: 'on-first-retry',
   },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
-
-  /* Run your local dev server before starting the tests */
+  projects: process.env.CI
+    ? [
+        {
+          name: 'firefox',
+          use: { ...devices['Desktop Firefox'] },
+        },
+      ]
+    : [
+        {
+          name: 'chromium',
+          use: { ...devices['Desktop Chrome'] },
+        },
+        {
+          name: 'firefox',
+          use: { ...devices['Desktop Firefox'] },
+        },
+        {
+          name: 'webkit',
+          use: { ...devices['Desktop Safari'] },
+        },
+      ],
   webServer: {
     command: process.env.CI ? 'npm run start' : 'npm run dev',
     url: 'http://localhost:3000',

src/components/Sponsors.astro

@@ -1,14 +1,12 @@
 ---
-import h3 from '~/components/Description.astro'
+import Image from 'astro/components/Image.astro'
+import blacksmithLogo from '~/assets/sponsors/blacksmith-logo-dark.svg'
+import crowdinLogo from '~/assets/sponsors/crowdin-logo-dark.svg'
+import tutaLogo from '~/assets/sponsors/tutaLogo-dark.svg'
 import { getLocale, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 
-import tutaLogo from '~/assets/sponsors/tutaLogo-dark.svg'
-import blacksmithLogo from '~/assets/sponsors/blacksmith-logo-dark.svg'
-import crowdinLogo from '~/assets/sponsors/crowdin-logo-dark.svg'
-
-import Image from 'astro/components/Image.astro'
 const { showSponsors = true } = Astro.props
 
 const {

src/components/download/release-data.ts

@@ -59,3 +59,52 @@ export function getReleasesWithChecksums(locale: string) {
     }
   }
 }
+
+export function getReleases(locale: string) {
+  const {
+    routes: {
+      download: {
+        links: { macos, windows, linux },
+      },
+    },
+  } = getUI(locale)
+
+  return {
+    macos: {
+      universal: {
+        link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-universal.dmg',
+        label: macos.universal,
+      },
+    },
+    windows: {
+      x86_64: {
+        link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer.exe',
+        label: windows['64bit'],
+      },
+      arm64: {
+        link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer-arm64.exe',
+        label: windows.ARM64,
+      },
+    },
+    linux: {
+      x86_64: {
+        tarball: {
+          link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-x86_64.tar.xz',
+          label: linux.x86_64,
+        },
+      },
+      aarch64: {
+        tarball: {
+          link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-aarch64.tar.xz',
+          label: linux.aarch64,
+        },
+      },
+      flathub: {
+        all: {
+          link: 'https://flathub.org/apps/app.zen_browser.zen',
+          label: linux.flathub,
+        },
+      },
+    },
+  }
+}

src/pages/[...locale]/download.astro

@@ -1,18 +1,15 @@
 ---
-import Description from '~/components/Description.astro'
-import DownloadScript from '~/components/download/DownloadScript.astro'
-import PlatformDownload from '~/components/download/PlatformDownload.astro'
-import { getReleasesWithChecksums } from '~/components/download/release-data'
-import Layout from '~/layouts/Layout.astro'
-import { getChecksums } from '~/utils/githubChecksums'
-import { getLocale, getUI } from '~/utils/i18n'
-
 import { icon, library } from '@fortawesome/fontawesome-svg-core'
 import { faApple, faGithub, faLinux, faWindows } from '@fortawesome/free-brands-svg-icons'
 import Image from 'astro/components/Image.astro'
-
 import AppIconDark from '~/assets/app-icon-dark.png'
 import AppIconLight from '~/assets/app-icon-light.png'
+import Description from '~/components/Description.astro'
+import DownloadScript from '~/components/download/DownloadScript.astro'
+import PlatformDownload from '~/components/download/PlatformDownload.astro'
+import { getReleases } from '~/components/download/release-data'
+import Layout from '~/layouts/Layout.astro'
+import { getLocale, getUI } from '~/utils/i18n'
 
 export { getStaticPaths } from '~/utils/i18n'
 
@@ -27,8 +24,7 @@ const windowsIcon = icon({ prefix: 'fab', iconName: 'windows' })
 const linuxIcon = icon({ prefix: 'fab', iconName: 'linux' })
 const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
 
-const checksums = await getChecksums()
-const releases = getReleasesWithChecksums(locale)(checksums)
+const releases = getReleases(locale)
 
 const platformDescriptions = download.platformDescriptions
 ---

turbo.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://turborepo.com/schema.json",
+  "globalPassThroughEnv": ["PLAYWRIGHT_*"],
   "tasks": {
     "dev": {
       "cache": false,
@@ -33,7 +34,6 @@
     },
     "test:playwright": {
       "cache": true,
-      "dependsOn": ["build"],
       "inputs": ["src"],
       "outputs": ["playwright-report/**", "test-results/**"]
     }