diff --git a/.github/workflows/check-e2e.yml b/.github/workflows/check-e2e.yml
index 50a67ba86..534ed647e 100644
--- a/.github/workflows/check-e2e.yml
+++ b/.github/workflows/check-e2e.yml
@@ -76,13 +76,21 @@ jobs:
             npm run test:e2e -- --project ${{ matrix.browser }};
           fi
 
-      # We don't care about the logs in visual snapshot tests, only the images.
+      # If a build succeeds, clear any artifacts from failed retries, so they
+      # don't end up in the visual diff archive.
+      - name: Cleanup artifacts
+        if: success()
+        run: |
+          rm -rf tests/artifacts/*
+
+      # We don't care about logs in visual snapshot tests, only the images.
       - name: Cleanup artifacts
         if: always()
         run: |
           if [ ${{ matrix.browser }} = "visual" ]; then
-              shopt -s globstar
-              rm -rf tests/visual/snapshots/**/*.log
+            shopt -s globstar;
+            rm -rf tests/artifacts/**/*.log;
+          fi
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v3
diff --git a/tests/visual/markdown.spec.ts b/tests/visual/markdown.spec.ts
new file mode 100644
index 000000000..ecd339f09
--- /dev/null
+++ b/tests/visual/markdown.spec.ts
@@ -0,0 +1,148 @@
+import type { Page } from "@playwright/test";
+import { test, expect, projectFixtureUrl } from "@tests/support/fixtures.js";
+
+async function goToSection(section: string, page: Page) {
+  await page.goto(`${projectFixtureUrl}/tree/main/markdown/cheatsheet.md`, {
+    waitUntil: "networkidle",
+  });
+  await page.locator(`[href="${section}"]`).click();
+}
+
+test.describe("markdown rendering", async () => {
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 450 } });
+    test("table of contents", async ({ page }) => {
+      await page.goto(
+        `${projectFixtureUrl}/tree/main/markdown/cheatsheet.md#table-of-contents`,
+        {
+          waitUntil: "networkidle",
+        },
+      );
+      await expect(page.locator("text=Table of Contents")).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 1030 } });
+    test("headers", async ({ page }) => {
+      await goToSection("#headers", page);
+      await expect(page.locator("text=###### H6")).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 470 } });
+    test("emphasis", async ({ page }) => {
+      await goToSection("#emphasis", page);
+      await expect(page.locator("text=Emphasis, aka").first()).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 1100 } });
+    test("lists", async ({ page }) => {
+      await goToSection("#lists", page);
+      await expect(
+        page.locator("text=First ordered list").first(),
+      ).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 1024 } });
+    test("links", async ({ page }) => {
+      await goToSection("#links", page);
+      await expect(page.locator("text=There are two ways")).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 520 } });
+    test("images", async ({ page }) => {
+      await goToSection("#images", page);
+      await expect(page.locator("text=Here's our logo").first()).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 1130 } });
+    test("code and syntax highlighting", async ({ page }) => {
+      await goToSection("#code", page);
+      await expect(page.locator("text=Code blocks are part")).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 590 } });
+    test("footnotes", async ({ page }) => {
+      await goToSection("#footnotes", page);
+      await expect(page.locator("text=Footnotes aren't part")).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 1100 } });
+    test("tables", async ({ page }) => {
+      await goToSection("#tables", page);
+      await expect(
+        page.locator("text=Tables aren't part of the"),
+      ).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 450 } });
+    test("blockquotes", async ({ page }) => {
+      await goToSection("#blockquotes", page);
+      await expect(page.locator("text=Blockquotes are").first()).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 510 } });
+    test("inline HTML", async ({ page }) => {
+      await goToSection("#html", page);
+      await expect(
+        page.locator("text=You can also use raw HTML"),
+      ).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 710 } });
+    test("horizontal rule", async ({ page }) => {
+      await goToSection("#hr", page);
+      await expect(page.locator("text=Three or more...").first()).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 625 } });
+    test("line breaks", async ({ page }) => {
+      await goToSection("#lines", page);
+      await expect(page.locator("text=My basic recommendation")).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+
+  test.describe(async () => {
+    test.use({ viewport: { width: 1280, height: 500 } });
+    test("videos", async ({ page }) => {
+      await goToSection("#videos", page);
+      await expect(page.locator("text=They can't be added")).toBeVisible();
+      await expect(page).toHaveScreenshot();
+    });
+  });
+});
diff --git a/tests/visual/project.spec.ts b/tests/visual/project.spec.ts
index 76c4c2112..c889f824a 100644
--- a/tests/visual/project.spec.ts
+++ b/tests/visual/project.spec.ts
@@ -42,13 +42,7 @@ test("commit page", async ({ page }) => {
   await page.goto(
     `${projectFixtureUrl}/remotes/${aliceRemote}/commits/d6318f7f3d9c15b8ac6dd52267c53220d00f0982`,
   );
-  await expect(page).toHaveScreenshot({ fullPage: true });
-});
-
-test("markdown rendering", async ({ page }) => {
-  await page.goto(`${projectFixtureUrl}/tree/main/markdown/cheatsheet.md`, {
-    waitUntil: "networkidle",
-  });
+  await expect(page.locator("text=subconscious.txt added")).toBeVisible();
   await expect(page).toHaveScreenshot({ fullPage: true });
 });