Refactor react-tutorial

.github/workflows/openvidu-js-tutorial.yml

@@ -2,7 +2,7 @@ name: openvidu-js-tutorial-test
 
 on: 
   workflow_dispatch: {}
-  push:
+
 
 
 jobs:

.github/workflows/openvidu-react-tutorial.yml

@@ -2,36 +2,36 @@ name: openvidu-react
 
 on:
   workflow_dispatch: {}
-
+  push:
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
     - name: Checkout código
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4.1.1
 
-    - name: Levantar OpenVidu
+    - name: Run OpenVidu deployment
       run: |
-        docker run -d -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.27.0
+        docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.27.0 > results/logs/docker.log 2>&1 &
+        sleep 10
 
-    - name: Ejecutar la aplicación del servidor
+    - name: Run server application sample
+      working-directory: openvidu-basic-node
       run: |
-        git clone https://github.com/OpenVidu/openvidu-tutorials.git -b v2.27.0
-        cd openvidu-tutorials/openvidu-basic-node
         npm install
-        node index.js &
+        node index.js > ../results/logs/node_index.log 2>&1 &
 
     - name: Configurar Node.js
       uses: actions/setup-node@v2
       with:
         node-version: 14
 
     - name: Levantar la aplicación cliente
+      working-directory: openvidu-react
       run: |
-        cd openvidu-tutorials/openvidu-react
         npm install
-        npm start &
+        npm start > results/logs/npm.log 2>&1 &
   
     - name: Install dependencies
       run: npm ci
@@ -49,6 +49,6 @@ jobs:
     - uses: actions/upload-artifact@v3
       if: always()
       with:
-        name: tests
-        path: /home/runner/work/openvidu-tutorials-tests-playwright/openvidu-tutorials-tests-playwright/tests
+        name: results-react
+        path: /home/runner/work/openvidu-tutorials-tests-playwright/openvidu-tutorials-tests-playwright/results/
         retention-days: 30

tests/openvidu-react-web-tutorial.spec.js

@@ -1,43 +1,65 @@
-//Test for Angular, React & Vue tutorials.
+// Import necessary Playwright libraries for testing.
 const { test, expect, chromium } = require('@playwright/test');
 
+// Define a test case for checking the presence of two active webcams in an OpenVidu session.
+test('Checking for the presence of two active webcams in an OpenVidu session', async () => {
+  // Launch a headless Chromium browser with specific settings.
+  const browser = await chromium.launch({
+    headless: true,
+    deviceScaleFactor: 1, // Specify the page's scale factor
+    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36', // Specify the user agent
+    args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream"]
+  });
 
+  // Create a new context with camera and microphone permissions.
+  const context = await browser.newContext({
+    permissions: ['camera', 'microphone'],
+  });
 
-test('Checking for the presence of two active webcams in an OpenVidu session', async () => {
-const browser = await chromium.launch({ headless: true , deviceScaleFactor: 1, 
-   userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36', 
-   args : ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream"]
- });
-
-   const context = await browser.newContext({
-     permissions: ['camera', 'microphone'],
-   });
-
-   const page1 = await context.newPage();
-   await page1.goto('http://localhost:3000');
-   await page1.fill('#userName', 'Page1');
-   await page1.click('#join input[type="submit"]');
-   await page1.waitForSelector('#session', { visible: true });
-
-   const page2 = await context.newPage();
-
-   await page2.goto('http://localhost:3000');
-   await page2.fill('#userName', 'Page2');
-   await page2.click('#join input[type="submit"]');
-   await page2.waitForSelector('#session', { visible: true });
-   await page2.waitForTimeout(5000); 
-
-   await page1.screenshot({ path: 'page1.png' });
-   await page2.screenshot({ path: 'page2.png' });
-
-   // Buscar los elementos HTML que contienen los streams de video
-   const videoElements = await page2.$$('video');
-
-   // Comprobar que hay exactamente dos elementos encontrados
-   expect(videoElements.length).toEqual(3);
-
-   // Cerrar las páginas y el navegador.
-
-  await Promise.all([page1.close(), page2.close()]);
-  await browser.close();
+  // Create two new pages within the context.
+  const page1 = await context.newPage();
+  const page2 = await context.newPage();
+
+  try {
+    // Navigate to a specific URL on page1.
+    await page1.goto('http://localhost:3000');
+
+    // Fill in the '#userName' field with 'Page1', click the 'JOIN' button, and wait for the '#session' element to become visible.
+    await page1.fill('#userName', 'Page1');
+    await page1.click('#join input[type="submit"]');
+    await page1.waitForSelector('#session', { visible: true });
+    await page1.waitForTimeout(5000);
+
+    // Capture a screenshot of page1 and save it to a specific location.
+    await page1.screenshot({ path: '../results/screenshots/page1.png' });
+
+    // Navigate to a specific URL on page2.
+    await page2.goto('http://localhost:3000');
+
+    // Fill in the '#userName' field with 'Page2', click the 'JOIN' button, wait for the '#session' element to become visible, and wait for 5 seconds.
+    await page2.fill('#userName', 'Page2');
+    await page2.click('#join input[type="submit"]');
+    await page2.waitForSelector('#session', { visible: true });
+    await page2.waitForTimeout(5000);
+
+    // Capture a screenshot of page2 and save it to a specific location.
+    await page2.screenshot({ path: '../results/screenshots/page2.png' });
+
+    // Find HTML elements within page2 that contain video streams.
+    const videoElements = await page2.$$('video');
+
+    // Check that there are exactly three elements found.
+    expect(videoElements.length).toEqual(3);
+
+    // Close the pages and the browser.
+    await Promise.all([page1.close(), page2.close()]);
+    await browser.close();
+  } catch (error) {
+    // In case of an error or timeout, capture screenshots.
+    await page1.screenshot({ path: '../results/screenshots/error_page1_screenshot.png' });
+    await page2.screenshot({ path: '../results/screenshots/error_page2_screenshot.png' });
+
+    // Rethrow the error to make the test fail.
+    throw error;
+  }
 });