playwright-visual-testing

仓库: manutej/luxor-claude-marketplace
安装量: 279
排名: #3217

安装

npx skills add https://github.com/manutej/luxor-claude-marketplace --skill playwright-visual-testing

Playwright Visual Testing & Browser Automation

A comprehensive skill for browser automation and visual testing using Playwright MCP server integration. This skill enables rapid UI testing, visual regression detection, automated browser interactions, and cross-browser validation for modern web applications.

When to Use This Skill

Use this skill when:

Testing web applications across multiple browsers (Chromium, Firefox, WebKit) Implementing visual regression testing for UI changes Automating user interactions for QA and testing Validating responsive designs across different viewports Taking screenshots for documentation or bug reports Testing form submissions and user workflows Verifying accessibility of web interfaces Debugging browser-specific issues Creating automated E2E test suites Validating web applications before deployment Testing PWAs and single-page applications Capturing visual states for design reviews Core Concepts Playwright Browser Automation Philosophy

Playwright provides reliable end-to-end testing for modern web apps:

Auto-wait: Automatically waits for elements to be actionable before interacting Web-first assertions: Retry assertions until they pass or timeout Cross-browser: Test on Chromium, Firefox, and WebKit with single API Accessibility snapshots: Navigate pages using semantic structure, not visual rendering Visual testing: Compare screenshots to detect visual regressions Network control: Intercept and mock network requests Multi-context: Test multiple scenarios in isolated browser contexts Key Playwright Entities Browser: The browser instance (Chromium, Firefox, WebKit) Page: A single page/tab in the browser Locator: Element selector using accessibility tree Snapshot: Accessibility tree representation of page state Screenshot: Visual capture of page or element Network Request: HTTP requests made by the page Console Messages: Browser console output Dialog: Browser prompts, alerts, confirms Visual Testing Workflow Navigate to the target page Wait for page to stabilize (animations, loading) Capture accessibility snapshot for context Take screenshot of page or specific elements Compare against baseline (optional) Validate visual appearance and functionality Document results and issues Playwright MCP Server Tools Reference Browser Lifecycle Management browser_navigate

Navigate to a URL in the current page.

Parameters:

url: The URL to navigate to (required)

Example:

url: "https://example.com"

Best Practices:

