Playwright Tab Comparison

Open multiple browser tabs and systematically compare content, behavior, or visual appearance across pages.

Quick Start

User: "Compare the staging and production checkout pages"

Workflow:
1. Create/list tabs
2. Navigate tab 1 to staging URL
3. Navigate tab 2 to production URL
4. For each tab: capture snapshot + screenshot + extract data
5. Generate comparison report

When to Use This Skill

Explicit triggers:

"Compare these pages"
"Open multiple tabs and compare"
"Test cross-browser consistency"
"A/B test these variants"
"Compare staging vs production"

Implicit triggers:

User provides multiple URLs to analyze
Testing consistency across environments
Verifying content parity
Evaluating page variants

Use cases:

A/B testing different landing page designs
Comparing staging vs production environments
Cross-browser consistency validation
Multi-variant feature testing
Content parity verification
Performance comparison

Core Workflow

Step 1: Tab Setup

List existing tabs:

browser_tabs(action="list")

Create additional tabs:

# Create new tab
browser_tabs(action="new")

# Switch to specific tab (0-indexed)
browser_tabs(action="select", index=1)

Step 2: Navigate Each Tab

Navigate each tab to its target URL:

# Tab 1: Production
browser_tabs(action="select", index=0)
browser_navigate(url="https://example.com/checkout")

# Tab 2: Staging
browser_tabs(action="select", index=1)
browser_navigate(url="https://staging.example.com/checkout")

# Tab 3: Variant A
browser_tabs(action="select", index=2)
browser_navigate(url="https://example.com/checkout?variant=a")

Step 3: Capture Data from Each Tab

For each tab, collect comparison data:

a) Capture accessibility snapshot:

browser_snapshot(filename="tab1-snapshot.md")

b) Take screenshot:

browser_take_screenshot(filename="tab1-screenshot.png", fullPage=True)

c) Extract structured data:

browser_evaluate(function="""
() => {
    return {
        title: document.title,
        url: window.location.href,
        headingCount: document.querySelectorAll('h1, h2, h3').length,
        buttonCount: document.querySelectorAll('button').length,
        formCount: document.querySelectorAll('form').length,
        // Custom extraction logic
        productPrice: document.querySelector('.price')?.textContent,
        ctaText: document.querySelector('.cta-button')?.textContent
    };
}
""")

d) Capture network activity (optional):

browser_network_requests()

Step 4: Structure Tab Data

Organize captured data into JSON for comparison:

[
    {
        "tab_index": 0,
        "url": "https://example.com/checkout",
        "snapshot": "tab1-snapshot.md",
        "screenshot": "tab1-screenshot.png",
        "data": {
            "title": "Checkout - Example",
            "headingCount": 5,
            "productPrice": "$49.99"
        },
        "timestamp": "2025-12-20T10:30:00Z"
    },
    {
        "tab_index": 1,
        "url": "https://staging.example.com/checkout",
        "snapshot": "tab2-snapshot.md",
        "screenshot": "tab2-screenshot.png",
        "data": {
            "title": "Checkout - Staging",
            "headingCount": 6,
            "productPrice": "$49.99"
        },
        "timestamp": "2025-12-20T10:30:15Z"
    }
]

Save to tab-data.json.

Step 5: Compare Results

Option A: Use comparison script

python scripts/compare_tabs.py tab-data.json

Outputs:

Text summary of differences
JSON comparison file

Option B: Manual comparison

Compare key metrics:

Element counts (headings, buttons, forms)
Extracted data values (prices, CTA text)
Visual appearance (review screenshots side-by-side)
Network patterns (request counts, API endpoints)

Step 6: Generate Report

Create HTML report with side-by-side comparison:

python scripts/generate_comparison_report.py tab-data.json comparison-report.html

Open comparison-report.html in browser to view:

Screenshots side-by-side
Extracted data comparison
Element count statistics

Comparison Strategies

Choose strategy based on what you're testing:

Visual Comparison - Screenshots for design consistency Content Comparison - Snapshots for structure/content parity Behavioral Comparison - Network requests for functionality testing Performance Comparison - Network timing for optimization Data Extraction Comparison - Evaluate for structured data validation

See references/comparison-strategies.md for detailed guidance.

Example: Staging vs Production

# 1. Setup tabs
browser_tabs(action="list")  # Check existing
browser_tabs(action="new")   # Create second tab

# 2. Navigate tabs
browser_tabs(action="select", index=0)
browser_navigate(url="https://example.com/products")

browser_tabs(action="select", index=1)
browser_navigate(url="https://staging.example.com/products")

# 3. Collect data from both tabs
tabs_data = []

for i in [0, 1]:
    browser_tabs(action="select", index=i)

    # Snapshot
    browser_snapshot(filename=f"tab{i}-snapshot.md")

    # Screenshot
    browser_take_screenshot(filename=f"tab{i}-screenshot.png", fullPage=True)

    # Extract data
    result = browser_evaluate(function="""
    () => ({
        url: window.location.href,
        productCount: document.querySelectorAll('.product-card').length,
        categories: Array.from(document.querySelectorAll('.category')).map(c => c.textContent)
    })
    """)

    tabs_data.append({
        "tab_index": i,
        "snapshot": f"tab{i}-snapshot.md",
        "screenshot": f"tab{i}-screenshot.png",
        "data": result
    })

# Save for comparison
import json
with open('tab-data.json', 'w') as f:
    json.dump(tabs_data, f, indent=2)

# 4. Generate report
# Run: python scripts/generate_comparison_report.py tab-data.json report.html

Resources

scripts/

compare_tabs.py - Analyzes tab data and generates comparison summary

Input: tab-data.json (structured tab data)
Output: Text summary + JSON comparison file
Compares element counts, identifies differences

generate_comparison_report.py - Creates HTML visual comparison report

Input: tab-data.json + assets/report-template.html
Output: HTML file with side-by-side screenshots and data
Embeds screenshots as base64

references/

mcp-playwright-tools.md - Quick reference for Playwright MCP tools used in this workflow (browser_tabs, browser_navigate, browser_snapshot, browser_evaluate, browser_take_screenshot)

comparison-strategies.md - Detailed guide for choosing comparison approach (visual, content, behavioral, performance, data extraction, hybrid)

assets/

report-template.html - HTML template for comparison reports with responsive grid layout and embedded styling

Expected Outcomes

Successful comparison:

Multiple tabs opened and navigated
Data captured from each tab (snapshots, screenshots, extracted data)
Differences identified and documented
HTML report generated showing side-by-side comparison

Common differences to identify:

Element count variations
Content changes (text, prices, CTAs)
Visual appearance differences
Network request patterns
Performance metrics

Requirements

Tools:

Playwright MCP browser automation
Python 3.x for scripts
Browser with tab support

Data structure:

tab-data.json with consistent schema
Screenshots saved to accessible paths
Snapshots saved as markdown files

Red Flags to Avoid

Opening too many tabs (>5) without cleanup
Not waiting for page load before capturing data
Inconsistent viewport sizes across tabs (affects visual comparison)
Not saving tab data before closing tabs
Forgetting to switch tabs before navigation/capture
Comparing pages in different states (e.g., logged in vs logged out)
Not handling dynamic content (timers, ads, animations)

Notes

Tab indices are 0-based (first tab = 0)
Always select tab before performing actions on it
Screenshots capture current viewport unless fullPage=True
Snapshots provide accessibility tree (better for content analysis)
Evaluate runs JavaScript in tab context (has access to document/window)
Network requests captured from page load onwards
Reports embed screenshots as base64 (no external dependencies)