Files

swp 6c95c6159e feat: add Docker testing environment with visible browser (Issue #12 )

- Create Dockerfile.playwright with headed mode by default
- Create docker-compose.yml with MCP server, headed, and test profiles
- Update Playwright skill to recommend headed mode for observation
- Remove --headless flag so browser window is visible
- Add BROWSER_VISIBILITY.md guide for X11/Docker setup
- Add README.Docker.md with quick start instructions

Configuration:
- PLAYWRIGHT_MCP_HEADLESS=false (browser visible)
- Requires X11 display for Docker (DISPLAY=:0)
- Three profiles: default, debug, test

Refs: #12 in Milestone #44

2026-04-04 03:59:19 +01:00

2.0 KiB

Raw Blame History

Browser Visibility Configuration

By Default: Browser is VISIBLE (headed mode)

This allows you to observe browser actions in real-time during testing.

Configuration Options

Option 1: Visible Browser (Default for Development)

# Docker: Browser window visible
docker-compose up playwright-mcp

# Or directly:
npx @playwright/mcp@latest --browser chromium --no-sandbox
# (without --headless flag = visible window)

Option 2: Hidden Browser (For CI/CD)

Set environment variable:

export PLAYWRIGHT_MCP_HEADLESS=true

Or use flag:

npx @playwright/mcp@latest --headless --browser chromium --no-sandbox

Docker Setup for Visible Browser

Linux

# Allow Docker to access X11
xhost +local:docker

# Run with display
docker-compose up playwright-mcp

macOS

# Install XQuartz for X11
brew install --cask xquartz

# Start XQuartz
open -a XQuartz

# Allow connections
xhost +local:

# Run with display
docker-compose up playwright-mcp

Windows (WSL2)

# Install VcXsrv or use WSLg (Windows 11)
# Export display
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0

# Run
docker-compose up playwright-mcp

Environment Variables

Variable	Default	Purpose
`PLAYWRIGHT_MCP_HEADLESS`	`false`	`true` = hidden, `false` = visible
`PLAYWRIGHT_MCP_BROWSER`	`chromium`	Browser to use
`DISPLAY`	`:0`	X11 display for headed mode

Benefits of Headed Mode

Observe Actions - Watch browser in real-time
Debug Tests - See what's happening visually
Learn - Understand how automation works
Verify - Confirm correct behavior visually

When to Use Headless

For CI/CD pipelines or production testing where you don't need to see the browser:

# Set in CI environment
export PLAYWRIGHT_MCP_HEADLESS=true

# Or in docker-compose.override.yml
services:
  playwright-mcp:
    environment:
      - PLAYWRIGHT_MCP_HEADLESS=true

2.0 KiB Raw Blame History