init

tests/capture.spec.ts

@@ -0,0 +1,53 @@
+import { expect, type Page, test } from "@playwright/test";
+
+type TestPage = {
+  pageName: string;
+  url: string;
+};
+
+const genTimestamp = (): string =>
+  Intl.DateTimeFormat("sv-SE", {
+    dateStyle: "short",
+  }).format(Date.now());
+
+const takeFullPageScreenshot = async (page: Page, name: string): Promise<void> => {
+  await page.screenshot({ fullPage: false, path: `captures/${name}`, type: "png" });
+};
+
+// TODO: Faire des tests spécifiques pour chaque page, que l'on puisse attendre que toutes les images dans la vue soient chargées, et prendre des captures à différentes positions dans la page.
+
+Array.from<TestPage>([
+  {
+    pageName: "home",
+    url: "https://haikuatelier.gcch.local/",
+  },
+  {
+    pageName: "shop",
+    url: "https://haikuatelier.gcch.local/shop/",
+  },
+  {
+    pageName: "about",
+    url: "https://haikuatelier.gcch.local/about/",
+  },
+  {
+    pageName: "category",
+    url: "https://haikuatelier.gcch.local/product-category/rings/",
+  },
+  {
+    pageName: "product",
+    url: "https://haikuatelier.gcch.local/product/fuyou-long-earrings-silver/",
+  },
+]).forEach(({ pageName, url }) => {
+  test(pageName, async ({ page }, testInfo) => {
+    await page.goto(url);
+
+    const projectName = testInfo.project.name;
+    const timestamp: string = genTimestamp();
+    const viewport = page.viewportSize();
+
+    const captureName = `${pageName}/${projectName}-${viewport?.width}-${viewport?.height} ${timestamp}.png`;
+
+    await takeFullPageScreenshot(page, captureName);
+    await expect(page).toHaveURL(url);
+  });
+});