added testing with puppeteer

package.json

@@ -1,5 +1,8 @@
 {
   "devDependencies": {
     "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "puppeteer": "^24.9.0"
   }
 }

tests/README.md

@@ -0,0 +1,8 @@
+# Tests
+
+This directory contains all automated tests for the project.
+
+Subdirectories:
+- `e2e/`: End-to-end tests using Puppeteer.
+- `screenshots/`: Stores screenshots taken during test execution, typically on failure.
+- `reports/`: Stores test execution reports.

tests/e2e/README.md

@@ -0,0 +1,8 @@
+# End-to-End (E2E) Tests
+
+This directory holds all end-to-end tests written using Puppeteer. These tests simulate real user scenarios by interacting with the application's UI in a browser.
+
+Subdirectories:
+- `specs/`: Contains the actual test script files (test specifications).
+- `page-objects/`: Implements the Page Object Model (POM) for better test structure and maintainability.
+- `utils/`: Contains helper functions and utilities for the E2E tests, such as browser setup.

tests/e2e/page-objects/README.md

@@ -0,0 +1,3 @@
+# Page Objects
+
+This directory implements the Page Object Model (POM) design pattern.

tests/e2e/specs/puppeteer-multiple-profile.spec.js

@@ -0,0 +1,101 @@
+// puppeteer-multiple-profiles.js
+import puppeteer from 'puppeteer';
+
+
+
+const boot_strap_url = 'https://localhost:6789/?log&headless&bootstrap'
+const number_of_peers = 3; // Number of peers to open in separate contexts
+const peer_url = 'https://localhost:6789/'; // URL for the peer page
+// Define an array of colors for console output the lenths of the number of peers or the max number of console colors looped
+const colors =[]
+for (let i = 0; i < number_of_peers; i++) {
+  // Generate a color code for each peer
+  const colorCode = 31 + (i % 6); // Cycle through ANSI colors 31-36
+  colors.push(`\x1b[${colorCode}m`); // ANSI escape code for color
+}
+async function openPagesInSeparateContexts() {
+  let browser;
+  try {
+    console.log('Launching browser...');
+    browser = await puppeteer.launch({
+      headless: true, // Set to true if you don't want to see the browser UI
+      args: [
+        '--disable-gpu',
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--allow-insecure-localhost' // For local HTTPS with self-signed certs
+        // Add other args if needed
+      ],
+      // For local HTTPS with self-signed certs
+      ignoreHTTPSErrors: true
+    });
+
+    console.log('Browser launched.');
+    
+    const context = await browser.createBrowserContext();
+    const page = await context.newPage();
+    await page.goto(boot_strap_url, {
+        waitUntil: 'networkidle2', // Wait until network is relatively idle
+        // timeout: 60000 // Optional: increase timeout if pages load slowly
+      });
+    console.log(`Successfully navigated to ${boot_strap_url} in initial context`);
+
+
+    for (let i = 0; i < number_of_peers; i++) {
+      console.log(`Creating new browser context ${i + 1}...`);
+      // --- USE THE NEW METHOD ---
+      const context = await browser.createBrowserContext(); 
+      console.log(`Opening new page in context ${i + 1} for URL: ${peer_url}`);
+      const page = await context.newPage();
+
+      // --- Array to store console messages for this page ---
+      const consoleMessages = [];
+      // --- Listen for console events ---
+      page.on('console', msg => {
+        const messageText = msg.text();
+        
+        console.log(`${colors[i]}\[Browser Console - Page ${i + 1}]: ${messageText}\x1b[0m`);
+        consoleMessages.push(messageText); // Store the message
+      });
+
+      // listen for other events like 'pageerror' for JavaScript errors on the page
+      page.on('pageerror', error => {
+        console.error(`[Page Error - Page ${i + 1}]: ${error.message}`);
+      });
+
+      // set ignoreHTTPSErrors on a per-page basis if we didn't set it globally
+      // await page.setBypassCSP(true); // Might be needed for some sites
+      // await page.setExtraHTTPHeaders({ 'Accept-Language': 'en-US' }); // Example header
+      
+      console.log(`Navigating to ${peer_url}...`);
+      await page.goto(peer_url, {
+        waitUntil: 'networkidle2', // Wait until network is relatively idle
+        // timeout: 60000 // Optional: increase timeout if pages load slowly
+      });
+      console.log(`Successfully navigated to ${peer_url} in context ${i + 1}`);
+
+      // You can interact with the page here if needed
+      // const title = await page.title();
+      // console.log(`Page title for ${url}: ${title}`);
+    }
+
+    console.log('All pages opened in separate contexts.');
+    console.log('Browser will remain open. Close it manually or the script will exit after a delay if not kept alive.');
+
+    // Keep the browser open for a while, or remove this to close immediately after navigation
+    // await new Promise(resolve => setTimeout(resolve, 300000)); // Keep open for 5 minutes
+
+  } catch (error) {
+    console.error('An error occurred:', error);
+  } finally {
+    // If you want the script to close the browser automatically after some time or after operations:
+//     if (browser) {
+//      console.log('Closing browser...');
+//        await browser.close();
+//    console.log('Browser closed.');
+//     }
+    // If you want to keep it open indefinitely until manual closure, comment out the finally block or the browser.close() call.
+  }
+}
+
+openPagesInSeparateContexts();

tests/screenshots/README.md

@@ -0,0 +1,9 @@
+# Screenshots
+
+This directory is used to store screenshots taken during the execution of automated tests.
+
+Typically, screenshots are captured:
+- When a test assertion fails, to help diagnose the issue.
+- At specific checkpoints in a test flow for visual verification.
+
+These files are usually gitignored unless they are baseline images for visual regression testing.