VRTの追加

package.json

@@ -16,7 +16,8 @@
     "lint-css:check": "stylelint src/**/* --max-warnings=0",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "test:e2e:update": "playwright test --update-snapshots"
   },
   "dependencies": {
     "@tanstack/react-query": "4.35.0",

src/components/page/Index/index.spec.ts

@@ -69,9 +69,6 @@ test.describe("Index page", () => {
         },
         { highchartsSeriesSelector, initialCheckedNumber },
       );
-
-      const seriesList = await page.locator(highchartsSeriesSelector).all();
-      await expect(seriesList).toHaveLength(initialCheckedNumber);
     });
   });
 
@@ -190,4 +187,18 @@ test.describe("Index page", () => {
       expect(chartTitle).not.toBe(chartTitle2);
     });
   });
+
+  test.describe("visual regression", () => {
+    test("initial render", async ({ page }) => {
+      await page.waitForFunction(
+        ({ highchartsSeriesSelector, initialCheckedNumber }) => {
+          return document.querySelectorAll(highchartsSeriesSelector).length === initialCheckedNumber;
+        },
+        { highchartsSeriesSelector, initialCheckedNumber },
+      );
+
+      await page.waitForTimeout(1000);
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    });
+  });
 });