diff --git a/.github/workflows/screenshots.yml b/.github/workflows/screenshots.yml new file mode 100644 index 0000000..7171f7f --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7e5da87 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +vendor/ diff --git a/screenshots/playwright.config.js b/screenshots/playwright.config.js new file mode 100644 index 0000000..cf8b50c --- /dev/null +++ b/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', + }, +}); diff --git a/screenshots/results/.gitkeep b/screenshots/results/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/screenshots/wp-admin.spec.js b/screenshots/wp-admin.spec.js new file mode 100644 index 0000000..0a2d563 --- /dev/null +++ b/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 }); + }); +});