e2e tests refactor

.github/workflows/playwright.yml

@@ -1,15 +1,6 @@
 name: Progress Planner Playwright Tests
 
 env:
-  WORDPRESS_URL: http://localhost:8080
-  WORDPRESS_ADMIN_USER: admin
-  WORDPRESS_ADMIN_PASSWORD: password
-  WORDPRESS_ADMIN_EMAIL: admin@example.com
-  WORDPRESS_TABLE_PREFIX: wp_
-  WORDPRESS_DB_USER: wpuser
-  WORDPRESS_DB_PASSWORD: wppass
-  WORDPRESS_DB_NAME: wordpress
-  WORDPRESS_DB_PORT: 3307 # So it can run locally (hopefully).
   PRPL_TEST_TOKEN: 0220a2de67fc29094281088395939f58
   YOAST_TOKEN: ${{ secrets.YOAST_TOKEN }}
 
@@ -23,34 +14,70 @@ on:
   pull_request:
 
 jobs:
+  # Main E2E tests using WP Playground (fast, no Docker)
   e2e-tests:
     runs-on: ubuntu-latest
 
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright Tests
+        run: npm run test:e2e
+        env:
+          PLAYGROUND: 'true'
+
+      - name: Upload Playwright Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+
+      - name: Upload failure screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-screenshots
+          path: |
+            login-failed.png
+            test-results/
+
+  # Yoast Premium tests require Docker (for Composer/premium plugin installation)
+  # Runs in parallel with e2e-tests - Docker spins up while Playground tests run
+  yoast-premium-tests:
+    runs-on: ubuntu-latest
+
     services:
       mysql:
         image: mariadb:10.6
         env:
           MYSQL_ROOT_PASSWORD: root
-          MYSQL_DATABASE: ${{ env.WORDPRESS_DB_NAME }}
-          MYSQL_USER: ${{ env.WORDPRESS_DB_USER }}
-          MYSQL_PASSWORD: ${{ env.WORDPRESS_DB_PASSWORD }}
+          MYSQL_DATABASE: wordpress
+          MYSQL_USER: wpuser
+          MYSQL_PASSWORD: wppass
         ports:
-          - 3307:3306 # GitHub Actions doesn't support environment variables in the ports section.
+          - 3307:3306
       wordpress:
         image: wordpress:latest
         env:
           WORDPRESS_DB_HOST: mysql
-          WORDPRESS_DB_USER: ${{ env.WORDPRESS_DB_USER }}
-          WORDPRESS_DB_PASSWORD: ${{ env.WORDPRESS_DB_PASSWORD }}
-          WORDPRESS_DB_NAME: ${{ env.WORDPRESS_DB_NAME }}
-          WORDPRESS_DB_PORT: ${{ env.WORDPRESS_DB_PORT }}
-          WORDPRESS_TABLE_PREFIX: ${{ env.WORDPRESS_TABLE_PREFIX }}
+          WORDPRESS_DB_USER: wpuser
+          WORDPRESS_DB_PASSWORD: wppass
+          WORDPRESS_DB_NAME: wordpress
           WORDPRESS_DEBUG: 1
-          WORDPRESS_URL: ${{ env.WORDPRESS_URL }}
-          WORDPRESS_ADMIN_USER: ${{ env.WORDPRESS_ADMIN_USER }}
-          WORDPRESS_ADMIN_PASSWORD: ${{ env.WORDPRESS_ADMIN_PASSWORD }}
-          WORDPRESS_ADMIN_EMAIL: ${{ env.WORDPRESS_ADMIN_EMAIL }}
-          PRPL_TEST_TOKEN: ${{ env.PRPL_TEST_TOKEN }}
         ports:
           - 8080:80
         options: >-
@@ -61,27 +88,31 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install Node.js & Playwright
-        uses: actions/setup-node@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
-      - run: npm install -D @playwright/test
-      - run: npx playwright install --with-deps
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
 
       - name: Complete WordPress installation
         run: |
-          echo "Installing WordPress at: $WORDPRESS_URL"
-          curl --silent -X POST "$WORDPRESS_URL/wp-admin/install.php?step=2" \
+          curl --silent -X POST "http://localhost:8080/wp-admin/install.php?step=2" \
           -d "weblog_title=My%20WordPress%20Site" \
-          -d "user_name=$WORDPRESS_ADMIN_USER" \
-          -d "admin_password=$WORDPRESS_ADMIN_PASSWORD" \
-          -d "admin_password2=$WORDPRESS_ADMIN_PASSWORD" \
-          -d "admin_email=$WORDPRESS_ADMIN_EMAIL" \
+          -d "user_name=admin" \
+          -d "admin_password=password" \
+          -d "admin_password2=password" \
+          -d "admin_email=admin@example.com" \
           -d "public=1"
 
