Sync

e2e/collections/BlogPage.ts

@@ -1,6 +1,9 @@
 import { BasePage } from "./BasePage.js"
 
 export class BlogPage extends BasePage {
+  codeBlock = (header: string) =>
+    this.el(`h2:has-text("${header}") ~ .code-block`)
+
   async goto(path = "") {
     await this.frame.goto(`/blog${path}`)
   }

e2e/test/blog.test.ts

@@ -50,4 +50,37 @@ test.describe("Blog page", async () => {
       })
     })
   })
+
+  test.describe("snapshots", () => {
+    test("post header", async ({ blogPage, page }) => {
+      await blogPage.goto("/efficient-prisma-pagination")
+      await expect(page.locator("article header")).toHaveScreenshot(
+        "header.png",
+      )
+    })
+
+    test("basic code block", async ({ blogPage }) => {
+      await blogPage.goto("/efficient-prisma-pagination")
+      const single = blogPage.codeBlock("Representing state in the URL").first()
+      const multi = blogPage.codeBlock("Previous/next links").last()
+      const lineNumbers = blogPage.codeBlock("The search query")
+
+      await expect(single).toHaveScreenshot("single-line.png")
+      await expect(multi).toHaveScreenshot("multi-line.png")
+      await expect(lineNumbers.nth(0)).toHaveScreenshot("line-numbers.png")
+      await expect(lineNumbers.nth(1)).toHaveScreenshot(
+        "line-numbers-highlight.png",
+      )
+    })
+
+    test("code block titles", async ({ blogPage }) => {
+      await blogPage.goto("/using-yarn-constraints")
+      const title = blogPage.codeBlock("Let’s see an example").first()
+      await expect(title).toHaveScreenshot("title.png")
+
+      await blogPage.goto("/automated-npm-publishing-using-github-actions")
+      const lineNumbers = blogPage.codeBlock("Basic publish action").first()
+      await expect(lineNumbers).toHaveScreenshot("title-line-numbers.png")
+    })
+  })
 })

playwright.config.ts

@@ -1,14 +1,15 @@
-import { expect, PlaywrightTestConfig } from "@playwright/test"
+import { defineConfig, expect } from "@playwright/test"
 import axeMatchers from "expect-axe-playwright"
 import { fileURLToPath } from "node:url"
 
 expect.extend(axeMatchers)
 
-const config: PlaywrightTestConfig = {
+export default defineConfig({
   forbidOnly: !!process.env.CI,
   fullyParallel: true,
   reporter: process.env.CI ? "dot" : "list",
   retries: process.env.CI ? 2 : 0,
+  snapshotPathTemplate: "{testDir}/__snapshots__/{testFilePath}/{arg}{ext}",
   testDir: fileURLToPath(new URL("./e2e/test", import.meta.url)),
   use: {
     axeOptions: {
@@ -27,6 +28,4 @@ const config: PlaywrightTestConfig = {
     stdout: "ignore",
     url: "http://127.0.0.1:3000",
   },
-}
-
-export default config
+})