Add backend integration for E2E CI pipeline (G-Research#99)

* Add playwright to project

* Add playright CI workflow

* Add rudimentary test for Dashboard

* Move playwright into base directory

* Update playwright.yml

* Update playwright.yml

* Update playwright.yml

* Update playwright.yml

* Update playwright.yml

* Update playwright.yml

* Update playwright.yml

* Update playwright.yml

* Fix bad yml

* Add wait-on for dev server pipeline

* Add failing test to check pipeline

* Remove failing test

* Add tests for dashboard quick navigation buttons

* Remove example test and add to readme

* Add backend clone and run before tests

* Fix docker execution

* Fix docker TTY issue

* Add wait-on for backend server

* Add k6 installation and database seeding

* Rename Dashboard logic tests

* Add preliminary dashboard test

* Fix DashboardContent test

* Add dev mode to docker pipeline

* Fix pipeline issues (remove unused commands)

* Remove logging and debugging screenshots

* Fix pipeline

* Fix pipeline

* Access load script by getting raw file instead of pulling entire repo

* Remove duplicate tests

.github/workflows/playwright.yml

@@ -1,31 +1,61 @@
 name: Playwright Tests
+
 on:
   push:
-    branches: [ main, master, release/* ]
+    branches: [ main, release/* ]
   pull_request:
     branches: [ main, release/* ]
+
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
       with:
         node-version: 16
-    - name: Install dependencies
+
+    - name: Install frontend dependencies
       run: cd src && npm ci --legacy-peer-deps
+
     - name: Install wait-on
       run: npm install -g wait-on
-    - name: Install Playwright Browsers
+
+    - name: Install Playwright browsers
       run: npx playwright install --with-deps
-    - name: Run Dev Server and E2E Tests
+
+    - name: Build and run backend
+      run: |
+        docker run --rm -p 5000:5000 -e FML_DEV_MODE=true gresearch/fasttrackml:main &
+        npx wait-on http://localhost:5000
+
+    - name: Install k6
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y gnupg software-properties-common ca-certificates curl
+        curl -s https://dl.k6.io/key.gpg | sudo apt-key add -
+        echo "deb https://dl.k6.io/deb stable main" | sudo tee /etc/apt/sources.list.d/k6.list
+        sudo apt-get update
+        sudo apt-get install -y k6
+
+    - name: Seed database with k6
+      run: |
+        wget https://raw.githubusercontent.com/G-Research/fasttrackml/main/docs/example/k6_load.js
+        k6 run k6_load.js
+
+    - name: Start frontend dev server and run E2E tests
       run: |
         cd src
         npm start &
         npx wait-on http://localhost:3000
         npx playwright test src/e2e
-    - uses: actions/upload-artifact@v4
+
+    - name: Upload Playwright report
+      uses: actions/upload-artifact@v4
       if: always()
       with:
         name: playwright-report

src/e2e/Dashboard/DashboardContent.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = 'http://localhost:3000';
+
+test.describe('Dashboard', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+    await page.waitForLoadState('networkidle');
+  });
+
+  // Test that the total number of runs is two. This assumes that the
+  // test database has been seeded with two runs by running `k6 run k6_load.js`
+  test('has two runs', async ({ page }) => {
+    const textContent = await page.textContent(
+      'p.ProjectStatistics__totalRuns',
+    );
+    expect(textContent).toBe('Total runs: 2');
+  });
+});