fixed e2e test issues

LucasSilbernagel · Nov 13, 2024 · 4040b08 · 4040b08
1 parent 582a568
commit 4040b08
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 22 deletions.
diff --git a/e2e/decision-tree.spec.ts b/e2e/decision-tree.spec.ts
@@ -40,14 +40,17 @@ test.describe('decision tree functionality', () => {
   }) => {
     await loadExampleTree(page)
   })
-
   test('should copy decision tree URL on button click', async ({ page }) => {
     await loadNewTree(page)
     await page.evaluate(() => {
       navigator.clipboard.writeText = async () => Promise.resolve()
     })
     await page.click('role=button[name="Share Tree"]')
-    await expect(page.getByText('URL copied to clipboard!')).toBeVisible()
+    await expect(
+      page.locator('div.text-sm.font-semibold', {
+        hasText: 'URL copied to clipboard!',
+      })
+    ).toBeVisible()
   })
 
   test('should clear the decision tree and return to the landing page on button click', async ({

diff --git a/e2e/helpers.ts b/e2e/helpers.ts
@@ -78,14 +78,44 @@ export const loadExampleTree = async (page: Page) => {
     page.getByRole('button', { name: /Back to start/i })
   ).not.toBeVisible()
   const scrollableArea = page.getByLabel('Decision tree navigation area')
-  await scrollableArea.evaluate((div) => (div.scrollTop = div.scrollHeight))
+  await scrollableArea.waitFor({ state: 'attached' })
+  let scrollSuccess = false
+  for (let i = 0; i < 3; i++) {
+    try {
+      // Simple scroll first
+      await scrollableArea.evaluate((div) => {
+        div.scrollTop = div.scrollHeight
+      })
+      // Wait a bit for scroll to settle
+      await page.waitForTimeout(100)
+      // Verify scroll position
+      const isScrolled = await scrollableArea.evaluate((div) => {
+        const maxScroll = div.scrollHeight - div.clientHeight
+        return Math.abs(div.scrollTop - maxScroll) < 1
+      })
+      if (isScrolled) {
+        scrollSuccess = true
+        break
+      }
+    } catch (error) {
+      if (i === 2) throw error // On last attempt, throw the error
+      await page.waitForTimeout(100) // Wait before retry
+    }
+  }
+  if (!scrollSuccess) {
+    throw new Error('Failed to scroll to bottom')
+  }
+  // Wait for button to be visible with retry
   await expect(
     page.getByRole('button', { name: /Back to start/i })
-  ).toBeVisible()
+  ).toBeVisible({ timeout: 5000 })
   await expect(
     page.getByLabel('Decision root: Are you at home?').getByLabel('edit text')
   ).not.toBeInViewport()
-  await page.click('role=button[name="Back to start"]', { force: true })
+  await page.getByRole('button', { name: /Back to start/i }).click({
+    timeout: 5000,
+    force: true, // Use force: true to click even if element is moving
+  })
   await expect(
     page.getByLabel('Decision root: Are you at home?').getByLabel('edit text')
   ).toBeInViewport()

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -15,7 +15,6 @@ import { defineConfig, devices } from '@playwright/test'
 const PORT = process.env.PORT || 5173
 const BASE_URL =
   process.env.PLAYWRIGHT_TEST_BASE_URL || `http://localhost:${PORT}`
-const PREVIEW_TOKEN = process.env.VERCEL_PREVIEW_BYPASS
 
 export default defineConfig({
   testDir: './e2e',
@@ -33,11 +32,6 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL: BASE_URL,
-    extraHTTPHeaders: PREVIEW_TOKEN
-      ? {
-          'x-vercel-preview-bypass': PREVIEW_TOKEN,
-        }
-      : undefined,
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
   },
@@ -48,26 +42,27 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
-
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
-
     /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Firefox',
+      use: { ...devices['Pixel 8'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
 
     /* Test against branded browsers. */
     // {