Automating Page E2E Testing with Claude Code

Why Automate Page Testing?

How much time do you spend on quality verification after developing a web page? Cross-browser testing, link checking, accessibility validation, SEO checks, image optimization… Manually verifying all these items takes over 30 minutes per page.

The bigger problem is consistency. In a busy schedule, certain items may be missed, or verification standards may vary between team members.

To solve this problem, I built a Page E2E Test Automation System using Claude Code and Playwright.

System Overview

# Automatically verify 8 quality items with a single command
/test-page https://jangwook.net/en/

This single command automatically tests the following items:

Architecture

graph TB
    subgraph CC["Claude Code"]
        CMD["test-page Command"]
        AGT["page-tester Agent"]
        SKL["page-test Skill"]
    end

    subgraph TO["Test Orchestrator"]
        PLAN["Test Planning"]
        EXEC["Parallel Execution"]
        COLLECT["Result Collection"]
    end

    subgraph TM["Test Modules"]
        BROWSER["Browser Test"]
        LINK["Link Validation"]
        A11Y["Accessibility"]
        IMG["Image Optimization"]
        SEO["SEO Validation"]
        MOBILE["Mobile Responsive"]
    end

    subgraph Tools
        PW["Playwright"]
        CDT["Chrome DevTools MCP"]
        AXE["Axe-core"]
    end

    CMD --> AGT --> SKL
    SKL --> PLAN --> EXEC
    EXEC --> BROWSER & LINK & A11Y & IMG & SEO & MOBILE
    BROWSER --> PW
    A11Y --> AXE
    SEO --> CDT

    COLLECT --> RPT["Report Generation"]

The three core components are:

1. Commands (/test-page): User interface
2. Agents (page-tester): Test orchestration
3. Skills (page-test): Reusable test logic

Implementation

1. Define Slash Command

Create the .claude/commands/test-page.md file:

# Page Test Command

Automatically verifies web page quality.

## Usage

```bash
/test-page <url> [options]
```

## Validation Items

1. **Cross-browser Compatibility** (P0)
2. **Link Integrity** (P0)
3. **Accessibility** (P0)
4. **Mobile Responsive** (P0)
5. **Image Optimization** (P1)
6. **SEO Validation** (P1)
...

2. Agent Implementation

The page-tester agent performs the following workflow:

sequenceDiagram
    participant User
    participant Command as test-page
    participant Agent as page-tester
    participant PW as Playwright
    participant CDT as Chrome DevTools

    User->>Command: /test-page URL
    Command->>Agent: Test Request

    Agent->>PW: Start Browser
    PW-->>Agent: Page Load Complete

    par Parallel Tests
        Agent->>PW: Link Validation
        Agent->>CDT: Performance Measurement
        Agent->>PW: Accessibility Check
    end

    Agent-->>User: Result Report

# Page Tester Agent

A specialized agent for comprehensive web page quality testing.

## Role

- Page loading and rendering verification
- Cross-browser compatibility testing
- Accessibility (a11y) inspection
- SEO optimization status check
- Performance metrics collection

## Tools Used

- **Playwright**: Browser automation and screenshots
- **Chrome DevTools MCP**: Performance analysis and network monitoring
- **Axe-core**: Accessibility inspection

## Workflow

1. Receive target URL
2. Start browser instance
3. Execute each test module in parallel
4. Collect and analyze results
5. Generate markdown report

## Output Format

Test results are generated as a markdown report in the following format:
- Total score and grade
- Detailed results by category
- Discovered issues and improvement suggestions
- Screenshot attachments

3. MCP Tool Integration

Combine Chrome DevTools MCP and Playwright to build a powerful testing environment:

// Performance analysis with Chrome DevTools MCP
const performanceResults = await mcp_chrome_devtools_performance_start_trace({
  reload: true,
  autoStop: true
});

// Screenshot and accessibility analysis with Playwright
const snapshot = await mcp_chrome_devtools_take_snapshot();
const screenshot = await mcp_chrome_devtools_take_screenshot({
  fullPage: true
});

Actual Test Results

Here are the actual test results for the https://jangwook.net/en/ page:

Overall Rating: Conditional Pass (75/100 points)

Key Issues Found

1. Image Optimization Issues

hero-image.webp: 600×600px → 382×192px (approximately 75% reduction possible)

Solution:

<img
  srcset="hero-400w.webp 400w, hero-800w.webp 800w"
  sizes="(max-width: 768px) 100vw, 400px"
  src="hero-400w.webp"
  alt="..."
  loading="lazy">

2. Touch Target Size Below Minimum

The WCAG recommended minimum size is 44×44px. The current navigation link height is 36px, which is insufficient.

/* Solution */
a, button {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px;
}

Key Insights

Here are the insights gained from building this automation system:

1. Apply the 80/20 Rule

Don’t try to implement all tests perfectly. Just 6 P0 items can detect 80% of quality issues.

2. Value of AI Analysis

True automation isn’t just saying “the image is large” but suggesting “how to fix it”. This is where Claude’s analytical capabilities shine.

3. Incremental Improvement

You don’t need a perfect system from the start:

Week 1: Basic framework + 3 P0 tests
Week 2: Complete P0 + console reporter
Week 3: P1 tests + HTML report
Week 4: AI analysis + improvement suggestions

4. Report Utilization

The generated markdown reports can be:

• Used as team review materials
• Automatically archived to Notion
• Shared via Slack notifications
• Integrated into CI/CD pipelines

Extensibility

This system can be extended in various directions:

graph LR
    subgraph Current["Current Implementation"]
        CORE["Page Test Core"]
    end

    subgraph Extension["Extension Options"]
        VRT["Visual Regression Testing"]
        CICD["CI/CD Integration"]
        MULTI["Multi-language Validation"]
        PERF["Performance Tracking"]
    end

    CORE --> VRT
    CORE --> CICD
    CORE --> MULTI
    CORE --> PERF

• Visual Regression Testing: Detect UI changes through screenshot comparison
• CI/CD Integration: Automatic test execution on every PR
• Multi-language Content Validation: Check for translation gaps, language consistency
• Time-series Performance Tracking: Core Web Vitals history monitoring

Conclusion

Page E2E test automation with Claude Code provides value beyond simple time savings:

1. Consistent quality standards applied
2. Immediate feedback for quick improvements
3. AI-powered insights for better decision-making
4. Documented quality history accumulated

Try applying this system to your next project. While initial setup takes time, it can improve both team productivity and website quality in the long run.

References

• Playwright Official Documentation
• WCAG 2.1 Guidelines
• Core Web Vitals
• Axe-core Accessibility Testing