docs: Update testing documentation and add deployment resilience scripts
- Enhanced documentation with selector stability best practices - Added recommendations for resilient testing and deployment - Created verify-selectors.sh script to validate critical selectors pre-deployment - Added pre-deploy-validation.sh for comprehensive environment validation - Improved troubleshooting section with specific recommendations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
bengizmo
parent
d1f1005a5a
commit
261ab99e88
4 changed files with 516 additions and 2 deletions
184
wordpress-dev/TESTING.md
Normal file
184
wordpress-dev/TESTING.md
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
# HVAC Community Events Testing Guide
|
||||
|
||||
This document provides guidance for running tests in the HVAC Community Events plugin, with a focus on the certificate functionality testing.
|
||||
|
||||
## Test Infrastructure
|
||||
|
||||
The testing infrastructure uses the following components:
|
||||
|
||||
- **Playwright**: For end-to-end (E2E) testing of the UI
|
||||
- **PHPUnit**: For unit and integration testing of PHP code
|
||||
- **Shell Scripts**: For test automation and test data generation
|
||||
|
||||
## Setting Up the Testing Environment
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js 16+
|
||||
- npm 7+
|
||||
- Staging environment access (Cloudways)
|
||||
- SSH access to staging server
|
||||
|
||||
### Installation
|
||||
|
||||
1. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. Install Playwright browsers:
|
||||
```bash
|
||||
npx playwright install
|
||||
```
|
||||
|
||||
## E2E Testing
|
||||
|
||||
The E2E tests use the Page Object Model (POM) pattern:
|
||||
|
||||
- `BasePage.ts`: Common functionality for all pages
|
||||
- `LoginPage.ts`: Login-related actions
|
||||
- `DashboardPage.ts`: Dashboard actions
|
||||
- `CertificatePage.ts`: Certificate-specific actions
|
||||
|
||||
### Running Certificate Tests
|
||||
|
||||
The certificate tests verify the generation and filtering of certificates:
|
||||
|
||||
```bash
|
||||
# Run all certificate tests
|
||||
npx playwright test tests/e2e/certificates.test.ts
|
||||
|
||||
# Run certificate generation test
|
||||
npx playwright test tests/e2e/certificate-generation-checked-in.test.ts
|
||||
```
|
||||
|
||||
### Using Test Scripts
|
||||
|
||||
Several automated test scripts are available in the `bin` directory:
|
||||
|
||||
#### Certificate Filter Testing
|
||||
|
||||
The `test-certificate-filter.sh` script allows you to test different certificate filter combinations:
|
||||
|
||||
```bash
|
||||
./bin/test-certificate-filter.sh
|
||||
```
|
||||
|
||||
This interactive script lets you:
|
||||
- Run all certificate filter tests
|
||||
- Run only event filtering tests
|
||||
- Run only attendee filtering tests
|
||||
- Run a custom filter test
|
||||
|
||||
#### E2E Test Optimization
|
||||
|
||||
The `optimize-e2e-tests.sh` script helps troubleshoot and optimize the E2E testing infrastructure:
|
||||
|
||||
```bash
|
||||
./bin/optimize-e2e-tests.sh
|
||||
```
|
||||
|
||||
This script:
|
||||
- Checks for Playwright installation issues
|
||||
- Validates the test directory structure
|
||||
- Analyzes the Playwright configuration
|
||||
- Provides recommendations for improvement
|
||||
|
||||
## Test Data Generation
|
||||
|
||||
To generate test data for certificate testing:
|
||||
|
||||
1. Create test events with attendees:
|
||||
```bash
|
||||
./bin/create-test-data-with-checkins.sh
|
||||
```
|
||||
|
||||
2. Generate certificates for checked-in attendees:
|
||||
```bash
|
||||
./bin/generate-test-certificates.sh
|
||||
```
|
||||
|
||||
3. Verify test data:
|
||||
```bash
|
||||
./bin/verify-certificate-data.sh
|
||||
```
|
||||
|
||||
## Testing Best Practices
|
||||
|
||||
1. **Test Independence**:
|
||||
- Each test should create its own test data
|
||||
- Tests should not depend on the state from other tests
|
||||
- Clean up test data when possible
|
||||
- Use isolated test users for different test suites
|
||||
|
||||
2. **Explicit Waits**:
|
||||
- Use explicit waits rather than fixed timeouts
|
||||
- Wait for specific elements/conditions, not fixed times
|
||||
- Use appropriate timeouts for WordPress's slower operations
|
||||
- Add logging for long-running operations
|
||||
|
||||
3. **Error Handling**:
|
||||
- Implement proper error handling in tests
|
||||
- Use try/catch blocks for potentially unstable operations
|
||||
- Take screenshots on failures for easier debugging
|
||||
- Implement comprehensive error message detection
|
||||
|
||||
4. **Selector Stability**:
|
||||
- Use CSS selectors that are less likely to change
|
||||
- Prefer attribute selectors (e.g., `input[name="log"]`) over ID selectors
|
||||
- Use multiple selector strategies with fallbacks for critical elements
|
||||
- Create debug scripts to verify selectors when UI changes
|
||||
- Centralize selectors in page objects for easier maintenance
|
||||
|
||||
5. **Resilient Deployment**:
|
||||
- Run pre-deployment selector verification tests
|
||||
- Implement health check scripts to validate the environment
|
||||
- Use canary deployments with automatic rollback on test failures
|
||||
- Maintain versioned snapshots of UI components
|
||||
- Add comprehensive monitoring of test execution
|
||||
|
||||
## Continuous Integration
|
||||
|
||||
The tests are configured to run in CI environments:
|
||||
|
||||
- `playwright.config.ts`: Contains CI-specific configuration
|
||||
- Test retries are enabled for CI environments to handle flaky tests
|
||||
- Detailed reporting is set up for CI environments
|
||||
|
||||
## Troubleshooting Common Issues
|
||||
|
||||
1. **Timeouts**: If tests are timing out, check network connectivity and server response times.
|
||||
|
||||
2. **Selector Issues**: If elements can't be found, check if selectors need updating due to UI changes.
|
||||
- Use the `debug-login-page.spec.ts` script to analyze login form structure
|
||||
- Use robust attribute selectors (e.g., `input[name="log"]`) instead of ID selectors
|
||||
- Implement multiple selector strategies with fallbacks for critical elements
|
||||
- Run selector verification tests before and after WordPress updates
|
||||
|
||||
3. **Authentication Problems**: Make sure test credentials are correct and the user has appropriate permissions.
|
||||
- Use the `bin/create-test-users.sh` script to ensure test users exist with correct roles
|
||||
- Verify login form structure with the debug scripts before running main tests
|
||||
- Implement robust error message detection in the LoginPage class
|
||||
|
||||
4. **Data Dependencies**: Ensure tests handle the case where expected data isn't present.
|
||||
- Use data generation scripts to create known test data
|
||||
- Implement check-and-create patterns in test setup
|
||||
|
||||
5. **Plugin Activation**: Some tests require the plugin to be freshly activated; use the plugin deactivation/activation commands.
|
||||
- Run `bin/verify-plugin-status.sh` before tests to ensure plugin is active
|
||||
- Consider automating plugin activation as part of test setup
|
||||
|
||||
## Testing Certificate Features
|
||||
|
||||
The certificate features have dedicated tests:
|
||||
|
||||
1. **Certificate Generation**: Tests the process of generating certificates for event attendees.
|
||||
|
||||
2. **Certificate Filtering**: Tests filtering certificates by:
|
||||
- Event
|
||||
- Attendee name/email
|
||||
- Combined filters
|
||||
|
||||
3. **Certificate Management**: Tests certificate actions like viewing, downloading, and revoking.
|
||||
|
||||
For detailed information on certificate testing, see the `tests/e2e/TESTING-STRATEGY.md` file.
|
||||
135
wordpress-dev/bin/pre-deploy-validation.sh
Executable file
135
wordpress-dev/bin/pre-deploy-validation.sh
Executable file
|
|
@ -0,0 +1,135 @@
|
|||
#!/bin/bash
|
||||
# pre-deploy-validation.sh - Script to validate environment before deployment
|
||||
# Usage: ./bin/pre-deploy-validation.sh [--ci]
|
||||
|
||||
set -e
|
||||
|
||||
# Colors for output
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[0;33m'
|
||||
RED='\033[0;31m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
# Parse arguments
|
||||
CI_MODE=false
|
||||
|
||||
for arg in "$@"; do
|
||||
case $arg in
|
||||
--ci)
|
||||
CI_MODE=true
|
||||
shift
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
echo -e "${GREEN}=== Pre-Deployment Validation Tool ===${NC}"
|
||||
echo "Verifying environment and test readiness before deployment..."
|
||||
|
||||
# Check if we're in the right directory
|
||||
if [ ! -d "tests/e2e" ]; then
|
||||
echo -e "${RED}Error: Please run this script from the wordpress-dev directory${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Create logs directory
|
||||
mkdir -p logs/pre-deploy
|
||||
|
||||
# Log function
|
||||
log() {
|
||||
echo "[$(date +"%Y-%m-%d %H:%M:%S")] $1" >> logs/pre-deploy/validation-$(date +"%Y%m%d").log
|
||||
echo "$1"
|
||||
}
|
||||
|
||||
# Function to run a validation check
|
||||
run_check() {
|
||||
local check_name=$1
|
||||
local check_command=$2
|
||||
|
||||
log "Running check: ${check_name}"
|
||||
|
||||
if eval "${check_command}"; then
|
||||
log "${GREEN}✓ Check passed: ${check_name}${NC}"
|
||||
return 0
|
||||
else
|
||||
log "${RED}✗ Check failed: ${check_name}${NC}"
|
||||
return 1
|
||||
fi
|
||||
}
|
||||
|
||||
# Validation checks
|
||||
validate_npm_dependencies() {
|
||||
log "Validating npm dependencies..."
|
||||
npm list @playwright/test > /dev/null
|
||||
}
|
||||
|
||||
validate_test_config() {
|
||||
log "Validating Playwright configuration..."
|
||||
[ -f "playwright.config.ts" ]
|
||||
}
|
||||
|
||||
validate_plugin_activation() {
|
||||
log "Checking if plugin activation script exists..."
|
||||
[ -f "bin/verify-plugin-status.sh" ] || [ -f "bin/activate-plugin.sh" ]
|
||||
}
|
||||
|
||||
validate_selectors() {
|
||||
log "Validating critical selectors..."
|
||||
bash bin/verify-selectors.sh
|
||||
}
|
||||
|
||||
validate_test_users() {
|
||||
log "Checking test user creation script..."
|
||||
[ -f "bin/create-test-users.sh" ]
|
||||
}
|
||||
|
||||
validate_certificate_system() {
|
||||
log "Validating certificate test scripts..."
|
||||
[ -f "tests/e2e/certificate-generation-checked-in.test.ts" ]
|
||||
}
|
||||
|
||||
# Main validation logic
|
||||
FAILURES=0
|
||||
|
||||
# Run all validation checks
|
||||
if ! run_check "NPM Dependencies" validate_npm_dependencies; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
if ! run_check "Test Configuration" validate_test_config; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
if ! run_check "Plugin Activation" validate_plugin_activation; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
if ! run_check "Test Users" validate_test_users; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
if ! run_check "Certificate System" validate_certificate_system; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
# Run selector validation last (most comprehensive)
|
||||
if ! run_check "Critical Selectors" validate_selectors; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
# Summary
|
||||
log "\n${GREEN}=== Pre-Deployment Validation Summary ===${NC}"
|
||||
if [ $FAILURES -eq 0 ]; then
|
||||
log "${GREEN}✓ All validation checks passed successfully${NC}"
|
||||
log "Environment is ready for deployment"
|
||||
exit 0
|
||||
else
|
||||
log "${RED}✗ ${FAILURES} validation check(s) failed${NC}"
|
||||
log "Please fix the issues before proceeding with deployment"
|
||||
|
||||
if [ "$CI_MODE" = true ]; then
|
||||
log "CI build failed due to pre-deployment validation failures"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
exit 1
|
||||
fi
|
||||
179
wordpress-dev/bin/verify-selectors.sh
Executable file
179
wordpress-dev/bin/verify-selectors.sh
Executable file
|
|
@ -0,0 +1,179 @@
|
|||
#!/bin/bash
|
||||
# verify-selectors.sh - Script to verify critical selectors before deployment
|
||||
# Usage: ./bin/verify-selectors.sh [--ci] [--fix]
|
||||
|
||||
set -e
|
||||
|
||||
# Colors for output
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[0;33m'
|
||||
RED='\033[0;31m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
# Parse arguments
|
||||
CI_MODE=false
|
||||
FIX_MODE=false
|
||||
|
||||
for arg in "$@"; do
|
||||
case $arg in
|
||||
--ci)
|
||||
CI_MODE=true
|
||||
shift
|
||||
;;
|
||||
--fix)
|
||||
FIX_MODE=true
|
||||
shift
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
echo -e "${GREEN}=== Selector Verification Tool ===${NC}"
|
||||
echo "Checking critical selectors in the HVAC Community Events plugin..."
|
||||
|
||||
# Define critical pages and their selectors to verify
|
||||
declare -A CRITICAL_PAGES
|
||||
CRITICAL_PAGES[login]="/community-login/"
|
||||
CRITICAL_PAGES[dashboard]="/hvac-dashboard/"
|
||||
CRITICAL_PAGES[certificate_report]="/certificates-report/"
|
||||
|
||||
# Check if we're in the right directory
|
||||
if [ ! -d "tests/e2e" ]; then
|
||||
echo -e "${RED}Error: Please run this script from the wordpress-dev directory${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Create screenshots directory if it doesn't exist
|
||||
mkdir -p screenshots/selector-verification
|
||||
|
||||
# Function to verify selectors
|
||||
verify_selectors() {
|
||||
local page_name=$1
|
||||
local page_url=$2
|
||||
|
||||
echo -e "\n${YELLOW}Verifying selectors for: ${page_name}${NC}"
|
||||
|
||||
# Run Playwright test to verify selectors
|
||||
npx playwright test tests/e2e/debug-login-page.spec.ts --config=playwright.config.ts || {
|
||||
echo -e "${RED}Error: Selector verification failed for ${page_name}${NC}"
|
||||
|
||||
if [ "$CI_MODE" = true ]; then
|
||||
echo "CI mode enabled, failing build due to selector verification failure"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ "$FIX_MODE" = true ]; then
|
||||
echo -e "${YELLOW}Fix mode enabled, attempting to auto-fix selectors...${NC}"
|
||||
# Create a debug selector test for this page if it doesn't exist
|
||||
if [ ! -f "tests/e2e/debug-${page_name}-page.spec.ts" ]; then
|
||||
echo "Creating debug test for ${page_name}..."
|
||||
# Template for debug test
|
||||
cat > "tests/e2e/debug-${page_name}-page.spec.ts" << EOF
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { STAGING_URL } from './config/staging-config';
|
||||
|
||||
test('Debug ${page_name} page selectors', async ({ page }) => {
|
||||
console.log('Starting ${page_name} page debug');
|
||||
|
||||
// Navigate to the page
|
||||
await page.goto('${STAGING_URL}${page_url}', { waitUntil: 'networkidle' });
|
||||
console.log(\`Current URL: \${page.url()}\`);
|
||||
|
||||
// Take screenshot
|
||||
await page.screenshot({ path: 'screenshots/selector-verification/${page_name}-page.png' });
|
||||
|
||||
// Dump HTML structure
|
||||
const html = await page.content();
|
||||
console.log('First 500 chars of HTML:');
|
||||
console.log(html.substring(0, 500));
|
||||
|
||||
// Look for form elements
|
||||
const forms = await page.$$('form');
|
||||
console.log(\`Number of forms: \${forms.length}\`);
|
||||
|
||||
// Output all forms
|
||||
for (let i = 0; i < forms.length; i++) {
|
||||
const form = forms[i];
|
||||
const action = await form.evaluate(f => f.getAttribute('action') || 'No action').catch(() => 'Unknown');
|
||||
const method = await form.evaluate(f => f.getAttribute('method') || 'No method').catch(() => 'Unknown');
|
||||
const id = await form.evaluate(f => f.getAttribute('id') || 'No id').catch(() => 'Unknown');
|
||||
const className = await form.evaluate(f => f.getAttribute('class') || 'No class').catch(() => 'Unknown');
|
||||
|
||||
console.log(\`\nForm #\${i+1}:\`);
|
||||
console.log(\` ID: \${id}\`);
|
||||
console.log(\` Class: \${className}\`);
|
||||
console.log(\` Action: \${action}\`);
|
||||
console.log(\` Method: \${method}\`);
|
||||
|
||||
// Get inputs in the form
|
||||
const inputs = await form.$$('input');
|
||||
console.log(\` Inputs: \${inputs.length}\`);
|
||||
|
||||
for (const input of inputs) {
|
||||
const type = await input.evaluate(i => i.getAttribute('type') || 'No type').catch(() => 'Unknown');
|
||||
const name = await input.evaluate(i => i.getAttribute('name') || 'No name').catch(() => 'Unknown');
|
||||
const id = await input.evaluate(i => i.getAttribute('id') || 'No id').catch(() => 'Unknown');
|
||||
console.log(\` Input: Type=\${type}, Name=\${name}, ID=\${id}\`);
|
||||
}
|
||||
}
|
||||
|
||||
// Look for buttons, links and other interactive elements
|
||||
const buttons = await page.$$('button, input[type="button"], input[type="submit"]');
|
||||
console.log(\`\nNumber of buttons: \${buttons.length}\`);
|
||||
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
const button = buttons[i];
|
||||
const id = await button.evaluate(b => b.getAttribute('id') || 'No id').catch(() => 'Unknown');
|
||||
const text = await button.evaluate(b => b.innerText || b.value || 'No text').catch(() => 'Unknown');
|
||||
console.log(\` Button #\${i+1}: ID=\${id}, Text=\${text}\`);
|
||||
}
|
||||
|
||||
console.log('\nDebug complete');
|
||||
});
|
||||
EOF
|
||||
echo "Debug test created. Running the debug test..."
|
||||
npx playwright test "tests/e2e/debug-${page_name}-page.spec.ts" --config=playwright.config.ts
|
||||
fi
|
||||
fi
|
||||
|
||||
return 1
|
||||
}
|
||||
|
||||
echo -e "${GREEN}✓ Selectors verified for ${page_name}${NC}"
|
||||
return 0
|
||||
}
|
||||
|
||||
# Main verification logic
|
||||
FAILURES=0
|
||||
|
||||
# Verify login page selectors first (most critical)
|
||||
if ! verify_selectors "login" "${CRITICAL_PAGES[login]}"; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
# Verify dashboard selectors
|
||||
if ! verify_selectors "dashboard" "${CRITICAL_PAGES[dashboard]}"; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
# Verify certificate report selectors
|
||||
if ! verify_selectors "certificate_report" "${CRITICAL_PAGES[certificate_report]}"; then
|
||||
FAILURES=$((FAILURES + 1))
|
||||
fi
|
||||
|
||||
# Summary
|
||||
echo -e "\n${GREEN}=== Selector Verification Summary ===${NC}"
|
||||
if [ $FAILURES -eq 0 ]; then
|
||||
echo -e "${GREEN}✓ All selectors verified successfully${NC}"
|
||||
exit 0
|
||||
else
|
||||
echo -e "${RED}✗ ${FAILURES} selector verification(s) failed${NC}"
|
||||
echo "Please check the debug test results and update selectors as needed"
|
||||
|
||||
if [ "$CI_MODE" = true ]; then
|
||||
echo "CI build failed due to selector verification failures"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "You can run with --fix to create debug tests for failing pages"
|
||||
exit 1
|
||||
fi
|
||||
|
|
@ -109,8 +109,11 @@ The attendee search feature is tested with multiple patterns:
|
|||
|
||||
4. **Selector Stability**:
|
||||
- Use CSS selectors that are less likely to change
|
||||
- Prefer attribute selectors over positional selectors
|
||||
- Prefer attribute selectors (e.g., `input[name="log"]`) over ID selectors (e.g., `#user_login`)
|
||||
- Use multiple selector strategies for critical elements with fallback mechanisms
|
||||
- Implement robust error detection with multiple selector checks
|
||||
- Centralize selectors in page objects for easier maintenance
|
||||
- Regularly validate selectors with debug tests when UI changes occur
|
||||
|
||||
5. **Descriptive Naming**:
|
||||
- Use clear, descriptive test names
|
||||
|
|
@ -163,3 +166,16 @@ The attendee search feature is tested with multiple patterns:
|
|||
- Enhanced test reporting with more details
|
||||
- Integration with CI/CD systems
|
||||
- Slack/email notifications for test failures
|
||||
|
||||
5. **Selector Resilience**:
|
||||
- Debug scripts to verify selectors before running tests
|
||||
- Regular selector validation as part of CI pipeline
|
||||
- Automated UI change detection with selector recommendations
|
||||
- Selector versioning to handle multiple WordPress theme versions
|
||||
|
||||
6. **Deployment Resilience**:
|
||||
- Pre-deployment validation of critical selectors
|
||||
- Canary deployments with automatic rollback on test failures
|
||||
- Health check scripts for validating WordPress plugin environment
|
||||
- Automated recovery procedures for common failure scenarios
|
||||
- Snapshot testing for detecting unintended UI changes
|
||||
Loading…
Reference in a new issue