diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml
index 6c87f04775..d0bc403759 100644
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -15,7 +15,7 @@ env:
 
 jobs:
   update-screenshots:
-    if: ${{ github.event.label.name == 'Update Screenshots' }}
+    if: ${{ github.event.label.name == 'Update Screenshots' || github.event_name == 'workflow_dispatch' }}
     runs-on: ubuntu-latest
 
     permissions:
diff --git a/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png b/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png
new file mode 100644
index 0000000000..784b3ce76d
Binary files /dev/null and b/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png differ
diff --git a/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-firefox-linux.png b/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-firefox-linux.png
new file mode 100644
index 0000000000..6c54a4684b
Binary files /dev/null and b/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-firefox-linux.png differ
diff --git a/test/visual/treeGrid.test.tsx b/test/visual/treeGrid.test.tsx
new file mode 100644
index 0000000000..6b9c67840d
--- /dev/null
+++ b/test/visual/treeGrid.test.tsx
@@ -0,0 +1,89 @@
+import { page } from 'vitest/browser';
+
+import { SelectColumn, TreeDataGrid, type Column } from '../../src';
+import { getTreeGrid } from '../browser/utils';
+
+interface Row {
+  id: number;
+  country: string;
+  year: number;
+}
+
+type SummaryRow = undefined;
+
+const topSummaryRows: readonly SummaryRow[] = [undefined];
+const bottomSummaryRows: readonly SummaryRow[] = [undefined];
+
+const columns: readonly Column<Row, SummaryRow>[] = [
+  SelectColumn,
+  {
+    key: 'sport',
+    name: 'Sport'
+  },
+  {
+    key: 'country',
+    name: 'Country'
+  },
+  {
+    key: 'year',
+    name: 'Year'
+  },
+  {
+    key: 'id',
+    name: 'Id',
+    renderGroupCell({ childRows }) {
+      return Math.min(...childRows.map((c) => c.id));
+    }
+  }
+];
+
+const rows: readonly Row[] = [
+  {
+    id: 1,
+    country: 'USA',
+    year: 2020
+  },
+  {
+    id: 2,
+    country: 'USA',
+    year: 2021
+  },
+  {
+    id: 3,
+    country: 'Canada',
+    year: 2021
+  },
+  {
+    id: 4,
+    country: 'Canada',
+    year: 2022
+  }
+];
+
+test('tree grid', async () => {
+  await page.render(
+    <TreeDataGrid
+      rowKeyGetter={rowKeyGetter}
+      columns={columns}
+      rows={rows}
+      topSummaryRows={topSummaryRows}
+      bottomSummaryRows={bottomSummaryRows}
+      groupBy={['country', 'year']}
+      rowGrouper={rowGrouper}
+      expandedGroupIds={new Set(['USA', 'USA__2020'])}
+      onExpandedGroupIdsChange={() => {}}
+    />
+  );
+
+  await expect(getTreeGrid()).toMatchScreenshot('tree-grid');
+});
+
+function rowKeyGetter(row: Row) {
+  return row.id;
+}
+
+function rowGrouper(rows: readonly Row[], columnKey: string) {
+  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return Object.groupBy(rows, (r) => r[columnKey]) as Record<string, readonly R[]>;
+}