another try for playwright

Author: ramsrib

.github/workflows/ci.yml

@@ -136,12 +136,32 @@ jobs:
           echo "Checking for required files..."
           test -f dist/widget.umd.js || (echo "widget.umd.js not found!" && exit 1)
           test -f dist/style.css || (echo "style.css not found!" && exit 1)
+          echo "Contents of root directory:"
+          ls -la
+          echo "Checking test-widget-embed.html exists:"
+          test -f test-widget-embed.html && echo "test-widget-embed.html found" || echo "test-widget-embed.html NOT found"
 
       - name: Install Playwright
         run: npx playwright install chromium
 
-      - name: Build widget
-        run: npm run build:widget
+      - name: Test server availability
+        run: |
+          # Start the server in background
+          npx serve -l 4200 . &
+          SERVER_PID=$!
+          echo "Server started with PID: $SERVER_PID"
+
+          # Wait for server to start
+          sleep 5
+
+          # Test if server is running and files are accessible
+          echo "Testing server endpoints:"
+          curl -I http://localhost:4200/test-widget-embed || echo "Failed to access test-widget-embed"
+          curl -I http://localhost:4200/dist/widget.umd.js || echo "Failed to access widget.umd.js"
+          curl -I http://localhost:4200/dist/style.css || echo "Failed to access style.css"
+
+          # Kill the test server
+          kill $SERVER_PID
 
       - name: Run widget tests
         run: npm run test:ci:only

package.json

@@ -40,7 +40,7 @@
     "test": "npm run test:widget",
     "test:widget": "npm run build:widget && playwright test",
     "test:widget:ui": "npm run build:widget && playwright test --ui",
-    "test:serve": "serve -s . -p 3000",
+    "test:serve": "serve -l 4200 .",
     "test:ci": "npm run build:widget && playwright test --reporter=list",
     "test:ci:only": "playwright test --reporter=list"
   },

playwright.config.ts

@@ -10,9 +10,9 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
+  reporter: process.env.CI ? 'list' : 'html',
   use: {
-    baseURL: 'http://localhost:3000',
+    baseURL: 'http://localhost:4200',
     trace: 'on-first-retry',
   },
   projects: [
@@ -22,9 +22,11 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'npm run test:serve',
-    port: 3000,
+    command: 'npx serve -l 4200 .',
+    port: 4200,
     timeout: 60 * 1000, // 1 minute timeout
     reuseExistingServer: !process.env.CI,
+    stdout: process.env.CI ? 'pipe' : 'ignore',
+    stderr: 'pipe',
   },
 });

tests/widget-embed.spec.ts

@@ -19,7 +19,22 @@ test.describe('VapiWidget Embed Tests', () => {
       console.log('Page error:', error.message);
     });
 
-    await page.goto('/test-widget-embed.html');
+    // Add response logging
+    page.on('response', (response) => {
+      console.log(`Response: ${response.status()} ${response.url()}`);
+    });
+
+    const response = await page.goto('/test-widget-embed');
+    console.log('Navigation response:', response?.status(), response?.url());
+
+    // Check page content
+    const pageContent = await page.content();
+    console.log('Page content length:', pageContent.length);
+    console.log('Page title:', await page.title());
+
+    // Check if we got the right page
+    const hasTestTitle = pageContent.includes('VapiWidget Embed Test');
+    console.log('Has test page title:', hasTestTitle);
 
     // Check if the script tag exists
     const scriptExists = await page.evaluate(() => {
@@ -58,7 +73,7 @@ test.describe('VapiWidget Embed Tests', () => {
     page,
   }) => {
     // Navigate to the test page
-    await page.goto('/test-widget-embed.html');
+    await page.goto('/test-widget-embed');
 
     // Wait for the widget script to load
     await page.waitForFunction(
@@ -97,7 +112,7 @@ test.describe('VapiWidget Embed Tests', () => {
   test('should load widget from script tag with data-props JSON', async ({
     page,
   }) => {
-    await page.goto('/test-widget-embed.html');
+    await page.goto('/test-widget-embed');
 
     // Wait for the widget script to load
     await page.waitForFunction(
@@ -133,7 +148,7 @@ test.describe('VapiWidget Embed Tests', () => {
   });
 
   test('should expose WidgetLoader globally', async ({ page }) => {
-    await page.goto('/test-widget-embed.html');
+    await page.goto('/test-widget-embed');
 
     // Wait a bit for script to load
     await page.waitForTimeout(1000);