Update Playwright workflow to trigger on deployment status

.github/workflows/playwright.yml

@@ -15,4 +15,6 @@ jobs:
  - name: Set BASE_URL
  run: echo "BASE_URL=${{ github.event.deployment_status.environment_url }}" >> $GITHUB_ENV # Set BASE_URL from deployment status
  - name: Run tests
- run: npx playwright test # Execute Playwright tests
+ run: npx playwright test # Execute Playwright tests
+ env:
+ VERCEL_AUTOMATION_BYPASS_SECRET: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}

.github/workflows/unit-tests.yml

@@ -1,35 +1,11 @@
-# name: Unit Tests
-
-# on:
-# push:
-# branches: [ main ]
-# pull_request:
-# branches: [ main ]
-
-# jobs:
-# test:
-# runs-on: ubuntu-latest
-
-# steps:
-# - uses: actions/checkout@v3
-
-# - name: Use Node.js
-# uses: actions/setup-node@v3
-# with:
-# node-version: '18'
-
-# - name: Install pnpm
-# uses: pnpm/action-setup@v2
-# with:
-# version: 8
-
-# - name: Install dependencies
-# run: pnpm install
-
-# - name: Run tests
-# run: pnpm test
-
-# - name: Upload coverage reports to Codecov
-# uses: codecov/codecov-action@v3
-# env:
-# CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+name: Unit Tests
+on:
+ push:
+ branches: [main]
+ pull_request:
+ branches: [main]
+jobs:
+ test:
+ runs-on: ubuntu-latest
+ steps:
+ - run: echo "No unit tests configured yet"

e2e/homepage.spec.ts

@@ -1,23 +1,16 @@
 import { test, expect } from '@playwright/test';
 
