Integrate Argos CI for visual regression testing and streamline screenshot comparison

tests/visual.test.ts

@@ -1,4 +1,5 @@
-import test, { expect, Page } from '@playwright/test';
+import test, { expect } from '@playwright/test';
+import { argosScreenshot } from "@argos-ci/playwright"
 import fs from "fs"
 import path from "path"
 
@@ -8,13 +9,8 @@ const htmlFiles = fs.readdirSync(previewDir).filter((file) => file.endsWith(".ht
 
 for (const file of htmlFiles.slice(0, 10)) {
 	test(`Compare ${file}`, async ({ page }) => {
-		const filePath = `file://${path.join(previewDir, file)}`
-		await page.goto(filePath)
-
-		// Wait for page load
+		await page.goto(`file://${path.join(previewDir, file)}`)
 		await page.waitForLoadState("networkidle")
-
-		// Take a screenshot and compare
-		await expect(page).toHaveScreenshot(`${file}.png`)
+		await argosScreenshot(page, `${page}`)
 	})
 }