Setting up e2e under test GitHub ci setup (#253)

Author: NadeemYaseen

.github/workflows/rpe_test.yml

@@ -6,14 +6,15 @@ on:
       - '*'
     branches: 
       - '*'
+      - '*/**'
   pull_request:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  build:
+  test:
     strategy:
       fail-fast: false
       matrix:
@@ -22,6 +23,7 @@ jobs:
           - ubuntu-22.04 # This is CentOS 7 under the hood
           - macos-12
           - windows-latest
+
     runs-on: ${{ matrix.os }}
     env:
       MODE: ${{ matrix.os }}
@@ -70,16 +72,28 @@ jobs:
               node --version
               python3 -V
         
-      - name: Install packages ${{ matrix.os }}
+      - name: Install Dep. packages Linux latest & windows & MacOS
         if: ${{ matrix.os != 'ubuntu-22.04' }}
         run: |
-            npm install
-            python3 -m pip install -r requirements.txt
+              npm install
+              python3 -m pip install -r requirements.txt
+              npx playwright install --with-deps
+
+      - name: Unit Pytest Linux latest & windows & MacOS
+        if: ${{ matrix.os != 'ubuntu-22.04' }}
+        run: python3 -m pytest
+    
+      - name: Unit Jtest Linux latest & windows & MacOS
+        if: ${{ matrix.os != 'ubuntu-22.04' }}
+        run: npm test
+
+      - name: E2E Playwright tests on Linux latest & MacOS
+        if: ${{ matrix.os == 'ubuntu-latest' }}     
+        run: npm run compile && xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npx playwright test
 
       - name: Run ESLint only on ubuntu-latest
         if: ${{ matrix.os == 'ubuntu-latest' }}
-        run: |
-            npx eslint src/
+        run: npx eslint src/
 
       - name: Install packages CentOS 7 & Run pytest & frontend test
         if: ${{ matrix.os == 'ubuntu-22.04' }}
@@ -95,24 +109,16 @@ jobs:
                 python3 -m pytest
                 npm test
 
-      - name: Run pytest on ${{ matrix.os }}
-        if: ${{ matrix.os != 'ubuntu-22.04' }}
-        run: python3 -m pytest
-
-      - name: Run frontend unit test on ${{ matrix.os }}
-        if: ${{ matrix.os != 'ubuntu-22.04' }}
-        run: |
-            npm test
-
   publish:
-    needs: build 	
+    needs: test 	
     strategy:
       fail-fast: false
       matrix:
         os: 
           - ubuntu-22.04 # This is CentOS 7 under the hood
           - macos-12
           - windows-latest
+          
     runs-on: ${{ matrix.os }}
     permissions:
       contents: write

package.json

@@ -6,6 +6,7 @@
   "main": "main.js",
   "scripts": {
     "start": "webpack --mode development && electron . --development",
+    "compile": "webpack --mode development",
     "build": "webpack --mode production && electron .",
     "test": "jest --coverage --coverageDirectory=coverage",
     "test:jest": "jest --coverage --coverageDirectory=coverage",
@@ -108,10 +109,10 @@
     "react-test-renderer": "^18.3.1",
     "style-loader": "^3.3.4",
     "webpack": "^5.90.1",
+    "@playwright/test": "^1.48.1",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@playwright/test": "^1.48.1",
     "antd": "^5.15.4",
     "electron-log": "^5.1.2",
     "electron-store": "^8.2.0",
@@ -130,4 +131,4 @@
     "type": "git",
     "url": "https://github.com/os-fpga/rapid_power_estimator.git"
   }
-}
+}

playwright.config.js

@@ -37,6 +37,6 @@ module.exports = {
   timeout: 60000,
   retries: 1,
   use: {
-    headless: false,
+    headless: process.env.CI ? true : false,
   },
 };

tests/e2e/acpu.test.js

@@ -27,7 +27,7 @@ test('Launch Electron app, select device, toggle ACPU power, and click Add slowl
   await new Promise((resolve) => setTimeout(resolve, 2000));
 
   // Click OK in the popup
-  const okButton = await window.waitForSelector('body > div:nth-child(3) > div > div.ant-modal-wrap > div > div:nth-child(1) > div > div.ant-modal-footer > button.ant-btn.css-dev-only-do-not-override-ni1kz0.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid');
+  const okButton = await window.waitForSelector('body > div:nth-child(3) > div > div.ant-modal-wrap > div > div:nth-child(1) > div > div.ant-modal-footer > button.ant-btn.css-dev-only-do-not-override-apn68.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid > span');
   await okButton.click();
   await new Promise((resolve) => setTimeout(resolve, 2000)); 
 

tests/e2e/clocking.test.js

@@ -41,7 +41,7 @@ test('Launch Electron app, select device, toggle ACPU power, click Clocking, Add
   await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait for 1 second
 
   // Clicking OK to submit the form
-  const okButtonSelector = 'body > div:nth-child(3) > div > div.ant-modal-wrap > div > div:nth-child(1) > div > div.ant-modal-footer > button.ant-btn.css-dev-only-do-not-override-ni1kz0.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid';
+  const okButtonSelector = 'body > div:nth-child(3) > div > div.ant-modal-wrap > div > div:nth-child(1) > div > div.ant-modal-footer > button.ant-btn.css-dev-only-do-not-override-apn68.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid';
   const okButton = await window.waitForSelector(okButtonSelector);
   await okButton.click();
 

tests/e2e/dsp.test.js

@@ -41,11 +41,12 @@ test('Launch Electron app, add clocking source, navigate to DSP block, configure
   await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait for 1 second
 
   // Clicking OK to submit the clocking form
-  const okButtonSelector = 'body > div:nth-child(3) > div > div.ant-modal-wrap > div > div:nth-child(1) > div > div.ant-modal-footer > button.ant-btn.css-dev-only-do-not-override-ni1kz0.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid';
+  const okButtonSelector = 'body > div:nth-child(3) > div > div.ant-modal-wrap > div > div:nth-child(1) > div > div.ant-modal-footer > button.ant-btn.css-dev-only-do-not-override-apn68.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid';
   const okButton = await window.waitForSelector(okButtonSelector);
   await okButton.click();
   await new Promise((resolve) => setTimeout(resolve, 2000)); // Wait for the form to submit
 
+
   // Navigate to the DSP block
   const dspBlockSelector = '#app > div > div.top-row-container > div.main-table-container.main-border > div.top-l2 > div.top-l2-col2 > div.top-l2-col2-elem > div > div:nth-child(3) > div:nth-child(2) > div';
   const dspBlock = await window.waitForSelector(dspBlockSelector);
@@ -95,7 +96,7 @@ test('Launch Electron app, add clocking source, navigate to DSP block, configure
   // Take note of the DSP power generated (assuming it's shown in the UI somewhere, you can add the selector for DSP power if needed)
 
   // Clicking OK to submit the DSP form
-  const dspOkButtonSelector = 'body > div:nth-child(3) > div > div.ant-modal-wrap > div > div:nth-child(1) > div > div.ant-modal-footer > button.ant-btn.css-dev-only-do-not-override-ni1kz0.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid';
+  const dspOkButtonSelector = 'body > div:nth-child(3) > div > div.ant-modal-wrap > div > div:nth-child(1) > div > div.ant-modal-footer > button.ant-btn.css-dev-only-do-not-override-apn68.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid';
   const dspOkButton = await window.waitForSelector(dspOkButtonSelector);
   await dspOkButton.click();
   await new Promise((resolve) => setTimeout(resolve, 2000)); // Wait for the form to submit