Use full URLs including protocol (https://) Wait for navigation to complete before taking actions Handle redirects and page transitions browser_navigate_back

Navigate back to the previous page in history.

Parameters: None

Example:

// Navigate back after clicking a link

Use Cases:

Testing navigation flows Verifying back button behavior Multi-step form navigation browser_close

Close the current browser page.

Parameters: None

When to Use:

Clean up after testing Free system resources Reset browser state browser_resize

Resize the browser viewport.

Parameters:

width: Width in pixels (required) height: Height in pixels (required)

Common Viewports:

// Mobile width: 375, height: 667 // iPhone SE width: 414, height: 896 // iPhone XR

// Tablet width: 768, height: 1024 // iPad

// Desktop width: 1280, height: 720 // HD width: 1920, height: 1080 // Full HD

Example:

width: 375 height: 667

Page Inspection & Snapshots browser_snapshot

Capture accessibility snapshot of the current page.

Parameters: None

Returns:

Accessibility tree with semantic structure Element references (ref) for interactions Text content and roles Interactive elements and states

Why Use Snapshots:

Better than screenshots for automation Semantic understanding of page structure Element references for precise interactions Faster than visual parsing Works without visual rendering

Example Snapshot Structure:

heading "Welcome" [ref=123] text "to our site" button "Sign In" [ref=456] textbox "Email" [ref=789] value: ""

browser_take_screenshot

Take a screenshot of the current page or element.

Parameters:

filename: Output filename (optional, defaults to page-{timestamp}.png) type: Image format - "png" or "jpeg" (default: png) fullPage: Capture full scrollable page (default: false) element: Human-readable element description (optional) ref: Element reference from snapshot (optional, requires element)

Screenshot Types:

Viewport Screenshot (default): filename: "homepage-viewport.png"

Full Page Screenshot: filename: "homepage-full.png" fullPage: true

Element Screenshot: filename: "header.png" element: "main header navigation" ref: "123"

Best Practices:

Use descriptive filenames with context PNG for UI elements (lossless) JPEG for photos/images (smaller size) Full page for documentation Element screenshots for focused testing Browser Interaction browser_click

Perform click on an element.

Parameters:

element: Human-readable element description (required) ref: Element reference from snapshot (required) button: "left", "right", or "middle" (default: left) doubleClick: true for double-click (default: false) modifiers: Array of modifier keys ["Alt", "Control", "ControlOrMeta", "Meta", "Shift"]

Examples:

Basic Click: element: "Submit button" ref: "456"

Right Click: element: "Context menu trigger" ref: "789" button: "right"

Click with Modifier: element: "Link to open in new tab" ref: "123" modifiers: ["ControlOrMeta"]

Double Click: element: "Word to select" ref: "321" doubleClick: true

browser_type

Type text into an editable element.

Parameters:

element: Human-readable element description (required) ref: Element reference from snapshot (required) text: Text to type (required) slowly: Type one character at a time (default: false) submit: Press Enter after typing (default: false)

Examples:

Form Input: element: "Email textbox" ref: "123" text: "user@example.com"

Search with Submit: element: "Search field" ref: "456" text: "playwright testing" submit: true

Character-by-Character (triggers key handlers): element: "Auto-complete input" ref: "789" text: "New York" slowly: true

browser_press_key

Press a keyboard key.

Parameters:

key: Key name or character (required)

Common Keys:

ArrowLeft, ArrowRight, ArrowUp, ArrowDown Enter, Escape, Tab, Backspace, Delete Home, End, PageUp, PageDown F1-F12 Control, Alt, Shift, Meta

Examples:

// Navigation key: "ArrowDown"

// Submit form key: "Enter"

// Close dialog key: "Escape"

// Tab through fields key: "Tab"

browser_fill_form

Fill multiple form fields at once.

Parameters:

fields: Array of field objects (required) - name: Human-readable field name - type: "textbox", "checkbox", "radio", "combobox", "slider" - ref: Element reference from snapshot - value: Value to set (string, "true"/"false" for checkboxes)

Example:

fields: [ { name: "Username", type: "textbox", ref: "123", value: "john_doe" }, { name: "Password", type: "textbox", ref: "456", value: "secretpass123" }, { name: "Remember me", type: "checkbox", ref: "789", value: "true" } ]

browser_select_option

Select option from dropdown.

Parameters:

element: Human-readable element description (required) ref: Element reference from snapshot (required) values: Array of values to select (required)

Example:

element: "Country dropdown" ref: "123" values: ["United States"]

Multi-select:

element: "Programming languages" ref: "456" values: ["JavaScript", "Python", "Go"]

browser_hover

Hover over an element.

Parameters:

element: Human-readable element description (required) ref: Element reference from snapshot (required)

Use Cases:

Trigger tooltips Show dropdown menus Test hover states Reveal hidden elements

Example:

element: "Help icon" ref: "123"

browser_drag

Drag and drop between elements.

Parameters:

startElement: Source element description (required) startRef: Source element reference (required) endElement: Target element description (required) endRef: Target element reference (required)

Example:

startElement: "Task card" startRef: "123" endElement: "Done column" endRef: "456"

Use Cases:

Drag-and-drop interfaces Reordering lists File uploads Kanban boards Advanced Interactions browser_evaluate

Execute JavaScript in page context.

Parameters:

function: JavaScript function as string (required) element: Element description (optional) ref: Element reference (optional, requires element)

Examples:

Page-level Script: function: "() => { return document.title; }"

Element-level Script: element: "Custom widget" ref: "123" function: "(element) => { return element.getAttribute('data-value'); }"

Common Use Cases:

// Get page title function: "() => document.title"

// Scroll to bottom function: "() => window.scrollTo(0, document.body.scrollHeight)"

// Get element dimensions function: "(element) => { const rect = element.getBoundingClientRect(); return { width: rect.width, height: rect.height }; }"

// Set local storage function: "() => localStorage.setItem('theme', 'dark')"

// Get computed style function: "(element) => getComputedStyle(element).backgroundColor"

browser_file_upload

Upload files to file input.

Parameters:

paths: Array of absolute file paths (required) - Omit or pass empty array to cancel file chooser

Example:

paths: [ "/Users/user/Documents/resume.pdf", "/Users/user/Photos/headshot.jpg" ]

Single File:

paths: ["/Users/user/Downloads/report.csv"]

Cancel Upload:

paths: []

Browser State & Debugging browser_console_messages

Get console messages from the browser.

Parameters:

onlyErrors: Return only error messages (default: false)

Returns:

All console.log, console.error, console.warn messages Timestamps and message types JavaScript errors and stack traces

Examples:

All Messages: onlyErrors: false

Errors Only: onlyErrors: true

Use Cases:

Debug JavaScript errors Monitor API failures Track console warnings Verify logging behavior browser_network_requests

Get all network requests since page load.

Parameters: None

Returns:

URL, method, status code Request/response headers Timing information Request/response bodies

Use Cases:

Verify API calls Check resource loading Debug failed requests Monitor performance Validate analytics tracking browser_handle_dialog

Respond to browser dialogs.

Parameters:

accept: Accept or dismiss dialog (required) promptText: Text for prompt dialogs (optional)

Dialog Types:

alert: Information message confirm: Yes/No choice prompt: Text input request beforeunload: Page navigation warning

Examples:

Accept Alert: accept: true

Dismiss Confirm: accept: false

Answer Prompt: accept: true promptText: "John Doe"

browser_wait_for

Wait for conditions before proceeding.

Parameters:

text: Wait for text to appear (optional) textGone: Wait for text to disappear (optional) time: Wait for specified seconds (optional)

Examples:

Wait for Text: text: "Loading complete"

Wait for Removal: textGone: "Loading..."

Fixed Wait: time: 2

Best Practices:

Prefer waiting for specific conditions over fixed time Use for dynamic content loading Wait for animations to complete Ensure page stability before screenshots Tab Management browser_tabs

Manage browser tabs.

Parameters:

action: "list", "new", "close", "select" (required) index: Tab index for close/select (optional)

Actions:

List Tabs: action: "list"

New Tab: action: "new"

Close Tab: action: "close" index: 1 // Optional, closes current if omitted

Switch Tab: action: "select" index: 0

Use Cases:

Multi-tab workflows Testing tab-specific features Opening links in new tabs Managing multiple sessions Browser Installation browser_install

Install the browser specified in config.

Parameters: None

When to Use:

First-time setup "Browser not installed" errors Updating browser version CI/CD environment setup Visual Testing Workflow Patterns Pattern 1: Basic Visual Regression Test

Scenario: Verify homepage hasn't changed visually

  1. Navigate to page
  2. Use browser_navigate with target URL

  3. Wait for page to load completely

  4. Capture baseline

  5. Take full-page screenshot
  6. Use browser_snapshot for context

  7. Document visible elements

  8. Make changes (if testing changes)

  9. Update code, deploy

  10. Clear cache

  11. Capture new state

  12. Navigate to same URL
  13. Take identical screenshot

  14. Compare manually or with tools

  15. Validate differences

  16. Expected changes present
  17. No unexpected regressions
  18. Document findings

Pattern 2: Responsive Design Testing

Scenario: Test layout across devices

  1. Define viewports
  2. Mobile: 375x667 (iPhone SE)
  3. Tablet: 768x1024 (iPad)

  4. Desktop: 1920x1080 (Full HD)

  5. For each viewport: a. Resize browser

    • browser_resize with dimensions

b. Navigate to page - browser_navigate to URL

c. Wait for layout - browser_wait_for with condition

d. Capture snapshot - browser_snapshot for structure

e. Take screenshot - browser_take_screenshot with descriptive name - Include viewport in filename

  1. Compare layouts
  2. Verify responsive breakpoints
  3. Check element reflow
  4. Validate mobile navigation

  5. Ensure content accessibility

  6. Document issues

  7. Screenshot any problems
  8. Note viewport where issue occurs
  9. Record expected vs actual behavior

Pattern 3: Form Testing Workflow

Scenario: Test multi-step form submission

  1. Navigate to form
  2. browser_navigate to form URL

  3. browser_snapshot to get field refs

  4. Fill form fields

  5. Use browser_fill_form for batch entry
  6. Or individual browser_type for each field

  7. Include validation triggers

  8. Test validation

  9. Submit with invalid data
  10. browser_snapshot to see errors
  11. Screenshot error states

  12. Verify error messages appear

  13. Complete valid submission

  14. Fill all required fields
  15. browser_click submit button
  16. Wait for success message

  17. browser_wait_for confirmation text

  18. Verify results

  19. Check success page
  20. Verify data submission
  21. Screenshot confirmation
  22. Check network requests

Pattern 4: Element-Specific Visual Testing

Scenario: Test individual component changes

  1. Navigate to component page
  2. browser_navigate to page

  3. browser_snapshot for structure

  4. Locate component

  5. Find element ref from snapshot

  6. Verify component is visible

  7. Test states a. Default state

    • Take element screenshot
    • Document initial appearance

b. Hover state - browser_hover on element - Take element screenshot - Compare with default

c. Active/focused state - browser_click on element - Take element screenshot - Verify visual feedback

d. Error state (if applicable) - Trigger validation error - Take element screenshot - Verify error styling

  1. Document state changes
  2. Compare screenshots
  3. Note expected behaviors
  4. Report any issues

Pattern 5: Cross-Browser Testing

Scenario: Verify consistency across browsers

  1. Define browser matrix
  2. Chromium (Chrome/Edge)
  3. Firefox

  4. WebKit (Safari)

  5. For each browser: a. Configure browser

    • Set in MCP server config

b. Run test suite - Navigate to pages - Capture snapshots - Take screenshots - Test interactions

c. Document results - Save browser-specific screenshots - Note rendering differences - Log browser-specific bugs

  1. Compare results
  2. Side-by-side screenshots
  3. Functionality differences
  4. Performance variations

  5. CSS rendering issues

  6. Address discrepancies

  7. Fix critical cross-browser bugs
  8. Document acceptable differences
  9. Add browser-specific styles if needed

Pattern 6: E2E User Journey Testing

Scenario: Complete user workflow validation

  1. Start journey
  2. browser_navigate to landing page
  3. browser_snapshot initial state

  4. Screenshot starting point

  5. Authentication

  6. Navigate to login
  7. Fill credentials with browser_fill_form
  8. Submit form
  9. Wait for redirect

  10. Screenshot logged-in state

  11. Main workflow steps For each step:

  12. Take snapshot before action
  13. Perform user action
  14. Wait for completion
  15. Take screenshot after action

  16. Verify expected state

  17. Complete transaction

  18. Submit final action
  19. Wait for confirmation
  20. Screenshot success state

  21. Verify completion message

  22. Cleanup

  23. Logout if needed
  24. Screenshot final state
  25. Document journey results

Pattern 7: Accessibility Snapshot Testing

Scenario: Verify semantic structure and accessibility

  1. Navigate to page

  2. browser_navigate to URL

  3. Capture accessibility snapshot

  4. browser_snapshot for semantic tree
  5. Review element roles
  6. Check heading hierarchy

  7. Verify labels and descriptions

  8. Validate structure

  9. Proper heading levels (h1 → h2 → h3)
  10. Form inputs have labels
  11. Buttons have accessible names
  12. Interactive elements have roles

  13. ARIA attributes present

  14. Test keyboard navigation

  15. browser_press_key "Tab"
  16. Snapshot after each tab
  17. Verify focus indicators
  18. Ensure logical tab order

  19. Test skip links

  20. Test screen reader experience

  21. Review snapshot text content
  22. Verify alt text present
  23. Check ARIA live regions
  24. Validate semantic landmarks

  25. Ensure meaningful structure

  26. Document findings

  27. Screenshot accessibility tree
  28. Note missing labels
  29. Report hierarchy issues
  30. Suggest improvements

Browser Automation Best Practices Screenshot Best Practices Consistent Naming Convention {page}-{viewport}-{state}-{timestamp}.png

Examples: homepage-desktop-default-1634567890.png login-mobile-error-1634567891.png checkout-tablet-success-1634567892.png

Filename Organization screenshots/ ├── baselines/ │ ├── homepage-desktop.png │ ├── homepage-mobile.png │ └── homepage-tablet.png ├── current/ │ └── homepage-desktop-20251017.png └── diffs/ └── homepage-desktop-diff-20251017.png

Full Page vs Viewport Use full page for documentation Use viewport for regression testing Element screenshots for components Consider page length for full-page captures Image Format Selection PNG: UI elements, text, sharp edges (lossless) JPEG: Photos, backgrounds, large images (smaller size) Use PNG by default for testing Snapshot vs Screenshot Strategy

Use Snapshots When:

Automating interactions Testing functionality Verifying structure Checking accessibility Need element references Testing dynamic content

Use Screenshots When:

Visual regression testing Documentation Bug reports Design reviews Stakeholder presentations Visual comparisons

Use Both When:

Comprehensive testing Debugging visual issues Creating test reports Documenting complex flows Waiting Strategies Wait for Specific Elements // Good browser_wait_for with text: "Data loaded"

// Avoid browser_wait_for with time: 5

Wait for Animations // Wait for loading spinner to disappear browser_wait_for with textGone: "Loading..."

Wait for Network Idle // Check network requests after waiting browser_network_requests to verify completion

Dynamic Content // Wait for specific text before screenshot browser_wait_for with text: "Results: 42 items"

Interaction Reliability Always Use Snapshots First 1. browser_snapshot 2. Find element ref in snapshot 3. Use ref for interaction 4. Never guess element references

Verify Element State // Take snapshot to verify element exists // Check element is visible and actionable // Then perform interaction

Handle Dynamic Elements // Wait for element to appear browser_wait_for with text: "Submit" // Then take fresh snapshot browser_snapshot // Get updated ref and interact

Error Recovery // If interaction fails: 1. Take screenshot of current state 2. Capture console messages (browser_console_messages) 3. Check network requests (browser_network_requests) 4. Take new snapshot to see current state

Form Testing Strategy Batch vs Individual Entry // Batch for simple forms (faster) browser_fill_form with all fields

// Individual for complex forms (better control) browser_type for each field browser_wait_for after each entry Verify validation triggers

Validation Testing // Test each validation rule 1. Enter invalid data 2. Attempt submission 3. Snapshot to see errors 4. Screenshot error messages 5. Correct data 6. Verify error clears

Multi-Step Forms // Document each step 1. Fill step 1 2. Screenshot before submit 3. Click next 4. Wait for step 2 5. Snapshot new state 6. Repeat for each step

Network Monitoring Track API Calls // After user action browser_network_requests // Verify expected endpoints called // Check status codes // Validate request/response data

Performance Testing // Capture network timing browser_network_requests // Analyze: - Request count - Total transfer size - Response times - Failed requests

Debug Failed Requests browser_network_requests // Find failed requests // Check error messages // Screenshot current state // Console messages for errors

Development Acceleration Strategies Strategy 1: Test Template Creation

Create reusable test patterns:

Visual Regression Test Template: 1. Navigate: browser_navigate to {URL} 2. Wait: browser_wait_for for {condition} 3. Baseline: browser_take_screenshot "baseline-{name}.png", fullPage: true 4. [Make changes] 5. Capture: browser_take_screenshot "current-{name}.png", fullPage: true 6. Compare: [Manual or automated comparison] 7. Document: Screenshot any differences

Responsive Test Template: For viewport in [mobile, tablet, desktop]: 1. Resize: browser_resize to {viewport dimensions} 2. Navigate: browser_navigate to {URL} 3. Wait: browser_wait_for for stability 4. Snapshot: browser_snapshot 5. Screenshot: browser_take_screenshot "{page}-{viewport}.png" 6. Validate: Check layout integrity

Form Test Template: 1. Navigate: browser_navigate to {form URL} 2. Snapshot: browser_snapshot for refs 3. Fill: browser_fill_form with test data 4. Screenshot: "form-filled.png" 5. Submit: browser_click submit button 6. Wait: browser_wait_for for result 7. Verify: Snapshot and screenshot result 8. Check: browser_network_requests for submission

Strategy 2: Automated Screenshot Organization

Organize screenshots systematically:

Project Structure: tests/ visual/ baselines/ # Reference screenshots results/ # Current test screenshots diffs/ # Difference images reports/ # HTML reports with comparisons

Naming Convention: {test-name}{viewport}.png}_{date

Examples: login_desktop_default_20251017.png cart_mobile_empty_20251017.png checkout_tablet_error_20251017.png

Metadata File: screenshot-metadata.json: { "screenshot": "login_desktop_default_20251017.png", "timestamp": "2025-10-17T10:30:00Z", "url": "https://example.com/login", "viewport": {"width": 1920, "height": 1080}, "browser": "chromium", "test": "login_flow", "passed": true }

Strategy 3: Parallel Multi-Browser Testing

Test across browsers efficiently:

Browser Matrix: - Chromium (latest) - Firefox (latest) - WebKit (latest)

Parallel Execution: 1. Define test suite 2. Configure each browser 3. Run tests in parallel 4. Collect results 5. Compare across browsers 6. Generate cross-browser report

Result Organization: screenshots/ chromium/ homepage.png login.png firefox/ homepage.png login.png webkit/ homepage.png login.png comparison/ homepage-browsers.html login-browsers.html

Strategy 4: Visual Regression Automation

Automate visual comparison workflow:

  1. Capture Baselines (one-time):
  2. Navigate to each page
  3. Take reference screenshots

  4. Store in baselines/

  5. Run Visual Tests:

  6. Navigate to each page
  7. Take current screenshots

  8. Store in results/

  9. Compare Images:

  10. Pixel-by-pixel comparison
  11. Highlight differences
  12. Generate diff images

  13. Calculate similarity score

  14. Generate Report:

  15. List all comparisons
  16. Show side-by-side views
  17. Highlight failures

  18. Include metrics

  19. Review and Update:

  20. Review failures
  21. Accept intentional changes
  22. Update baselines
  23. Fix regressions

Strategy 5: Component Library Testing

Test design system components:

Component Test Suite: For each component: 1. Navigate to component page 2. Snapshot for structure 3. Test each variant: - Default - Hover - Active - Disabled - Error 4. Screenshot each state 5. Verify accessibility 6. Check responsive behavior

Documentation Generation: 1. Capture all component states 2. Organize by component 3. Generate visual catalog 4. Include code examples 5. Document usage guidelines

Example: components/ Button/ button-default.png button-hover.png button-active.png button-disabled.png button-error.png Input/ input-default.png input-focus.png input-error.png input-disabled.png

Troubleshooting Common Issues

Screenshot appears blank

Wait for page to load: browser_wait_for Check if element is visible: browser_snapshot Ensure page has rendered: Add delay Verify URL is correct

Element not found for interaction

Take fresh snapshot: browser_snapshot Check element ref is current Wait for element to appear: browser_wait_for Verify element exists in snapshot

Browser not launching

Run browser_install Check MCP server configuration Verify browser binary path Check system permissions

Screenshot differs from expected

Check viewport size: browser_resize Wait for animations: browser_wait_for Ensure font loading complete Disable dynamic content (timestamps, ads)

Form submission fails

Verify all required fields filled Check validation errors: browser_snapshot Wait for submit button to be enabled Check console for JavaScript errors: browser_console_messages

Network requests not captured

Call browser_network_requests after action Ensure page has completed requests Check for request failures Verify request timing

Dialog not handled

Set up browser_handle_dialog before triggering Accept or dismiss appropriately Provide promptText for prompt dialogs Test dialog in advance Debugging Workflow Capture Current State 1. browser_snapshot - See page structure 2. browser_take_screenshot - See visual state 3. browser_console_messages onlyErrors: true - Check errors 4. browser_network_requests - See network activity

Isolate Issue 1. Simplify test to minimum reproduction 2. Test in single browser 3. Disable dynamic content 4. Remove variable elements 5. Test step-by-step

Document Problem 1. Screenshot before issue 2. Screenshot at failure point 3. Capture console messages 4. Save network requests 5. Note expected vs actual 6. Include reproduction steps

Practical Examples Example 1: Homepage Visual Regression

Test homepage hasn't visually changed:

  1. Navigate browser_navigate url: "https://example.com"

  2. Wait for page load browser_wait_for textGone: "Loading..."

  3. Capture baseline browser_take_screenshot filename: "homepage-baseline.png" fullPage: true

  4. [After code changes, repeat]

  5. Capture current browser_take_screenshot filename: "homepage-current.png" fullPage: true

  6. Compare images manually or with tools

  7. Document differences

Example 2: Login Form Testing

Test login form functionality:

  1. Navigate to login browser_navigate url: "https://example.com/login"

  2. Get form structure browser_snapshot

  3. Fill form browser_fill_form fields: [ { name: "Email", type: "textbox", ref: "123", value: "test@example.com" }, { name: "Password", type: "textbox", ref: "456", value: "password123" } ]

  4. Screenshot filled form browser_take_screenshot filename: "login-filled.png"

  5. Submit browser_click element: "Sign In button" ref: "789"

  6. Wait for redirect browser_wait_for text: "Welcome back"

  7. Screenshot success browser_take_screenshot filename: "login-success.png"

  8. Verify network request browser_network_requests

Example 3: Responsive Design Check

Test responsive layout:

Mobile: 1. Resize to mobile browser_resize width: 375 height: 667

  1. Navigate browser_navigate url: "https://example.com"

  2. Wait browser_wait_for time: 2

  3. Screenshot browser_take_screenshot filename: "homepage-mobile.png" fullPage: true

Tablet: 5. Resize to tablet browser_resize width: 768 height: 1024

  1. Navigate browser_navigate url: "https://example.com"

  2. Screenshot browser_take_screenshot filename: "homepage-tablet.png" fullPage: true

Desktop: 8. Resize to desktop browser_resize width: 1920 height: 1080

  1. Navigate browser_navigate url: "https://example.com"

  2. Screenshot browser_take_screenshot filename: "homepage-desktop.png" fullPage: true

Example 4: Component State Testing

Test button states:

  1. Navigate to component library browser_navigate url: "https://example.com/components/button"

  2. Get page structure browser_snapshot

  3. Default state browser_take_screenshot filename: "button-default.png" element: "Primary button" ref: "123"

  4. Hover state browser_hover element: "Primary button" ref: "123"

browser_take_screenshot filename: "button-hover.png" element: "Primary button" ref: "123"

  1. Active state browser_click element: "Primary button" ref: "123"

browser_take_screenshot filename: "button-active.png" element: "Primary button" ref: "123"

  1. Snapshot for verification browser_snapshot

Example 5: E2E Checkout Flow

Test complete checkout process:

  1. Navigate to product browser_navigate url: "https://example.com/products/item-123"

  2. Add to cart browser_snapshot

browser_click element: "Add to Cart button" ref: "456"

browser_wait_for text: "Added to cart"

  1. Go to cart browser_click element: "Cart icon" ref: "789"

browser_take_screenshot filename: "cart-with-item.png"

  1. Proceed to checkout browser_click element: "Checkout button" ref: "101"

  2. Fill shipping info browser_snapshot

browser_fill_form fields: [ {name: "Name", type: "textbox", ref: "111", value: "John Doe"}, {name: "Address", type: "textbox", ref: "222", value: "123 Main St"}, {name: "City", type: "textbox", ref: "333", value: "New York"}, {name: "Zip", type: "textbox", ref: "444", value: "10001"} ]

  1. Screenshot checkout browser_take_screenshot filename: "checkout-filled.png" fullPage: true

  2. Complete order browser_click element: "Place Order button" ref: "555"

browser_wait_for text: "Order confirmed"

  1. Screenshot confirmation browser_take_screenshot filename: "order-confirmed.png" fullPage: true

  2. Verify network requests browser_network_requests

Example 6: Accessibility Testing

Test keyboard navigation and structure:

  1. Navigate to page browser_navigate url: "https://example.com/form"

  2. Capture semantic structure browser_snapshot

  3. Verify heading hierarchy

  4. Check h1 → h2 → h3 order
  5. Ensure single h1

  6. Verify logical structure

  7. Test keyboard navigation browser_press_key key: "Tab"

browser_snapshot

browser_take_screenshot filename: "focus-field-1.png"

  1. Continue tabbing browser_press_key key: "Tab"

browser_snapshot

browser_take_screenshot filename: "focus-field-2.png"

  1. Verify all interactive elements reachable
  2. Buttons
  3. Links
  4. Form fields

  5. Custom widgets

  6. Check ARIA labels

  7. Form labels present
  8. Button labels descriptive
  9. Error messages announced

  10. Status updates live

  11. Screenshot accessibility tree browser_take_screenshot filename: "accessibility-structure.png"

Example 7: Network Debugging

Debug failed API calls:

  1. Navigate to page browser_navigate url: "https://example.com/dashboard"

  2. Wait for page browser_wait_for time: 3

  3. Check console errors browser_console_messages onlyErrors: true

  4. Check network requests browser_network_requests

  5. Find failed requests

  6. Status: 4xx or 5xx
  7. Timeout errors

  8. CORS issues

  9. Screenshot error state browser_take_screenshot filename: "api-error-state.png"

  10. Retry action browser_click element: "Refresh button" ref: "123"

  11. Monitor new requests browser_network_requests

  12. Document findings

  13. Failed endpoint
  14. Error message
  15. Request/response data
  16. Screenshot

Example 8: Dialog Handling

Test confirmation dialogs:

  1. Navigate to page browser_navigate url: "https://example.com/settings"

  2. Trigger delete action browser_snapshot

browser_click element: "Delete Account button" ref: "123"

  1. Handle confirmation browser_handle_dialog accept: false # Cancel first time

  2. Verify still on page browser_snapshot

  3. Try again browser_click element: "Delete Account button" ref: "123"

  4. Accept this time browser_handle_dialog accept: true

  5. Wait for result browser_wait_for text: "Account deleted"

  6. Screenshot confirmation browser_take_screenshot filename: "account-deleted.png"

Example 9: Tab Management

Test multi-tab workflow:

  1. List current tabs browser_tabs action: "list"

  2. Open link in new tab browser_click element: "Privacy Policy link" ref: "123" modifiers: ["ControlOrMeta"]

  3. Switch to new tab browser_tabs action: "select" index: 1

  4. Screenshot new tab browser_take_screenshot filename: "privacy-policy.png"

  5. Switch back browser_tabs action: "select" index: 0

  6. Close extra tab browser_tabs action: "close" index: 1

  7. Verify single tab browser_tabs action: "list"

Example 10: Animation Testing

Test loading animations:

  1. Navigate to page browser_navigate url: "https://example.com/data-heavy"

  2. Screenshot loading state browser_take_screenshot filename: "loading-spinner.png"

  3. Wait for loading to complete browser_wait_for textGone: "Loading..."

  4. Wait for animations browser_wait_for time: 1

  5. Screenshot final state browser_take_screenshot filename: "content-loaded.png" fullPage: true

  6. Verify stability browser_wait_for time: 2

browser_take_screenshot filename: "stable-state.png" fullPage: true

  1. Compare screenshots
  2. loading-spinner.png
  3. content-loaded.png
  4. stable-state.png

Quick Reference Essential Commands Navigate: browser_navigate url: "{URL}"

Snapshot: browser_snapshot

Screenshot: browser_take_screenshot filename: "{name}.png"

Full Page Screenshot: browser_take_screenshot filename: "{name}.png", fullPage: true

Element Screenshot: browser_take_screenshot filename: "{name}.png", element: "{description}", ref: "{ref}"

Click: browser_click element: "{description}", ref: "{ref}"

Type: browser_type element: "{description}", ref: "{ref}", text: "{text}"

Fill Form: browser_fill_form fields: [{name, type, ref, value}, ...]

Wait: browser_wait_for text: "{text}" browser_wait_for textGone: "{text}" browser_wait_for time: {seconds}

Resize: browser_resize width: {width}, height: {height}

Console: browser_console_messages onlyErrors: true

Network: browser_network_requests

Common Viewport Sizes Mobile: 375 x 667 (iPhone SE) 390 x 844 (iPhone 12/13/14) 414 x 896 (iPhone 11 Pro Max) 360 x 640 (Android Small) 412 x 915 (Android Large)

Tablet: 768 x 1024 (iPad Portrait) 1024 x 768 (iPad Landscape) 810 x 1080 (Android Tablet)

Desktop: 1280 x 720 (HD) 1366 x 768 (Laptop) 1920 x 1080 (Full HD) 2560 x 1440 (2K) 3840 x 2160 (4K)

Test Organization Template tests/ ├── visual/ │ ├── baselines/ │ ├── results/ │ └── diffs/ ├── e2e/ │ ├── auth/ │ ├── checkout/ │ └── navigation/ ├── responsive/ │ ├── mobile/ │ ├── tablet/ │ └── desktop/ └── components/ ├── buttons/ ├── forms/ └── navigation/

reports/ ├── visual-regression.html ├── cross-browser.html └── accessibility.html

Resources Playwright Documentation Playwright API Reference Playwright MCP Server Visual Testing Guide Best Practices Accessibility Testing

Skill Version: 1.0.0 Last Updated: October 2025 Skill Category: Browser Automation, Visual Testing, Quality Assurance Compatible With: Playwright MCP Server, Chromium, Firefox, WebKit

← 返回排行榜