ci: deploy e2e report to github pages

.github/workflows/e2e.yml

@@ -1,7 +1,11 @@
 name: E2E Tests
 on:
+  workflow_dispatch:
   pull_request:
     types: [opened, synchronize, reopened, ready_for_review]
+    paths:
+      - 'src/**'
+      - 'e2e/**'
 
 jobs:
   build:
@@ -31,8 +35,8 @@ jobs:
           platforms: linux/amd64
           push: true
           tags: meienberger/runtipi:e2e
-          cache-from: type=registry,ref=meienberger/runtipi:buildcache
-          cache-to: type=registry,ref=meienberger/runtipi:buildcache,mode=max
+          cache-from: type=registry,ref=meienberger/runtipi:buildcache-e2e
+          cache-to: type=registry,ref=meienberger/runtipi:buildcache-e2e,mode=max
 
   deploy:
     timeout-minutes: 15
@@ -154,7 +158,51 @@ jobs:
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
+          retention-days: 7
+
+  report-deployment:
+    runs-on: ubuntu-latest
+    needs: [e2e]
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+      pull-requests: write # to comment on the PR
+      issues: write # to comment on the PR
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    if: always()
+    steps:
+      - name: Download report artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: playwright-report
+          path: playwright-report/
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: playwright-report/
+
+      - name: Deploy to GitHub Pages
+        id: report-deployment
+        uses: actions/deploy-pages@v2
+
+      - name: Comment on PR
+        uses: actions/github-script@v6
+        if: github.event_name == 'pull_request'
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `Playwright report: ${{ steps.report-deployment.outputs.page_url }}`
+            })
 
   teardown:
     runs-on: ubuntu-latest

e2e/0003-apps.spec.ts

@@ -8,7 +8,7 @@ test.beforeEach(async ({ page, isMobile }) => {
 
   // Go to hello world app
   if (isMobile) {
-    await page.getByRole('button', { name: 'menu' }).click();
+    await page.getByTestId('navbar-menu').click();
   }
   await page.getByRole('link', { name: 'App store' }).click();
   await page.getByPlaceholder('Search').fill('hello');

package.json

@@ -6,7 +6,7 @@
     "copy:migrations": "mkdir -p dist/migrations && cp -r ./src/server/migrations dist",
     "test": "dotenv -e .env.test -- jest --colors",
     "test:e2e": "NODE_ENV=test dotenv -e .env -e .env.e2e -- playwright test",
-    "test:e2e:ui": "NODE_ENV=test dotenv -e .env -- playwright test --ui",
+    "test:e2e:ui": "NODE_ENV=test dotenv -e .env -e .env.e2e -- playwright test --ui",
     "test:client": "jest --colors --selectProjects client --",
     "test:server": "jest --colors --selectProjects server --",
     "dev": "npm run copy:migrations && nodemon",
@@ -20,7 +20,7 @@
     "start:rc": "docker-compose -f docker-compose.rc.yml --env-file .env up --build",
     "start:dev": "./scripts/start-dev.sh",
     "start:prod": "./scripts/start-prod.sh",
-    "start:e2e": "./scripts/start-e2e.sh",
+    "start:e2e": "./scripts/start-e2e.sh latest",
     "start:pg": "docker run --name test-db -p 5433:5432 -d --rm -e POSTGRES_PASSWORD=postgres postgres:14",
     "version": "echo $npm_package_version",
     "release:rc": "./scripts/deploy/release-rc.sh",

playwright.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
 
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: `http://${process.env.SERVER_IP}`,
+    baseURL: `http://${process.env.SERVER_IP}${process.env.SERVER_PORT ? `:${process.env.SERVER_PORT}` : ''}`,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -42,21 +42,21 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
-    // },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
 
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
 
     /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
     // {
     //   name: 'Mobile Safari',
     //   use: { ...devices['iPhone 12'] },

src/client/components/ui/Header/Header.tsx

@@ -30,7 +30,7 @@ export const Header: React.FC<IProps> = ({ isUpdateAvailable }) => {
   return (
     <header className="text-white navbar navbar-expand-md navbar-dark navbar-overlap d-print-none" data-bs-theme="dark">
       <div className="container-xl">
-        <button aria-label="menu" className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+        <button data-testid="navbar-menu" aria-label="menu" className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
           <span className="navbar-toggler-icon" />
         </button>
         <Link href="/" passHref>