debug

Author: louiswol94

tests/e2e/CI-SETUP.md

@@ -1,132 +1,61 @@
-# Playwright Tests for Code Snippets
+# Playwright Tests
 
-Simple Playwright tests for the Code Snippets WordPress plugin using `@wordpress/env`.
+End-to-end tests for Code Snippets using `@wordpress/env`.
 
-## 📋 Prerequisites
+## Prerequisites
 
-- **Docker**: wp-env requires Docker to be running
-- **Node.js**: Version 18 or higher
-- **npm**: For package management
+- Docker (for wp-env)
+- Node.js 18+
 
-## 🚀 Quick Start
+## Quick Start
 
-### 1. Install Dependencies
 ```bash
+# Install dependencies
 npm install
-```
 
-### 2. Build Plugin and Install PHP Dependencies
-```bash
-npm run build
-cd src && composer install
-```
+# Build plugin and install PHP dependencies
+npm run build && cd src && composer install && cd ..
 
-### 3. Start WordPress Environment
-```bash
-# Make sure Docker is running first
+# Start WordPress environment
 npm run wp-env:start
-```
 
-### 4. Run Tests
-```bash
-# Run all tests
+# Run tests
 npm run test:playwright
-
-# Run with UI
-npm run test:playwright:ui
-
-# Run in debug mode
-npm run test:playwright:debug
-
-# Run specific test categories
-npm run test:playwright -- --grep="@admin"
-```
-
-### 5. Quick Test Script
-```bash
-# Run everything with one command
-./test-playwright.sh
 ```
 
-## 📁 Test Structure
-
-- `admin-page.spec.ts` - Tests for the main admin page (@admin)
-
-## 🔧 Configuration
-
-- **WordPress Environment**: `.wp-env.json`
-- **Playwright Config**: `tests/playwright/playwright.config.ts`
-
-## 🎯 What Gets Tested
+## Commands
 
-- ✅ Admin page loads correctly
-- ✅ Functions tab displays and is visible
-- ✅ WordPress authentication works
-- ✅ Plugin is properly activated
-
-## 🛠️ Troubleshooting
-
-### Docker Issues
 ```bash
-# Check if Docker is running
-docker --version
-docker ps
-
-# Start Docker Desktop (if installed)
-# Or start Docker service on Linux
-sudo systemctl start docker
+npm run wp-env:start              # Start WordPress
+npm run wp-env:stop               # Stop WordPress
+npm run wp-env:clean              # Clean environment
+npm run test:playwright           # Run tests
+npm run test:playwright:ui        # Run with UI
+npm run test:playwright:debug     # Debug mode
 ```
 
-### WordPress Not Starting
-```bash
-# Check if port 8888 is available
-lsof -i :8888
+## CI/CD
 
-# Stop any existing wp-env
-npm run wp-env:stop
-```
+Tests run automatically on:
+- Pull requests with `run-tests` label
+- Push to `core` branch
+- Manual workflow dispatch
 
-### Tests Failing
-```bash
-# Run with debug output
-npm run test:playwright:debug
-
-# Check WordPress is running
-curl http://localhost:8888/wp-admin/
-```
+## Troubleshooting
 
-### Clean Restart
+**Docker not running:**
 ```bash
-# Stop WordPress
-npm run wp-env:stop
-
-# Clean environment
-npm run wp-env:clean
-
-# Start fresh
-npm run wp-env:start
+docker --version && docker ps
 ```
 
-### Alternative: Test Against Existing WordPress Site
-If you don't want to use Docker, you can test against an existing WordPress site:
-
+**WordPress won't start:**
 ```bash
-# Set environment variables
-export WP_URL=http://your-wordpress-site.local
-export WP_USERNAME=admin
-export WP_PASSWORD=password
-
-# Run tests against existing site
-npm run test:playwright
+lsof -i :8888  # Check port availability
+npm run wp-env:stop && npm run wp-env:start
 ```
 
-## 📋 Available Commands
-
+**Tests failing:**
 ```bash
-npm run wp-env:start     # Start WordPress environment
-npm run wp-env:stop      # Stop WordPress environment
-npm run wp-env:clean     # Clean WordPress environment
-npm run test:playwright  # Run all tests
-npm run test:playwright:ui    # Run with UI
-npm run test:playwright:debug # Run in debug mode
+npm run test:playwright:debug
+curl http://localhost:8888/wp-admin/  # Check WordPress
 ```

tests/e2e/README.md

@@ -9,23 +9,39 @@ test.describe('Code Snippets Admin Page @admin', () => {
 	});
 
   	test('Can add a new snippet', async ({ page }) => {
-		await page.click('text=Add New')
-		await page.fill('#title', TEST_SNIPPET_NAME)
-		await page.fill('.CodeMirror textarea', 'echo "Hello World!";')
-		await page.click('text=Save Snippet')
-		await expect(page.locator('#message.notice')).toContainText('Snippet created')
+		await page.click('text=Add New');
+		await page.waitForLoadState('networkidle');
+		
+		// Wait for the form to be ready
+		await page.waitForSelector('#title');
+		await page.fill('#title', TEST_SNIPPET_NAME);
+		
+		// Wait for CodeMirror to be ready
+		await page.waitForSelector('.CodeMirror textarea');
+		await page.fill('.CodeMirror textarea', 'echo "Hello World!";');
+		
+		await page.click('text=Save Snippet');
+		await expect(page.locator('#message.notice')).toContainText('Snippet created');
 	});
 
   	test('Can activate and deactivate a snippet', async ({ page }) => {
+		// Wait for the snippet to exist before clicking
+		await page.waitForSelector(`text=${TEST_SNIPPET_NAME}`);
 		await page.click(`text=${TEST_SNIPPET_NAME}`);
+		await page.waitForLoadState('networkidle');
+		
 		await page.click('text=Save and Activate');
 		await expect(page.locator('#message.notice p')).toContainText('Snippet updated and activated.');
 		await page.click('text=Save and Deactivate');
 		await expect(page.locator('#message.notice p')).toContainText('Snippet updated and deactivated');
 	});
 
   	test('Can delete a snippet', async ({ page }) => {
+		// Wait for the snippet to exist before clicking
+		await page.waitForSelector(`text=${TEST_SNIPPET_NAME}`);
 		await page.click(`text=${TEST_SNIPPET_NAME}`);
+		await page.waitForLoadState('networkidle');
+		
 		await page.click('text=Delete');
 		await page.click('button.components-button.is-destructive.is-primary'); // Confirm dialog
 		await expect(page.locator('body')).not.toContainText(TEST_SNIPPET_NAME);