-test('should navigate to the homepage and see content', async ({ page }) => {
- // Use the BASE_URL from the environment variable
- await page.goto(process.env.BASE_URL); // Use the dynamic BASE_URL
-
- // Example of using the Bypass Token in a request
- const response = await page.request.get('/api/some-endpoint', {
- headers: {
- 'Authorization': `Bearer ${process.env.BYPASS_TOKEN}` // Use the Bypass Token
- }
- });
+test('should load homepage with content', async ({ page }) => {
+ console.log('Starting test: should load homepage with content');
+ await page.goto('/');
+ console.log('Navigated to homepage');
 
- // Check if the response is successful
- expect(response.ok()).toBeTruthy();
+ await page.waitForSelector('body', { state: 'visible' });
+ console.log('Body is visible');
+
+ const content = await page.textContent('body');
+ console.log('Page content:', content);
 
- // Wait for the page to load completely
- await page.waitForLoadState('networkidle');
-
- // Check for the presence of the expected text
- const content = await page.content();
  expect(content).toContain('Welcome');
+ console.log('Content contains "Welcome"');
 });

e2e/unprotected.spec.ts

@@ -1,35 +1,67 @@
 import { test, expect } from '@playwright/test';
 
-test.describe('Unprotected Page Tests', () => {
- test('should navigate to the homepage and see content', async ({ page }) => {
- await page.goto('/'); // This will use the baseURL set in the config
+test.describe('Streaming Website Tests', () => {
+ test('should handle chunked streaming content', async ({ page }) => {
+ console.log('Starting test: should handle chunked streaming content');
+ await page.goto('/');
+ console.log('Navigated to homepage');
 
- // Check if the page contains any content
- const content = await page.content();
- expect(content).toContain('Welcome'); // Ensure this matches the actual homepage content
- });
+ // Wait for the streaming content container to be visible
+ await page.waitForSelector('body', { state: 'visible', timeout: 30000 });
+ console.log('Body is visible');
 
- test('should navigate to the landing page and see content', async ({ page }) => {
- await page.goto('/landing'); // Navigate to the landing page
+ // Function to collect chunks
+ const chunks: string[] = [];
+ await page.exposeFunction('addChunk', (chunk: string) => {
+ chunks.push(chunk);
+ console.log('Received chunk:', chunk);
+ });
 
- // Check if the page contains any content
- const content = await page.content();
- expect(content).toContain('AI-Powered Task Management'); // Ensure this matches the actual landing page content
- });
+ // Listen for chunks
+ await page.evaluate(() => {
+ const observer = new MutationObserver((mutations) => {
+ for (let mutation of mutations) {
+ if (mutation.type === 'childList') {
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === Node.TEXT_NODE) {
+ // @ts-ignore
+ window.addChunk(node.textContent);
+ }
+ });
+ }
+ }
+ });
+
+ observer.observe(document.body, { childList: true, subtree: true });
+ });
+ console.log('Set up MutationObserver');
+
+ // Wait for some time to collect chunks (adjust timeout as needed)
+ await page.waitForTimeout(10000);
+ console.log('Waited for 10 seconds');
 
- test('should navigate to the about page and see content', async ({ page }) => {
- await page.goto('/about'); // This will use the baseURL set in the config
+ // Verify that we received chunks
+ expect(chunks.length).toBeGreaterThan(0);
+ console.log('Total chunks received:', chunks.length);
+ console.log('Chunks:', chunks);
 
- // Check if the page contains any content
- const content = await page.content();
- expect(content).toContain('About Us'); // Ensure this matches the actual about page content
+ // You can add more specific assertions here based on the expected content of your chunks
  });
 
- test('should navigate to the signup page and see content', async ({ page }) => {
- await page.goto('/signup'); // This will use the baseURL set in the config
+ test('should handle user interactions with streaming content', async ({ page }) => {
+ await page.goto('/');
 
- // Check if the page contains any content
- const content = await page.content();
- expect(content).toContain('Create your account'); // Ensure this matches the actual signup page content
+ // Wait for an interactive element to be available
+ await page.waitForSelector('#interaction-button', { state: 'visible' });
+
+ // Interact with the streaming content
+ await page.click('#interaction-button');
+
+ // Wait for and verify the response to the interaction
+ const responseElement = await page.waitForSelector('#interaction-response', { state: 'visible', timeout: 5000 });
+ const responseText = await responseElement.textContent();
+ expect(responseText).toContain('Interaction successful');
  });
+
+ // Add more tests as needed for your specific streaming features
 });

package.json

@@ -11,7 +11,7 @@
  "type-check": "tsc --noEmit",
  "clean": "rm -rf .next",
  "clean:build": "npm run clean && npm run build",
- "test:e2e": "playwright test",
+ "test:e2e": "playwright test --ui",
  "test:all": "pnpm install && pnpm build && pnpm test && concurrently \"pnpm run dev\" \"npx playwright test\" --kill-others --success first",
  "test:playwright": "npx playwright test"
  },

playwright.config.ts

@@ -1,12 +1,15 @@
 import { defineConfig, devices } from '@playwright/test'; // Add devices import
+import dotenv from 'dotenv';
+import path from 'path';
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+// Load environment variables from .env.local
+dotenv.config({ path: path.resolve(__dirname, '.env.local') });
+
+const bypassToken = process.env.VERCEL_AUTOMATION_BYPASS_SECRET;
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -22,17 +25,26 @@ export default defineConfig({
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
- reporter: 'html',
+ reporter: [
+ ['html'],
+ ['list'], // Add list reporter for console output
+ ['json', { outputFile: 'test-results/test-results.json' }] // JSON report for detailed logs
+ ],
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
  /* Base URL to use in actions like `await page.goto('/')`. */
- baseURL: process.env.BASE_URL || 'http://localhost:3000', // Default to localhost for local testing
+ baseURL: process.env.BASE_URL || 'https://the-front-9t3xn2sr4-dynamicprompt.vercel.app',
  /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
  trace: 'on-first-retry',
- headless: true, // Run tests in headless mode
- extraHTTPHeaders: {
- 'x-vercel-protection-bypass': process.env.VERCEL_AUTOMATION_BYPASS_SECRET || '',
- },
+ headless: false, // Set to false for local development
+ extraHTTPHeaders: bypassToken ? {
+ 'x-vercel-protection-bypass': bypassToken,
+ 'x-vercel-set-bypass-cookie': 'true',
+ } : {},
+ // Add these options for streaming websites
+ viewport: { width: 1280, height: 720 },
+ video: 'on-first-retry',
+ screenshot: 'only-on-failure',
  },
 
  /* Configure projects for major browsers */