Playwright setup

Author: AdrienClairembault

.github/actions/docker-compose-app.yml

@@ -4,6 +4,9 @@ services:
     image: "ghcr.io/glpi-project/${PHP_IMAGE:-githubactions-php-apache:8.3}"
     environment:
       CODE_COVERAGE: "${CODE_COVERAGE:-false}"
+      CI: true # Will be used to alter some configuration when running on github vs locally.
+      PLAYWRIGHT_BROWSERS_PATH: /opt/pw-browsers # Custom browser path to prevent some rights issues.
+      GLPI_BASE_URL: http://localhost:80 # Default URL for GLPI. Used for e2e tests.
     volumes:
       - type: "bind"
         source: "${APPLICATION_ROOT}"

.github/workflows/ci.yml

@@ -275,3 +275,64 @@ jobs:
         with:
           name: cypress-screenshots
           path: tests/cypress/screenshots
+
+  playwright:
+    # Do not run scheduled tests on tier repositories
+    if: github.repository == 'glpi-project/glpi' || github.event_name != 'schedule'
+    name: "Playwright tests using latest PHP and MariaDB versions"
+    runs-on: "ubuntu-latest"
+    timeout-minutes: 60
+    env:
+      COMPOSE_FILE: ".github/actions/docker-compose-app.yml:.github/actions/docker-compose-services.yml"
+      APPLICATION_ROOT: "${{ github.workspace }}"
+      DB_IMAGE: "githubactions-mariadb:10.11"
+      PHP_IMAGE: "githubactions-php-apache:8.3"
+      UPDATE_FILES_ACL: true
+    steps:
+      - name: "Set env"
+        run: |
+          echo "APP_CONTAINER_HOME=${{ runner.temp }}/app_home" >> $GITHUB_ENV
+      - name: "Checkout"
+        uses: "actions/checkout@v4"
+      - name: "Restore dependencies cache"
+        uses: actions/cache@v4
+        with:
+          path: |
+            ${{ env.APP_CONTAINER_HOME }}/.composer/cache/
+            ${{ env.APP_CONTAINER_HOME }}/.npm/_cacache/
+          key: "app_home_deps-8.3-${{ hashFiles('composer.lock', 'package-lock.json') }}"
+          restore-keys: |
+            app_home_deps-8.3-
+            app_home_deps-
+      - name: "Initialize containers"
+        run: |
+          .github/actions/init_containers-start.sh
+      - name: "Show versions"
+        run: |
+          .github/actions/init_show-versions.sh
+      - name: "Build GLPI's dependencies and translations"
+        run: |
+          docker compose exec -T app .github/actions/init_build.sh
+      - name: Install Playwright dependencies
+        run: docker compose exec -T app npm ci
+      - name: Install Playwright Browsers
+        run: docker compose exec -T --user=root app sudo -E npx playwright install chromium --with-deps
+      - name: "Install DB tests"
+        if: ${{ !cancelled() }}
+        run: |
+          docker compose exec -T app .github/actions/test_install.sh
+      - name: Lint tests
+        if: ${{ !cancelled() }}
+        run: docker compose exec -T app npx tsc -p tsconfig.json --noEmit
+      - name: Run Playwright tests
+        if: ${{ !cancelled() }}
+        run: docker compose exec -T app npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+      - name: Publish test summary results
+        if: ${{ !cancelled() }}
+        run: npx github-actions-ctrf ctrf/ctrf-report.json

.gitignore

@@ -49,3 +49,12 @@ phpstan.neon
 *.phar
 .env
 /resources/.illustrations_translations.php
+
+# Playwright
+ctrf/
+/tests/playwright/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/tests/playwright/.env.local
+!/tests/playwright/.env

eslint.config.mjs

@@ -3,6 +3,8 @@ import globals from "globals";
 import vue from "eslint-plugin-vue";
 import js from "@eslint/js";
 import cypress from "eslint-plugin-cypress/flat";
+import playwright from 'eslint-plugin-playwright';
+import tsParser from "@typescript-eslint/parser";
 
 export default [
     {
@@ -23,6 +25,20 @@ export default [
         ],
     },
     js.configs.recommended,
+    {
+        files: ["tests/playwright/**/*.ts"],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: "./tsconfig.json",
+                ecmaVersion: 'latest',
+                sourceType: "module"
+            },
+            globals: {
+                ...globals.node,
+            }
+        },
+    },
     {
         languageOptions: {
             ecmaVersion: 13,
@@ -159,5 +175,14 @@ export default [
         "rules": {
             "prefer-template": "off",
         }
+    },
+    {
+        ...playwright.configs['flat/recommended'],
+        files: ['tests/playwright/**'],
+        rules: {
+            ...playwright.configs['flat/recommended'].rules,
+            "playwright/no-force-option": "error",
+            "playwright/no-raw-locators": "error",
+        },
     }
 ];