feat: add Playwright screenshot generation for wp-admin pages

.github/workflows/screenshots.yml

@@ -0,0 +1,97 @@
+name: Generate Screenshots
+
+on:
+  push:
+    tags: ['v*']
+  workflow_dispatch:
+
+jobs:
+  screenshots:
+    runs-on: ubuntu-latest
+
+    services:
+      mysql:
+        image: mysql:8.0
+        env:
+          MYSQL_ROOT_PASSWORD: root
+          MYSQL_DATABASE: wordpress
+        ports:
+          - 3306:3306
+        options: >-
+          --health-cmd="mysqladmin ping"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.2'
+          extensions: mysql, gd, zip
+
+      - name: Install WordPress
+        run: |
+          # Download WordPress
+          mkdir -p /tmp/wordpress
+          curl -sL https://wordpress.org/latest.tar.gz | tar xz -C /tmp/wordpress --strip-components=1
+
+          # Create wp-config
+          cp /tmp/wordpress/wp-config-sample.php /tmp/wordpress/wp-config.php
+          sed -i "s/database_name_here/wordpress/" /tmp/wordpress/wp-config.php
+          sed -i "s/username_here/root/" /tmp/wordpress/wp-config.php
+          sed -i "s/password_here/root/" /tmp/wordpress/wp-config.php
+          sed -i "s/localhost/127.0.0.1/" /tmp/wordpress/wp-config.php
+
+          # Install WP-CLI
+          curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
+          chmod +x wp-cli.phar
+          sudo mv wp-cli.phar /usr/local/bin/wp
+
+          # Install WordPress
+          cd /tmp/wordpress
+          wp core install --url=http://localhost:8080 --title="Escalated Demo" --admin_user=admin --admin_password=admin --admin_email=admin@example.com --allow-root
+
+          # Link plugin
+          ln -s $GITHUB_WORKSPACE /tmp/wordpress/wp-content/plugins/escalated
+
+          # Activate plugin
+          wp plugin activate escalated --allow-root
+
+          # Start PHP built-in server
+          php -S localhost:8080 -t /tmp/wordpress &
+          sleep 2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Playwright
+        run: |
+          cd $GITHUB_WORKSPACE
+          npm init -y
+          npm install @playwright/test
+          npx playwright install chromium --with-deps
+
+      - name: Take Screenshots
+        run: |
+          cd $GITHUB_WORKSPACE
+          npx playwright test screenshots/wp-admin.spec.js --reporter=list
+
+      - name: Upload Screenshots
+        uses: actions/upload-artifact@v4
+        with:
+          name: escalated-wp-screenshots
+          path: screenshots/results/
+
+      - name: Commit Screenshots
+        if: github.ref_type == 'tag'
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add screenshots/results/
+          git commit -m "docs: update wp-admin screenshots" || true
+          git push origin HEAD:main || true

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+vendor/

screenshots/playwright.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('@playwright/test');
+
+module.exports = defineConfig({
+  testDir: '.',
+  timeout: 60000,
+  use: {
+    baseURL: 'http://localhost:8080',
+    viewport: { width: 1440, height: 900 },
+    screenshot: 'off',
+  },
+});

screenshots/wp-admin.spec.js

@@ -0,0 +1,94 @@
+const { test } = require('@playwright/test');
+const path = require('path');
+const fs = require('fs');
+
+const resultsDir = path.join(__dirname, 'results');
+
+test.beforeAll(() => {
+  if (!fs.existsSync(resultsDir)) {
+    fs.mkdirSync(resultsDir, { recursive: true });
+  }
+});
+
+test.describe('Escalated WP-Admin Screenshots', () => {
+  test.beforeEach(async ({ page }) => {
+    // Login to WordPress admin
+    await page.goto('/wp-login.php');
+    await page.fill('#user_login', 'admin');
+    await page.fill('#user_pass', 'admin');
+    await page.click('#wp-submit');
+    await page.waitForURL('**/wp-admin/**');
+  });
+
+  test('Ticket List', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'ticket-list.png'), fullPage: true });
+  });
+
+  test('Ticket Detail', async ({ page }) => {
+    // Navigate to tickets, click first one if exists
+    await page.goto('/wp-admin/admin.php?page=escalated');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    const ticketLink = page.locator('table.wp-list-table tbody tr:first-child a').first();
+    if (await ticketLink.count() > 0) {
+      await ticketLink.click();
+      await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+      await page.screenshot({ path: path.join(resultsDir, 'ticket-detail.png'), fullPage: true });
+    }
+  });
+
+  test('Departments', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-departments');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'departments.png'), fullPage: true });
+  });
+
+  test('SLA Policies', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-sla-policies');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'sla-policies.png'), fullPage: true });
+  });
+
+  test('Automations', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-automations');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'automations.png'), fullPage: true });
+  });
+
+  test('Tags', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-tags');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'tags.png'), fullPage: true });
+  });
+
+  test('Canned Responses', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-canned-responses');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'canned-responses.png'), fullPage: true });
+  });
+
+  test('Macros', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-macros');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'macros.png'), fullPage: true });
+  });
+
+  test('Reports', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-reports');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'reports.png'), fullPage: true });
+  });
+
+  test('Settings', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-settings');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'settings.png'), fullPage: true });
+  });
+
+  test('API Tokens', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=escalated-api-tokens');
+    await page.waitForSelector('.escalated-wrap', { timeout: 10000 });
+    await page.screenshot({ path: path.join(resultsDir, 'api-tokens.png'), fullPage: true });
+  });
+});