-      - name: Install and activate plugin
+      - name: Setup WordPress with plugins
         run: |
           WP_CONTAINER=$(docker ps -qf "name=wordpress")
 
@@ -90,79 +121,56 @@ jobs:
           docker exec $WP_CONTAINER chmod +x wp-cli.phar
           docker exec $WP_CONTAINER mv wp-cli.phar /usr/local/bin/wp
 
-          # Create the plugins directory in the WordPress container
-          docker exec $WP_CONTAINER mkdir -p /var/www/html/wp-content/plugins
-
-          # Copy plugin files to WordPress plugins directory
+          # Copy and activate Progress Planner
           docker cp . $WP_CONTAINER:/var/www/html/wp-content/plugins/progress-planner
-
-          # Activate the plugin using WP-CLI
           docker exec $WP_CONTAINER wp plugin activate progress-planner --allow-root
 
-          # Enable debug mode
-          docker exec $WP_CONTAINER wp option update prpl_debug true --allow-root
-
-          # Insert test token
+          # Set test token
           docker exec $WP_CONTAINER wp option update progress_planner_test_token $PRPL_TEST_TOKEN --allow-root
 
-          # Install Yoast SEO
+          # Install and activate Yoast SEO (free)
           docker exec $WP_CONTAINER wp plugin install wordpress-seo --activate --allow-root
 
-      - name: Run Playwright Tests
-        run: npx playwright test tests/e2e/
-
-      # Begin Yoast SEO Premium tests
-      - name: Install PHP & Composer on host
+      - name: Install PHP & Composer
         run: |
           sudo apt-get update
           sudo apt-get install -y git curl unzip php-cli php-curl php-mbstring php-xml php-zip
           curl -sS https://getcomposer.org/installer | php
           sudo mv composer.phar /usr/local/bin/composer
 
-      - name: Install plugin dependencies (Composer)
+      - name: Install Yoast SEO Premium
         run: |
+          WP_CONTAINER=$(docker ps -qf "name=wordpress")
+
+          # Configure Composer for Yoast
           composer config -g http-basic.my.yoast.com token $YOAST_TOKEN
           composer config repositories.my-yoast composer https://my.yoast.com/packages/
           composer config --no-plugins allow-plugins.composer/installers true
-          composer install --working-dir=./
+          composer install
 
-      - name: Require Yoast SEO Premium & copy files
-        run: |
-          WP_CONTAINER=$(docker ps -qf "name=wordpress")
+          # Install and copy Yoast Premium
           composer require yoast/wordpress-seo-premium
           composer dump-autoload --working-dir=./wp-content/plugins/wordpress-seo-premium
           docker cp ./wp-content/plugins/wordpress-seo-premium $WP_CONTAINER:/var/www/html/wp-content/plugins/wordpress-seo-premium
 
-      - name: Activate Yoast SEO Premium
-        run: |
-          WP_CONTAINER=$(docker ps -qf "name=wordpress")
+          # Activate and configure
           docker exec $WP_CONTAINER wp plugin activate wordpress-seo-premium --allow-root
 
-      - name: Update Yoast Premium settings
-        run: |
-          WP_CONTAINER=$(docker ps -qf "name=wordpress")
-          # Get current option value
+          # Disable redirect after install
           CURRENT_OPTION=$(docker exec $WP_CONTAINER wp option get wpseo_premium --format=json --allow-root)
-          # Update the option with should_redirect_after_install set to false
           UPDATED_OPTION=$(echo $CURRENT_OPTION | jq '.should_redirect_after_install = false')
-          # Save the updated option
           docker exec $WP_CONTAINER wp option update wpseo_premium "$UPDATED_OPTION" --format=json --allow-root
 
-      - name: Run Yoast Focus Element Test Again
-        run: npx playwright test tests/e2e/yoast-focus-element.spec.js
-      # End Yoast SEO Premium tests
+      - name: Run Yoast Integration Tests
+        run: npx playwright test --project=parallel --grep="Yoast"
+        env:
+          WORDPRESS_URL: http://localhost:8080
+          WORDPRESS_ADMIN_USER: admin
+          WORDPRESS_ADMIN_PASSWORD: password
 
-      - name: Upload Playwright Report
+      - name: Upload Yoast Test Report
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-report
+          name: yoast-playwright-report
           path: playwright-report/
-
-      - name: Upload Playwright screenshots as artifacts
-        if: failure()
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-screenshots
-          path: |
-            onboarding-failed.png  # Specify the path of the screenshot you want to upload