Refactor CI configuration and improve timeout settings for Playwright…

… tests
eventua11y · Feb 9, 2025 · c2366c5 · c2366c5
1 parent fee87ba
commit c2366c5
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 34 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -33,31 +33,27 @@ jobs:
     needs: tests_e2e_netlify_prepare
     name: Run end-to-end tests on Netlify PR preview
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.40.0-jammy
     timeout-minutes: 15
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - name: Install system dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y xvfb fonts-liberation fonts-noto-color-emoji libfontconfig1 libfreetype6
       - name: Install dependencies
         run: npm ci
-      - name: Install Playwright browsers
-        run: npx playwright install --with-deps
-      - name: Show environment info
+      - name: Verify network connectivity
         run: |
-          echo "Node version: $(node -v)"
-          echo "NPM version: $(npm -v)"
-          echo "Display: $DISPLAY"
-          echo "XDG_RUNTIME_DIR: $XDG_RUNTIME_DIR"
-          xvfb-run --auto-servernum ls -l /tmp/.X*
+          echo "Testing connection to Netlify preview..."
+          curl -v https://deploy-preview-${{ env.GITHUB_PR_NUMBER }}--eventua11y.netlify.app/
+          echo "Testing DNS resolution..."
+          nslookup deploy-preview-${{ env.GITHUB_PR_NUMBER }}--eventua11y.netlify.app
       - name: Run tests
-        run: xvfb-run --auto-servernum --server-args="-screen 0 1280x720x24" npx playwright test --retries=5
         env:
           PLAYWRIGHT_TEST_BASE_URL: 'https://deploy-preview-${{ env.GITHUB_PR_NUMBER }}--eventua11y.netlify.app/'
-          # Enable detailed debug logging
           DEBUG: "pw:api,pw:browser*,pw:protocol*"
-          PWDEBUG: 1
+          CI: 'true'
+        run: |
+          echo "Starting Playwright tests..."
+          npx playwright test --project=chromium --retries=5 --reporter=list
diff --git a/playwright.config.js b/playwright.config.js
@@ -26,12 +26,12 @@ export default defineConfig({
     // Collect trace when retrying the failed test.
     trace: 'on-first-retry',
 
-    // Increase timeouts for CI environment
-    actionTimeout: process.env.CI ? 90000 : 60000,
-    navigationTimeout: process.env.CI ? 90000 : 60000,
+    // More reasonable timeouts for CI
+    actionTimeout: process.env.CI ? 45000 : 30000,
+    navigationTimeout: process.env.CI ? 45000 : 30000,
 
     // Add explicit test timeout
-    testTimeout: process.env.CI ? 120000 : 60000,
+    testTimeout: process.env.CI ? 90000 : 60000,
 
     // Enable screenshot on failure
     screenshot: 'only-on-failure',
@@ -44,12 +44,31 @@ export default defineConfig({
 
     // Add automatic waiting
     waitForNavigation: 'networkidle',
+
+    // CI-specific browser launch options
+    launchOptions: process.env.CI ? {
+      args: ['--no-sandbox', '--disable-setuid-sandbox'],
+    } : undefined,
+
+    // Use persistent context in CI to reduce browser startup overhead
+    contextOptions: process.env.CI ? {
+      acceptDownloads: false,
+      strictSelectors: true,
+    } : undefined,
   },
   // Configure projects for major browsers.
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { 
+        ...devices['Desktop Chrome'],
+        // Additional chromium-specific settings for CI
+        launchOptions: process.env.CI ? {
+          executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH,
+          args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu'],
+          headless: true
+        } : undefined,
+      },
     },
     {
       name: 'firefox',
@@ -67,7 +86,7 @@ export default defineConfig({
         command: 'netlify dev',
         port: 8888,
         reuseExistingServer: !process.env.CI,
-        timeout: 120000, // Increase server startup timeout
+        timeout: 60000, // Reduced server startup timeout
       }
     : undefined,
 });
diff --git a/tests/filters.spec.ts b/tests/filters.spec.ts
@@ -12,22 +12,22 @@ test.describe('Filters functionality', () => {
       page.waitForSelector('#filters', { state: 'visible' }),
       page.waitForSelector('#open-filter-drawer:not([disabled])', {
         state: 'visible',
-        timeout: 10000
+        timeout: 5000
       }),
     ]);
   });
 
   const openFilterDrawer = async (page) => {
     const filterButton = page.getByRole('button', { name: 'Filter' });
-    await filterButton.waitFor({ state: 'visible', timeout: 10000 });
+    await filterButton.waitFor({ state: 'visible', timeout: 5000 });
     await filterButton.click();
 
     const drawer = page.locator('#filter-drawer');
-    await drawer.waitFor({ state: 'visible', timeout: 10000 });
+    await drawer.waitFor({ state: 'visible', timeout: 5000 });
 
     // Wait for drawer animation and ensure content is actually visible
-    await page.waitForSelector('#filter-drawer[open]', { state: 'visible', timeout: 10000 });
-    await page.waitForTimeout(500); // Increased animation wait time for CI
+    await page.waitForSelector('#filter-drawer[open]', { state: 'visible', timeout: 5000 });
+    await page.waitForTimeout(300); // Standard animation duration
     return drawer;
   };
 
