Feature/playwright tests (#3129)

* initial PoC

* preliminary working config

* first cut at chromatic tests

* first cut at chromatic tests

* fix yaml

* fix yaml again

* use workingDir

* adapt playwright example

* remove env

* fix working directory

* fix more paths

* fix dir

* add playwright setup

* accidentally deleted a step

* update test

* think we don't need home.png right now

* remove unused home.png

---------

Co-authored-by: Richard Kuo <rkuo@rkuo.com>

web/package.json

@@ -1,6 +1,7 @@
 {
   "name": "qa",
-  "version": "0.2-dev",
+  "version": "0.2.0-dev",
+  "version-comment": "version field must be SemVer or chromatic will barf",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -69,7 +70,9 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@chromatic-com/playwright": "^0.10.0",
     "@tailwindcss/typography": "^0.5.10",
+    "chromatic": "^11.18.1",
     "eslint": "^8.48.0",
     "eslint-config-next": "^14.1.0",
     "prettier": "2.8.8"

web/playwright.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  // Other Playwright config options
+  testDir: "./tests/e2e", // Folder for test files
+  // Configure paths for screenshots
+  // expect: {
+  //   toMatchSnapshot: {
+  //     threshold: 0.2, // Adjust the threshold for visual diffs
+  //   },
+  // },
+  // reporter: [["html", { outputFolder: "test-results/output/report" }]], // HTML report location
+  // outputDir: "test-results/output/screenshots", // Set output folder for test artifacts
+});

web/tests/e2e/home.spec.ts

@@ -0,0 +1,27 @@
+// ➕ Add this line
+import { test, expect, takeSnapshot } from "@chromatic-com/playwright";
+
+// Then use as normal 👇
+test("Homepage", async ({ page }, testInfo) => {
+  // Test redirect to login, and redirect to search after login
+
+  // move these into a constants file or test fixture soon
+  let email = "admin_user@test.com";
+  let password = "test";
+
+  await page.goto("http://localhost:3000/search");
+
+  await page.waitForURL("http://localhost:3000/auth/login?next=%2Fsearch");
+
+  await expect(page).toHaveTitle("Danswer");
+
+  await takeSnapshot(page, "Before login", testInfo);
+
+  await page.fill("#email", email);
+  await page.fill("#password", password);
+
+  // Click the login button
+  await page.click('button[type="submit"]');
+
+  await page.waitForURL("http://localhost:3000/search");
+});