Website Review Workflow

This skill enables comprehensive QA workflows for Planted web properties using Chrome DevTools MCP integration.

Prerequisites

1. Chrome Debug Mode Running

   # Start Chrome with debug port (run once per session)
   scripts\chrome-debug.bat
   

2. MCP Server Connected

   • Verify with /mcp command - look for chrome-devtools server
   • If not connected, restart Claude Code (MCP servers load on startup)

3. For Production Auth Sites

   • Login to admin.planted.com in the debug Chrome window first
   • Auth state persists in %USERPROFILE%\.chrome-debug-profile

Target Sites

Workflow Overview

+---------------------+     +---------------------+     +---------------------+
|  1. NAVIGATE &      |---->|  2. VISUAL          |---->|  3. CONSOLE/NETWORK |
|     SCREENSHOT      |     |     INSPECTION      |     |     ERROR CHECK     |
+---------------------+     +---------------------+     +---------------------+
                                                                  |
+---------------------+     +---------------------+               |
|  6. GENERATE        |<----|  5. INTERACTIVE     |<--------------+
|     REPORT          |     |     TESTING         |               |
+---------------------+     +---------------------+               |
                                   ^                              |
                                   |            +-----------------+
                                   |            |
                            +------+------------v--+
                            |  4. ACCESSIBILITY &  |
                            |     PERFORMANCE      |
                            +----------------------+

Phase 1: Navigate and Screenshot

Goal: Capture initial page state across viewports

MCP Tools:

• navigate_page(url) - Navigate to target URL
• resize_page(width, height) - Set viewport size
• take_screenshot() - Capture visual state
• wait_for(selector, timeout) - Wait for page load

Viewport Sizes:

• Desktop: 1440x900
• Tablet: 768x1024
• Mobile: 375x812

Example Workflow:

1. Navigate to URL
2. Wait for main content selector
3. Screenshot desktop viewport
4. Resize to tablet, screenshot
5. Resize to mobile, screenshot

Phase 2: Visual Inspection

Goal: Analyze visual state and DOM structure

MCP Tools:

• take_snapshot() - Capture DOM snapshot (accessibility tree)
• evaluate_script(script) - Run DOM queries

Checks:

• Layout renders correctly
• Images load (no broken images)
• Fonts load correctly
• No overlapping elements
• Responsive breakpoints work

Phase 3: Console and Network Error Check

Goal: Detect JavaScript errors and failed requests

MCP Tools:

• list_console_messages() - Get all console output
• get_console_message(id) - Get specific message details
• list_network_requests() - Get all network activity
• get_network_request(id) - Get request/response details

Error Categories:

• Critical: JavaScript exceptions, failed API calls (4xx/5xx)
• Warning: Console warnings, slow requests (>3s)
• Info: Deprecation notices, third-party issues

Phase 4: Accessibility and Performance

Accessibility (WCAG 2.1 AA)

Automated Checks via evaluate_script:

// Check for missing alt text
document.querySelectorAll('img:not([alt])').length

// Check for form labels
document.querySelectorAll('input:not([aria-label]):not([id])').length

// Check for heading hierarchy
Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6')).map(h => h.tagName)

Manual Checks:

• Keyboard navigation works (Tab through page)
• Focus states visible
• Screen reader landmarks present
• Touch targets >= 44px

Performance (Core Web Vitals)

MCP Tools:

• performance_start_trace() - Begin recording
• performance_stop_trace() - End recording
• performance_analyze_insight() - Get analysis

Metrics to Check:

• LCP (Largest Contentful Paint): < 2.5s good, < 4s needs improvement
• INP (Interaction to Next Paint): < 200ms good, < 500ms needs improvement
• CLS (Cumulative Layout Shift): < 0.1 good, < 0.25 needs improvement

Phase 5: Interactive Testing

Goal: Verify interactive elements work correctly

MCP Tools:

• click(selector) - Click element
• fill(selector, value) - Fill input
• fill_form(fields) - Fill multiple form fields
• press_key(key) - Keyboard input
• hover(selector) - Hover state
• handle_dialog(action) - Handle alerts/confirms

Test Scenarios:

• Navigation links work
• Form submission works
• Buttons trigger expected actions
• Modal dialogs open/close
• Dropdowns/selects function

Phase 6: Generate Report

Use TEST-REPORT-TEMPLATE.md to create structured report including:

• Screenshots at each viewport
• Console errors found
• Network issues found
• Accessibility issues
• Performance metrics
• Interactive test results
• Overall pass/fail status

Quick Commands

# Start local Astro dev server
cd planted-astro && pnpm dev

# Start Admin Dashboard dev server
cd planted-availability-db/packages/admin-dashboard-v2 && pnpm dev

# Start Chrome in debug mode
scripts\chrome-debug.bat

MCP Tools Reference (26 Total)

Input Automation

Navigation

Emulation

Performance

Network

Debugging

Reference Documents

• TESTING-MANUAL.md - Detailed test cases for each page type
• TEST-REPORT-TEMPLATE.md - Report format
• AUTH-SETUP.md - Production authentication setup
• .claude/skills/design-brand/SKILL.md - Visual design reference