Website Review Workflow

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

Prerequisites

1. •

   Chrome Debug Mode Running

   bash

   # 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