Docker GUI Setup for Playwright Automation¶

This setup provides a Docker container with full GUI support for running Playwright in headed mode, solving the VNC visibility issues.

Architecture¶

┌─────────────────────────────────────────────┐
│  Docker Container: playwright-gui           │
│                                             │
│  ┌─────────────────────────────────────┐   │
│  │  Xvfb (Virtual Display :99)         │   │
│  │  ├─ Fluxbox (Window Manager)        │   │
│  │  └─ Chromium (Headed Mode)          │   │
│  └─────────────────────────────────────┘   │
│                                             │
│  ┌─────────────────────────────────────┐   │
│  │  SSH Server (Port 22)               │◄──┼─── n8n (Docker-to-Docker)
│  └─────────────────────────────────────┘   │
│                                             │
│  ┌─────────────────────────────────────┐   │
│  │  VNC Server (Port 5900, optional)   │◄──┼─── VNC Client (debugging)
│  └─────────────────────────────────────┘   │
│                                             │
│  Volumes:                                   │
│  - /app/scripts (automation scripts)        │
│  - /app/.playwright-storage (sessions)      │
│  - /gdrive (Google Drive, read-only)        │
│  - /output (generated images, write)        │
└─────────────────────────────────────────────┘

Setup Instructions¶

1. Build and Start Container¶

# Build the Docker image
docker compose -f docker-compose.playwright-gui.yml build

# Start the container
docker compose -f docker-compose.playwright-gui.yml up -d

# Check logs
docker compose -f docker-compose.playwright-gui.yml logs -f

2. Verify Container is Running¶

# Check container status
docker compose -f docker-compose.playwright-gui.yml ps

# Should show:
# NAME                     STATUS    PORTS
# playwright-gui           Up        0.0.0.0:2222->22/tcp, 0.0.0.0:5901->5900/tcp

3. Test SSH Access¶

# SSH into container (password: playwright)
ssh root@localhost -p 2222

# Inside container, verify display
echo $DISPLAY
# Should show: :99

# Test X11
xdpyinfo -display :99
# Should show display info

4. Test Automation¶

# SSH into container
ssh root@localhost -p 2222

# Run automation script
cd /app
node scripts/chatgpt-interactive.js \
  "IRON" \
  "/gdrive/Nutri-E Marketing/Social Media Posts/TikTok/Educational/Iron/reference-frames/b12-intro-first-frame.png" \
  "/gdrive/Nutri-E Marketing/Social Media Posts/TikTok/Educational/Iron/reference-frames/b12-intro-last-frame.png" \
  "/output/Social Media Posts/TikTok/Educational/Iron/videos/"

5. Optional: VNC Access for Debugging¶

# Connect with VNC client to:
# Host: localhost
# Port: 5901
# Password: playwright

# You'll see the actual browser GUI and can watch automation in real-time

n8n Integration¶

Docker-to-Docker SSH Configuration¶

In your n8n workflow, use the SSH node with these settings:

{
  "host": "playwright-gui",
  "port": 22,
  "username": "root",
  "password": "playwright",
  "command": "cd /app && node scripts/chatgpt-interactive.js \"IRON\" \"/gdrive/path/to/first.png\" \"/gdrive/path/to/last.png\" \"/output/path/\""
}

Note: When n8n and playwright-gui are on the same Docker network, use the service name playwright-gui as the hostname instead of localhost.

Add playwright-gui to n8n's Docker Network¶

# Option 1: Add to n8n's network (if n8n uses docker-compose)
# Edit docker-compose.playwright-gui.yml:
networks:
  playwright-net:
    external: true
    name: n8n_default  # Replace with your n8n network name

# Option 2: Connect manually after starting
docker network connect n8n_default playwright-gui

Troubleshooting¶

Container won't start¶

# Check logs
docker compose -f docker-compose.playwright-gui.yml logs

# Common issues:
# - Port conflicts (2222 or 5901 already in use)
# - Volume mount issues (check Google Drive path)

X11 display issues¶

# Inside container
ps aux | grep Xvfb
# Should show Xvfb process running on :99

# Test display
DISPLAY=:99 xdpyinfo

Playwright can't find browser¶

# Inside container
npx playwright install chromium
npx playwright install-deps chromium

Session persistence issues¶

# Check session file
ls -la /app/.playwright-storage/chatgpt-auth.json

# The file should persist across container restarts due to the volume mount

File Locations¶

Scripts: /app/scripts/ (mounted from ./scripts)
Sessions: /app/.playwright-storage/ (persistent volume)
Google Drive: /gdrive/ (read-only mount)
Output: /output/ (write mount for generated images)

Advantages Over VNC Approach¶

✅ True headed mode - Playwright sees actual GUI, no visibility issues ✅ Better performance - No VNC encoding overhead during automation ✅ Docker-to-Docker SSH - Direct connection from n8n, no network complexity ✅ Persistent sessions - Volume mount preserves auth cookies ✅ Optional VNC - Still available for debugging/monitoring ✅ Isolated environment - Reproducible across machines

Next Steps¶

Test the automation script in the new container
Verify image generation works end-to-end
Set up n8n SSH connection to automate the workflow
Document any additional configuration needed