Add performance testing to Cypress results

.github/workflows/browser-testing.yml

@@ -9,7 +9,6 @@ on:
       - web/**
 jobs:
   cypress-run:
-
     runs-on: ubuntu-latest
     steps:
       - id: skip_check
@@ -24,6 +23,9 @@ jobs:
         with:
           go-version: '1.18.8'
 
+      - name: Install Google Chrome
+        run: sudo apt-get install google-chrome-stable
+
       - name: Run Browser tests
         uses: nick-fields/retry@v2
         with:

test/automated/browser/cypress.config.js

@@ -1,10 +1,17 @@
 const { defineConfig } = require('cypress');
+const { lighthouse, prepareAudit } = require('@cypress-audit/lighthouse');
 
 module.exports = defineConfig({
 	projectId: 'wwi3xe',
 	e2e: {
 		setupNodeEvents(on, config) {
-			// implement node event listeners here
+			on('before:browser:launch', (browser = {}, launchOptions) => {
+				prepareAudit(launchOptions);
+			});
+
+			on('task', {
+				lighthouse: lighthouse(),
+			});
 		},
 	},
 });

test/automated/browser/cypress/e2e/offline/00_offline_performance.cy.js

@@ -0,0 +1,14 @@
+describe('Lighthouse Metrics', () => {
+	beforeEach(() => {
+		cy.visit('http://localhost:8080');
+	});
+
+	it('Capture Metrics', () => {
+		cy.lighthouse({
+			accessibility: 97,
+			'best-practices': 97,
+			seo: 97,
+			performance: 90,
+		});
+	});
+});

test/automated/browser/cypress/e2e/online/00_online_performance.cy.js

@@ -0,0 +1,14 @@
+describe('Lighthouse Metrics', () => {
+	beforeEach(() => {
+		cy.visit('http://localhost:8080');
+	});
+
+	it('Capture Metrics', () => {
+		cy.lighthouse({
+			accessibility: 97,
+			'best-practices': 97,
+			seo: 97,
+			performance: 60, // Once the performance issues are fixed revert this 90,
+		});
+	});
+});

test/automated/browser/cypress/support/commands.js

@@ -23,3 +23,6 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import 'cypress-audit/commands';
+import '@cypress-audit/lighthouse/commands';

test/automated/browser/package.json

@@ -9,6 +9,8 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "cypress": "^10.10.0"
+    "@cypress-audit/lighthouse": "^1.3.1",
+    "cypress": "^10.10.0",
+    "cypress-audit": "^1.1.0"
   }
 }

test/automated/browser/run.sh

@@ -1,25 +1,42 @@
 #!/bin/bash
 
 set -o errexit
-set -o nounset
 set -o pipefail
 
 TEMP_DB=$(mktemp)
 BUILD_ID=$((RANDOM % 7200 + 600))
+BROWSER="electron" #Default. Will try to use Google Chrome.
+
+if hash google-chrome 2>/dev/null; then
+	BROWSER="chrome"
+	echo "Using Google Chrome as a browser."
+else
+	echo "Google Chrome not found. Using Electron."
+fi
 
 # Change to the root directory of the repository
-cd "$(git rev-parse --show-toplevel)"
+pushd "$(git rev-parse --show-toplevel)"
 
 # Bundle the updated web code into the server codebase.
-echo "Bundling web code into server..."
+if [ -z $SKIP_BUILD ]; then
-./build/web/bundleWeb.sh >/dev/null
+	echo "Bundling web code into server..."
+	./build/web/bundleWeb.sh >/dev/null
+else
+	echo "Skipping web build..."
+fi
 
 # Install the web test framework
-echo "Installing test dependencies..."
+if [ -z "$SKIP_BUILD" ]; then
-pushd test/automated/browser
+	echo "Installing test dependencies..."
-npm install --quiet --no-progress
+	pushd test/automated/browser
+	npm install --quiet --no-progress
 
-popd
+	popd
+else
+	echo "Skipping dependencies installation"
+fi
+
+set -o nounset
 
 # Download a specific version of ffmpeg
 if [ ! -d "ffmpeg" ]; then
@@ -35,6 +52,7 @@ fi
 # Build and run owncast from source
 echo "Building owncast..."
 go build -o owncast main.go
+
 echo "Running owncast..."
 ./owncast -database "$TEMP_DB" &
 SERVER_PID=$!
@@ -42,9 +60,9 @@ SERVER_PID=$!
 pushd test/automated/browser
 
 # Run cypress browser tests for desktop
-npx cypress run --group "desktop-offline" --env tags=desktop --ci-build-id $BUILD_ID --tag "desktop,offline" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/offline/*.cy.js"
+npx cypress run --browser "$BROWSER" --group "desktop-offline" --env tags=desktop --ci-build-id $BUILD_ID --tag "desktop,offline" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/offline/*.cy.js"
 # Run cypress browser tests for mobile
-npx cypress run --group "mobile-offline" --ci-build-id $BUILD_ID --tag "mobile,offline" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/offline/*.cy.js" --config viewportWidth=375,viewportHeight=667
+npx cypress run --browser "$BROWSER" --group "mobile-offline" --ci-build-id $BUILD_ID --tag "mobile,offline" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/offline/*.cy.js" --config viewportWidth=375,viewportHeight=667
 
 # Start streaming the test file over RTMP to
 # the local owncast instance.
@@ -62,6 +80,6 @@ trap finish EXIT SIGHUP SIGINT SIGTERM SIGQUIT SIGABRT SIGTERM
 sleep 20
 
 # Run cypress browser tests for desktop
-npx cypress run --group "desktop-online" --env tags=desktop --ci-build-id $BUILD_ID --tag "desktop,online" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/online/*.cy.js"
+npx cypress run --browser "$BROWSER" --group "desktop-online" --env tags=desktop --ci-build-id $BUILD_ID --tag "desktop,online" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/online/*.cy.js"
 # Run cypress browser tests for mobile
-npx cypress run --group "mobile-online" --ci-build-id $BUILD_ID --tag "mobile,online" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/online/*.cy.js" --config viewportWidth=375,viewportHeight=667
+npx cypress run --browser "$BROWSER" --group "mobile-online" --ci-build-id $BUILD_ID --tag "mobile,online" --record --key e9c8b547-7a8f-452d-8c53-fd7531491e3b --spec "cypress/e2e/online/*.cy.js" --config viewportWidth=375,viewportHeight=667