fix: playwright-tests failing (#431)

* fix: playwright test

* split view snippet test

playwright-tests/files-dialog.spec.ts

@@ -0,0 +1,22 @@
+// files-dialog.spec.js
+import { test, expect } from "@playwright/test"
+
+test("files dialog", async ({ page }) => {
+  // Wait for network requests during navigation
+  await Promise.all([
+    page.waitForLoadState("networkidle"),
+    page.goto("http://127.0.0.1:5177/testuser/my-test-board"),
+  ])
+
+  // Wait for run button and files tab to be visible
+  await page.waitForSelector(".run-button", { state: "visible" })
+  const filesTab = await page.waitForSelector('span:has-text("Files")', {
+    state: "visible",
+  })
+
+  // Click and wait for any animations or state changes
+  await filesTab.click()
+  await page.waitForLoadState("networkidle")
+
+  await expect(page).toHaveScreenshot(`view-snippet-files.png`)
+})

playwright-tests/handle-manual-edits.spec.ts

@@ -14,7 +14,7 @@ test("Handle manual edits test", async ({ page }) => {
   await manualEditsFile.waitFor({ state: "visible" })
   await manualEditsFile.click()
 
-  await page.getByRole("textbox").locator("div").click()
+  await page.locator("div").filter({ hasText: /^91›$/ }).first().click()
 
   const pcbPlacementsData = `{
     "pcb_placements": [

playwright-tests/manual-edits.spec.ts

@@ -7,11 +7,11 @@ test("Manual edits test", async ({ page }) => {
   await page.waitForLoadState("networkidle")
 
   const loginButton = page.getByRole("button", { name: "Fake testuser Login" })
-  await loginButton.waitFor({ state: "visible" })
+  // await loginButton.waitFor({ state: "visible" })
   await loginButton.click()
 
   const editorTextbox = page.getByRole("textbox").first()
-  await editorTextbox.waitFor({ state: "visible" })
+  // await editorTextbox.waitFor({ state: "visible" })
   await editorTextbox.click()
 
   await page.keyboard.press("Control+A")
@@ -29,14 +29,15 @@ test("Manual edits test", async ({ page }) => {
   await editorTextbox.fill(indexCode)
 
   const combobox = page.getByRole("combobox")
-  await combobox.waitFor({ state: "visible" })
   await combobox.click()
 
   const fileOption = page.getByText("manual-edits.json", { exact: true })
-  await fileOption.waitFor({ state: "visible" })
+  // await fileOption.waitFor({ state: "visible" })
   await fileOption.click()
 
-  await page.getByRole("textbox").locator("div").click()
+  await page.getByRole("textbox").first().click()
+  await page.keyboard.press("Control+A")
+  await page.keyboard.press("Backspace")
 
   const pcbPlacementsData = `{
     "pcb_placements": [
@@ -52,16 +53,17 @@ test("Manual edits test", async ({ page }) => {
     ],
     "edit_events": [],
     "manual_trace_hints": []
-  }`
+  }
+`
 
   await page.keyboard.type(pcbPlacementsData)
 
   const runButton = page.getByRole("button", { name: "Run", exact: true })
-  await runButton.waitFor({ state: "visible" })
+  // await runButton.waitFor({ state: "visible" })
   await runButton.click()
 
   const saveButton = page.getByRole("button", { name: "Save" })
-  await saveButton.waitFor({ state: "visible", timeout: 20000 }) // Extend timeout for Save button
+  // await saveButton.waitFor({ state: "visible", timeout: 20000 }) // Extend timeout for Save button
   await saveButton.click()
 
   await page.waitForTimeout(1000)
@@ -75,11 +77,11 @@ test("Manual edits test", async ({ page }) => {
   await page.waitForLoadState("networkidle")
 
   const filesLink = page.getByRole("link", { name: "Files" })
-  await filesLink.waitFor({ state: "visible" })
+  // await filesLink.waitFor({ state: "visible" })
   await filesLink.click()
 
   const fileLink = page.getByText("manual-edits.json", { exact: true })
-  await fileLink.waitFor({ state: "visible" })
+  // await fileLink.waitFor({ state: "visible" })
   await fileLink.click()
 
   await expect(page).toHaveScreenshot("manual-edits-view.png")

playwright-tests/view-snippet.spec.ts

@@ -18,7 +18,7 @@ for (const [size, viewport] of Object.entries(viewports)) {
     await expect(page).toHaveScreenshot(`view-snippet-before-${size}.png`)
 
     // Click and wait for any network requests or animations to complete
-    await Promise.all([page.waitForLoadState("networkidle"), runButton.click()])
+    await Promise.all([runButton.click()])
 
     // Wait for PCB tab to be fully loaded and any animations to complete
     await page.waitForTimeout(1000) // Reduced timeout, just for animations
@@ -33,23 +33,3 @@ for (const [size, viewport] of Object.entries(viewports)) {
     }
   })
 }
-
-test("files dialog", async ({ page }) => {
-  // Wait for network requests during navigation
-  await Promise.all([
-    page.waitForLoadState("networkidle"),
-    page.goto("http://127.0.0.1:5177/testuser/my-test-board"),
-  ])
-
-  // Wait for run button and files tab to be visible
-  await page.waitForSelector(".run-button", { state: "visible" })
-  const filesTab = await page.waitForSelector('span:has-text("Files")', {
-    state: "visible",
-  })
-
-  // Click and wait for any animations or state changes
-  await filesTab.click()
-  await page.waitForLoadState("networkidle")
-
-  await expect(page).toHaveScreenshot(`view-snippet-files.png`)
-})

playwright.config.ts

@@ -20,6 +20,11 @@ export default defineConfig({
       maxDiffPixelRatio: 0.2,
       // Increase the threshold for considering pixels different
       threshold: 0.2,
+      animations: "disabled",
     },
   },
+  use: {
+    actionTimeout: 10000,
+    navigationTimeout: 10000,
+  },
 })

tailwind.config.js

@@ -34,5 +34,5 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: ["tailwindcss-animate"],
 }