@@ -53,13 +53,13 @@ test.describe('Filters functionality', () => {
     const closeButton = page.getByRole('button', {
       name: /Show \d+ of \d+ events/,
     });
-    await closeButton.waitFor({ state: 'visible' });
+    await closeButton.waitFor({ state: 'visible', timeout: 5000 });
     await closeButton.click();
 
     // Wait for drawer animation
     await page.waitForTimeout(300);
     await expect(drawer).not.toBeVisible();
-    await expect(drawer).not.toHaveAttribute('open');
+    await expect(drawer).not toHaveAttribute('open');
   });
 
   test('filter drawer closes when esc key is pressed', async ({ page }) => {
@@ -69,14 +69,14 @@ test.describe('Filters functionality', () => {
     // Wait for drawer animation
     await page.waitForTimeout(300);
     await expect(drawer).not.toBeVisible();
-    await expect(drawer).not.toHaveAttribute('open');
+    await expect(drawer).not toHaveAttribute('open');
   });
 
   test('reset button appears when filters are applied', async ({ page }) => {
     await openFilterDrawer(page);
 
     const resetButton = page.getByTestId('drawer-reset');
-    await expect(resetButton).not.toBeVisible();
+    await expect(resetButton).not toBeVisible();
 
     // Use radio button text content to find and click it
     await page.getByText('Online', { exact: true }).first().click();
@@ -102,7 +102,7 @@ test.describe('Filters functionality', () => {
     await resetButton.click();
 
     // Wait for button to disappear (confirms reset completed)
-    await expect(resetButton).not.toBeVisible();
+    await expect(resetButton).not toBeVisible();
 
     // Wait for and verify that all radio groups show "No preference" as selected
     const noPreferenceRadios = page.locator('sl-radio[value="any"]');

diff --git a/tests/theme.spec.ts b/tests/theme.spec.ts
@@ -20,13 +20,13 @@ test.describe('Theme Switching', () => {
       page.waitForSelector('#theme-selector-button', { state: 'visible' })
     ]);
 
-    // Ensure clean state with more reliable drawer handling
+    // Ensure clean state with more reasonable drawer handling
     const filterDrawer = page.locator('#filter-drawer');
     try {
-      await filterDrawer.waitFor({ state: 'attached', timeout: 10000 });
+      await filterDrawer.waitFor({ state: 'attached', timeout: 5000 });
       if (await filterDrawer.isVisible()) {
         await page.keyboard.press('Escape');
-        await filterDrawer.waitFor({ state: 'hidden', timeout: 5000 });
+        await filterDrawer.waitFor({ state: 'hidden', timeout: 2000 });
       }
     } catch (e) {
       // If drawer timeout occurs, it's likely already hidden