Add visual regression tests (#994)

Co-authored-by: Roman Pronskiy <roman@pronskiy.com>
Co-authored-by: Derick Rethans <derick@php.net>

.github/workflows/pr-closed.yml

@@ -13,4 +13,6 @@ jobs:
           host: ${{ secrets.PREVIEW_REMOTE_HOST }}
           username: ${{ secrets.PREVIEW_REMOTE_USER }}
           key: ${{ secrets.PREVIEW_SSH_KEY }}
-          script: bash /home/thephpfoundation/scripts/pr_closed.sh web-php ${{ github.event.number }}
+          script: |
+            bash /home/thephpfoundation/scripts/pr_closed.sh web-php ${{ github.event.number }}
+            bash /home/thephpfoundation/scripts/pr_closed.sh web-php-regression-report ${{ github.event.number }}

.github/workflows/pr-preview.yml

@@ -32,4 +32,99 @@ jobs:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           edit-mode: 'replace'
           body: |
-            🚀 Commit ${{ github.sha }} Deployed on https://web-php-pr-${{ github.event.number }}.preview.thephp.foundation
+            🚀 Preview for commit ${{ github.sha }} can be found at https://web-php-pr-${{ github.event.number }}.preview.thephp.foundation
+
+  tests_visual:
+    name: "Visual Tests"
+
+    runs-on: "ubuntu-latest"
+    if: github.repository_owner == 'php'
+
+    strategy:
+      matrix:
+        php-version:
+          - "8.2"
+        node-version:
+          - "22.x"
+
+    env:
+      HTTP_HOST: "localhost:8080"
+
+    steps:
+      - name: "Checkout"
+        uses: actions/checkout@v4
+        with:
+          ref: "refs/pull/${{ github.event.number }}/merge"
+
+      - name: "Set up PHP"
+        uses: "shivammathur/setup-php@v2"
+        with:
+          coverage: "none"
+          extensions: "none, curl, dom, json, mbstring, tokenizer, xml, xmlwriter"
+          php-version: "${{ matrix.php-version }}"
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: "Set up problem matchers for PHP"
+        run: "echo \"::add-matcher::${{ runner.tool_cache }}/php.json\""
+
+      - name: "Set up problem matchers for phpunit/phpunit"
+        run: "echo \"::add-matcher::${{ runner.tool_cache }}/phpunit.json\""
+
+      - name: "Determine composer cache directory"
+        run: "echo \"COMPOSER_CACHE_DIR=$(composer config cache-dir)\" >> $GITHUB_ENV"
+
+      - name: "Cache dependencies installed with composer"
+        uses: "actions/cache@v3"
+        with:
+          path: "${{ env.COMPOSER_CACHE_DIR }}"
+          key: "php-${{ matrix.php-version }}-composer-${{ hashFiles('composer.lock') }}"
+          restore-keys: "php-${{ matrix.php-version }}-composer-"
+
+      - name: "Install dependencies with composer"
+        run: "composer install --ansi --no-interaction --no-progress"
+
+      - name: "Install dependencies"
+        run: "yarn install"
+
+      - name: "Install Playwright"
+        run: "npx playwright install"
+
+      - name: "Run visual tests"
+        run: "make tests_visual"
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - uses: easingthemes/ssh-deploy@main
+        if: ${{ !cancelled() }}
+        with:
+          REMOTE_HOST: ${{ secrets.PREVIEW_REMOTE_HOST }}
+          REMOTE_USER: ${{ secrets.PREVIEW_REMOTE_USER }}
+          SSH_PRIVATE_KEY: ${{ secrets.PREVIEW_SSH_KEY }}
+          SOURCE: "playwright-report/"
+          TARGET: "/home/thephpfoundation/preview/web-php-regression-report-pr-${{ github.event.number }}/public"
+          SCRIPT_BEFORE: bash /home/thephpfoundation/scripts/pr_created_pre.sh web-php-regression-report ${{ github.event.number }}
+
+      - uses: peter-evans/find-comment@v3
+        if: ${{ !cancelled() }}
+        id: snapshot
+        with:
+          issue-number: ${{ github.event.number }}
+          comment-author: 'github-actions[bot]'
+
+      - uses: peter-evans/create-or-update-comment@v4
+        if: ${{ !cancelled() }}
+        with:
+          issue-number: ${{ github.event.number }}
+          comment-id: ${{ steps.snapshot.outputs.comment-id }}
+          edit-mode: 'replace'
+          body: |
+            🚀 Regression report for commit ${{ github.sha }} is at https://web-php-regression-report-pr-${{ github.event.number }}.preview.thephp.foundation

.github/workflows/update-screenshots.yaml

@@ -0,0 +1,74 @@
+# https://docs.github.com/en/actions
+
+name: "Update screenshots"
+
+on:
+  workflow_dispatch:
+
+jobs:
+  tests_update_snapshots:
+    name: "Update Tests snapshots"
+
+    runs-on: "ubuntu-latest"
+
+    strategy:
+      matrix:
+        php-version:
+          - "8.2"
+        node-version:
+          - "22.x"
+
+    env:
+      HTTP_HOST: "localhost:8080"
+
+    steps:
+      - name: "Checkout"
+        uses: "actions/checkout@v4"
+
+      - name: "Set up PHP"
+        uses: "shivammathur/setup-php@v2"
+        with:
+          coverage: "none"
+          extensions: "none, curl, dom, json, mbstring, tokenizer, xml, xmlwriter"
+          php-version: "${{ matrix.php-version }}"
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: "Set up problem matchers for PHP"
+        run: "echo \"::add-matcher::${{ runner.tool_cache }}/php.json\""
+
+      - name: "Set up problem matchers for phpunit/phpunit"
+        run: "echo \"::add-matcher::${{ runner.tool_cache }}/phpunit.json\""
+
+      - name: "Determine composer cache directory"
+        run: "echo \"COMPOSER_CACHE_DIR=$(composer config cache-dir)\" >> $GITHUB_ENV"
+
+      - name: "Cache dependencies installed with composer"
+        uses: "actions/cache@v3"
+        with:
+          path: "${{ env.COMPOSER_CACHE_DIR }}"
+          key: "php-${{ matrix.php-version }}-composer-${{ hashFiles('composer.lock') }}"
+          restore-keys: "php-${{ matrix.php-version }}-composer-"
+
+      - name: "Install dependencies with composer"
+        run: "composer install --ansi --no-interaction --no-progress"
+
+      - name: "Install dependencies"
+        run: "yarn install"
+
+      - name: "Install Playwright"
+        run: "npx playwright install"
+
+      - name: "Run visual tests"
+        run: "make tests_update_snapshots"
+
+      - name: Update snapshots
+        uses: test-room-7/action-update-file@v1
+        if: ${{ !cancelled() }}
+        with:
+          file-path: tests/Visual/**/*
+          commit-msg: Update snapshots
+          github-token: ${{ secrets.GITHUB_TOKEN }}