diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index d4f54c3..1810153 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -68,6 +68,7 @@ repos:
         name: "Run typos through pixi"
         entry: pixi run check-typos
         language: system
+        exclude: "^.*\\.png"
       - id: pixi-mypy
         name: "Run mypy through pixi"
         entry: pixi run check-mypy
diff --git a/src/toolbar.ts b/src/toolbar.ts
index dbdc914..2381b0e 100644
--- a/src/toolbar.ts
+++ b/src/toolbar.ts
@@ -45,6 +45,7 @@ abstract class InfoOnlyToolbar extends Widget {
 
     const div = document.createElement("div");
     div.className = "toolbar-group-cols-rows";
+    div.setAttribute("data-testid", "toolbar-group-cols-rows");
     const labelCols = document.createElement("span");
     const labelRows = document.createElement("span");
 
@@ -105,9 +106,9 @@ abstract class DropdownToolbar extends InfoOnlyToolbar {
       select.appendChild(option);
     }
     selectDiv.appendChild(label);
-
     const node = Styling.wrapSelect(select);
     node.classList.add("toolbar-dropdown");
+    node.setAttribute("data-testid", "toolbar-dropdown");
     selectDiv.appendChild(node);
     return selectDiv;
   }
diff --git a/ui-tests/tests/arbalister.spec.ts b/ui-tests/tests/arbalister.spec.ts
index cc58af7..b11407f 100644
--- a/ui-tests/tests/arbalister.spec.ts
+++ b/ui-tests/tests/arbalister.spec.ts
@@ -1,10 +1,40 @@
-import { expect, test } from "@jupyterlab/galata";
+import { expect, galata, type IJupyterLabPageFixture, test } from "@jupyterlab/galata";
+
+import path from "node:path";
+
+async function openFile(page: IJupyterLabPageFixture, filename: string) {
+  await page.goto();
+  const tmpPath = "arbalister-viewer-tests";
+  const target = `${tmpPath}/${filename}`;
+  await page.notebook.openByPath(target);
+  await page.notebook.activate(target);
+  await page.waitForTimeout(10000);
+}
+
+async function checkFile(page: IJupyterLabPageFixture, filename: string, snapshotFile: string) {
+  await openFile(page, filename);
+  expect(await page.screenshot()).toMatchSnapshot({
+    name: snapshotFile,
+    maxDiffPixelRatio: 0.02,
+  });
+}
+
+async function checkToolbar(page: IJupyterLabPageFixture) {
+  const text = page.getByTestId(`toolbar-group-cols-rows`);
+  await expect(text).toBeVisible();
+
+  const rows = page.locator(".toolbar-group-cols-rows .toolbar-label:not(.cols)");
+  await expect(rows).toHaveText("3 rows;");
+
+  const cols = page.locator(".toolbar-group-cols-rows .toolbar-label.cols");
+  await expect(cols).toHaveText("3 columns");
+}
 
 /**
  * Don't load JupyterLab webpage before running the tests.
  * This is required to ensure we capture all log messages.
  */
-test.use({ autoGoto: false });
+test.use({ autoGoto: false, tmpPath: "arbalister-viewer-tests" });
 
 test("should emit an activation console message", async ({ page }) => {
   const logs: string[] = [];
@@ -17,3 +47,35 @@ test("should emit an activation console message", async ({ page }) => {
 
   expect(logs.filter((s) => s === "Launching JupyterLab extension arbalister")).toHaveLength(1);
 });
+
+test.describe
+  .serial("Arbalister Viewer", () => {
+    test.beforeAll(async ({ request, tmpPath }) => {
+      const contents = galata.newContentsHelper(request);
+      await contents.uploadFile(
+        path.resolve(__dirname, `./test-files/test.csv`),
+        `${tmpPath}/test.csv`,
+      );
+
+      await contents.uploadFile(
+        path.resolve(__dirname, `./test-files/test.parquet`),
+        `${tmpPath}/test.parquet`,
+      );
+    });
+
+    test.afterAll(async ({ request, tmpPath }) => {
+      const contents = galata.newContentsHelper(request);
+      await contents.deleteDirectory(tmpPath);
+    });
+
+    test("open csv file and change a delimiter", async ({ page }) => {
+      await checkFile(page, "test.csv", "arbalister_viewer_csv.png");
+      await page.notebook.close(true);
+    });
+
+    test("open parquet file", async ({ page }) => {
+      await checkFile(page, "test.parquet", "arbalister_viewer_parquet.png");
+      await checkToolbar(page);
+      await page.notebook.close(true);
+    });
+  });
diff --git a/ui-tests/tests/arbalister.spec.ts-snapshots/arbalister-viewer-csv-linux.png b/ui-tests/tests/arbalister.spec.ts-snapshots/arbalister-viewer-csv-linux.png
new file mode 100644
index 0000000..47c0e6b
Binary files /dev/null and b/ui-tests/tests/arbalister.spec.ts-snapshots/arbalister-viewer-csv-linux.png differ
diff --git a/ui-tests/tests/arbalister.spec.ts-snapshots/arbalister-viewer-parquet-linux.png b/ui-tests/tests/arbalister.spec.ts-snapshots/arbalister-viewer-parquet-linux.png
new file mode 100644
index 0000000..c60cf8c
Binary files /dev/null and b/ui-tests/tests/arbalister.spec.ts-snapshots/arbalister-viewer-parquet-linux.png differ
diff --git a/ui-tests/tests/test-files/test.csv b/ui-tests/tests/test-files/test.csv
new file mode 100644
index 0000000..f038986
--- /dev/null
+++ b/ui-tests/tests/test-files/test.csv
@@ -0,0 +1,4 @@
+id,flag,score
+1,True,12.0
+2,False,65.0
+3,True,38.2
diff --git a/ui-tests/tests/test-files/test.parquet b/ui-tests/tests/test-files/test.parquet
new file mode 100644
index 0000000..3d69bc1
Binary files /dev/null and b/ui-tests/tests/test-files/test.parquet differ