Setup VRT

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
         with:
           node-version: 25
           check-latest: true
-      - name: npm install
+      - name: Install dependencies
         run: npm i
       - name: Biome
         run: node --run biome:ci
@@ -33,6 +33,8 @@ jobs:
       - name: Test
         run: node --run test
         timeout-minutes: 4
+      - name: Visual regression test
+        run: node --run visual
       - name: Upload coverage
         uses: codecov/codecov-action@v5
         with:

.github/workflows/update-screenshots.yml

@@ -0,0 +1,57 @@
+name: Update Screenshots
+
+on:
+  pull_request:
+    types: [labeled]
+  workflow_dispatch:
+
+env:
+  AUTHOR_NAME: 'github-actions[bot]'
+  AUTHOR_EMAIL: '41898282+github-actions[bot]@users.noreply.github.com'
+  COMMIT_MESSAGE: |
+    Update screenshots
+
+    Co-authored-by: ${{ github.actor }}
+
+jobs:
+  update-screenshots:
+    if: ${{ github.event.label.name == 'Update Screenshots' }}
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      pull-requests: write
+
+    # one at a time per branch
+    concurrency:
+      group: update-screenshots@${{ github.head_ref  }}
+      cancel-in-progress: true
+
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          ref: ${{ github.head_ref }}
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 25
+          check-latest: true
+      - name: Remove label
+        uses: actions-ecosystem/action-remove-labels@v1
+        with:
+          labels: 'Update Screenshots'
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Install dependencies
+        run: npm i
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium firefox
+      - name: Update screenshots
+        run: |
+          rm -r test/visual/__screenshots__
+          node --run visual:update
+      - name: Push new screenshots
+        run: |
+          git config --global user.name "${{ env.AUTHOR_NAME }}"
+          git config --global user.email "${{ env.AUTHOR_EMAIL }}"
+          git add test/visual/__screenshots__/.
+          git diff-index --quiet HEAD || git commit -m "${{ env.COMMIT_MESSAGE }}"
+          git push

.gitignore

@@ -4,7 +4,7 @@
 /lib
 /node_modules
 /package-lock.json
-__screenshots__
+test/browser/**/__screenshots__
 
 npm-debug.log
 **.orig

package.json

@@ -35,8 +35,10 @@
     "preview": "vite preview",
     "build:website": "vite build",
     "build": "rolldown -c",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
+    "test": "vitest run --project browser --project node --coverage.reportsDirectory='./coverage/test'",
+    "test:watch": "vitest watch --project browser --project node",
+    "visual": "vitest run --project visual --coverage.reportsDirectory='./coverage/visual'",
+    "visual:update": "vitest run --project visual --update",
     "format": "biome format --write",
     "check": "biome check --error-on-warnings",
     "biome:ci": "biome ci --error-on-warnings",

test/visual/basicGrid.test.tsx

@@ -0,0 +1,54 @@
+import { page } from 'vitest/browser';
+
+import { DataGrid, SelectColumn, type Column } from '../../src';
+import { getGrid } from '../browser/utils';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+const columns: readonly Column<Row, Row>[] = [
+  SelectColumn,
+  {
+    key: 'name',
+    name: 'Name',
+    renderSummaryCell(props) {
+      return props.row.name;
+    }
+  }
+];
+
+const rows: readonly Row[] = [
+  { id: 1, name: 'Row 1' },
+  { id: 2, name: 'Row 2' },
+  { id: 3, name: 'Row 3' }
+];
+
+const topSummaryRows: readonly Row[] = [
+  { id: 4, name: 'Top Summary Row 1' },
+  { id: 5, name: 'Top Summary Row 2' }
+];
+
+const bottomSummaryRows: readonly Row[] = [
+  { id: 4, name: 'Top Summary Row 1' },
+  { id: 5, name: 'Top Summary Row 2' }
+];
+
+function rowKeyGetter(row: Row) {
+  return row.id;
+}
+
+test('basic grid', async () => {
+  await page.render(
+    <DataGrid
+      rowKeyGetter={rowKeyGetter}
+      columns={columns}
+      rows={rows}
+      topSummaryRows={topSummaryRows}
+      bottomSummaryRows={bottomSummaryRows}
+    />
+  );
+
+  await expect(getGrid()).toMatchScreenshot('basic-grid');
+});

vite.config.ts

@@ -137,6 +137,26 @@ export default defineConfig(
             setupFiles: ['test/setupBrowser.ts']
           }
         },
+        {
+          extends: true,
+          test: {
+            name: 'visual',
+            include: ['test/visual/*.test.*'],
+            browser: {
+              enabled: true,
+              provider: playwright({
+                contextOptions: {
+                  viewport
+                }
+              }),
+              instances: [{ browser: 'chromium' }, { browser: 'firefox' }],
+              viewport,
+              headless: true,
+              screenshotFailures: false
+            },
+            setupFiles: ['test/setupBrowser.ts']
+          }
+        },
         {
           extends: true,
           test: {