Docker Playwright Configuration Skill

Use this skill to properly configure Playwright testing with Docker containers by using container IP addresses instead of localhost.

When to Use

• Before running Playwright tests against Docker containers
• When localhost connections fail
• For testing in Docker Compose environments
• During QA validation of containerized apps
• In CI/CD pipelines with Docker

Why This Is Important

The Problem with localhost

When Playwright MCP runs and tries to connect to localhost:3003, it may:

• ❌ Connect to the host machine, not the container
• ❌ Fail due to port mapping issues
• ❌ Have network isolation problems
• ❌ Experience inconsistent behavior

The Solution: Docker IPs

Using container IP addresses directly:

• ✅ Connects directly to the container
• ✅ Works reliably in Docker networks
• ✅ Avoids port mapping confusion
• ✅ Consistent behavior in all environments

What This Skill Does

1. Find Docker Container IPs

Retrieves IP addresses for all running containers:

docker ps --format "{{.Names}}" | while read container; do
  ip=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' "$container")
  echo "$container: $ip"
done

2. Create URL Mapping

Maps service names to container IPs:

auth_ui: http://172.18.0.2:80
appointments_ui: http://172.18.0.3:80
scheduling_ui: http://172.18.0.4:80
auth_api: http://172.18.0.5:80

3. Generate Test Configuration

Creates configuration for Playwright tests with correct URLs.

4. Validate Connectivity

Tests that containers are accessible on their IPs:

curl -f http://172.18.0.4:80/remoteEntry.js

Available Tools

Bash Commands

• docker ps - List running containers
• docker inspect - Get container details including IP
• docker-compose ps - List compose services
• curl - Test container connectivity
• docker network inspect - Examine Docker network

Configuration Workflow

Step 1: List Running Containers

docker ps --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"

Expected Output:

NAMES              STATUS          PORTS
scheduling_ui      Up 10 minutes   0.0.0.0:3003->80/tcp
scheduling_api     Up 10 minutes   0.0.0.0:8003->80/tcp
auth_ui            Up 15 minutes   0.0.0.0:3001->80/tcp
auth_api           Up 15 minutes   0.0.0.0:8001->80/tcp

Step 2: Get Container IP Addresses

#!/bin/bash

echo "=== Docker Container IP Addresses ==="
echo ""

# Get all running container names
containers=$(docker ps --format "{{.Names}}")

for container in $containers; do
  # Get IP address from Docker network
  ip=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' "$container")

  # Get exposed port
  port=$(docker inspect -f '{{range $p, $conf := .NetworkSettings.Ports}}{{$p}}{{end}}' "$container" | cut -d'/' -f1)

  # Default to port 80 if not found
  if [ -z "$port" ]; then
    port=80
  fi

  echo "$container"
  echo "  IP: $ip"
  echo "  URL: http://$ip:80"
  echo ""
done

Expected Output:

=== Docker Container IP Addresses ===

scheduling_ui
  IP: 172.18.0.4
  URL: http://172.18.0.4:80

scheduling_api
  IP: 172.18.0.5
  URL: http://172.18.0.5:80

auth_ui
  IP: 172.18.0.2
  URL: http://172.18.0.2:80

auth_api
  IP: 172.18.0.3
  URL: http://172.18.0.3:80

Step 3: Test Container Connectivity

#!/bin/bash

echo "=== Testing Container Connectivity ==="
echo ""

# Function to test URL
test_url() {
  local name=$1
  local url=$2

  echo -n "Testing $name ($url)... "

  if curl -f -s -o /dev/null -m 5 "$url"; then
    echo "✅ OK"
    return 0
  else
    echo "❌ FAIL"
    return 1
  fi
}

# Get container IPs and test
containers=$(docker ps --format "{{.Names}}")

for container in $containers; do
  ip=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' "$container")

  # Test UI containers (remoteEntry.js)
  if [[ $container == *"_ui" ]]; then
    test_url "$container" "http://$ip:80/remoteEntry.js"
  fi

  # Test API containers (/health)
  if [[ $container == *"_api" ]]; then
    test_url "$container" "http://$ip:80/health"
  fi
done

Step 4: Create Playwright Test Configuration

#!/bin/bash

echo "=== Playwright Test Configuration ==="
echo ""
echo "Use these URLs in your Playwright tests:"
echo ""

containers=$(docker ps --format "{{.Names}}")

for container in $containers; do
  ip=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' "$container")

  if [[ $container == *"_ui" ]]; then
    service_name=$(echo "$container" | sed 's/_ui//')
    echo "# $service_name UI"
    echo "const ${service_name}URL = 'http://$ip:80'"
    echo ""
  fi
done

echo ""
echo "Example usage:"
echo "mcp__playwright__browser_navigate(schedulingURL)"

Expected Output:

=== Playwright Test Configuration ===

Use these URLs in your Playwright tests:

# scheduling UI
const schedulingURL = 'http://172.18.0.4:80'

# auth UI
const authURL = 'http://172.18.0.2:80'

Example usage:
mcp__playwright__browser_navigate(schedulingURL)

Step 5: Verify Network Configuration

# Check which Docker network containers are on
docker network inspect stylemate_net --format '{{range .Containers}}{{.Name}}: {{.IPv4Address}}{{"\n"}}{{end}}'

Container IP Quick Reference Script

Create a helper script to quickly get container URLs:

#!/bin/bash
# File: get-container-urls.sh

get_container_url() {
  local container_name=$1
  local ip=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' "$container_name" 2>/dev/null)

  if [ -z "$ip" ]; then
    echo "Error: Container '$container_name' not found or not running"
    return 1
  fi

  echo "http://$ip:80"
}

# Usage examples:
# get_container_url "scheduling_ui"
# get_container_url "scheduling_api"

# If called with argument, return that container's URL
if [ $# -eq 1 ]; then
  get_container_url "$1"
else
  # Otherwise, show all containers
  echo "=== All Container URLs ==="
  for container in $(docker ps --format "{{.Names}}"); do
    url=$(get_container_url "$container")
    echo "$container: $url"
  done
fi

Usage:

# Get all URLs
./get-container-urls.sh

# Get specific container URL
SCHEDULING_URL=$(./get-container-urls.sh scheduling_ui)
mcp__playwright__browser_navigate("$SCHEDULING_URL")

Integration with Playwright Tests

Before Starting Tests:

1. Get container IP address
2. Construct URL
3. Test connectivity
4. Use in Playwright navigate

Example Test Setup:

# Get container IP
CONTAINER_NAME="scheduling_ui"
CONTAINER_IP=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' "$CONTAINER_NAME")

if [ -z "$CONTAINER_IP" ]; then
  echo "❌ Error: Container $CONTAINER_NAME not running"
  exit 1
fi

TEST_URL="http://$CONTAINER_IP:80"

echo "Testing URL: $TEST_URL"

# Verify container is reachable
if ! curl -f -s -o /dev/null -m 5 "$TEST_URL/remoteEntry.js"; then
  echo "❌ Error: Cannot reach $TEST_URL"
  exit 1
fi

echo "✅ Container is reachable"

# Now use in Playwright
echo "Use this URL in Playwright: $TEST_URL"

Common Docker Networks

StyleMate Network

# Network name
stylemate_net

# Inspect network
docker network inspect stylemate_net

# List containers on network
docker network inspect stylemate_net --format '{{range .Containers}}{{.Name}} {{end}}'

Getting Network Subnet

docker network inspect stylemate_net --format '{{range .IPAM.Config}}{{.Subnet}}{{end}}'
# Example output: 172.18.0.0/16

Troubleshooting

Issue: Container has no IP

Symptom: docker inspect returns empty IP Causes:

• Container not running
• Container not connected to network
• Container just started (wait a moment)

Fix:

# Check container status
docker ps -a | grep container_name

# Check container networks
docker inspect container_name | grep -A 10 Networks

# Restart container if needed
docker-compose restart container_name

Issue: Cannot connect to container IP

Symptom: curl fails to container IP Causes:

• Container not healthy yet
• Wrong port
• Firewall blocking
• Container crashed

Fix:

# Check container health
docker ps | grep container_name

# Check container logs
docker logs container_name

# Check health check
docker inspect container_name | grep -A 5 Health

# Wait for healthy status
while [ "$(docker inspect -f '{{.State.Health.Status}}' container_name)" != "healthy" ]; do
  echo "Waiting for container to be healthy..."
  sleep 2
done

Issue: IP changes after restart

Symptom: IP address different after container restart Solution: Always get IP dynamically before tests:

# Don't hardcode IPs
SCHEDULING_URL=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' scheduling_ui)
SCHEDULING_URL="http://$SCHEDULING_URL:80"

Best Practices

✅ Do:

• Get IPs dynamically before each test run
• Test container connectivity before Playwright tests
• Use container names, not hardcoded IPs
• Check container health status
• Handle cases where container isn't running

❌ Don't:

• Hardcode IP addresses (they can change)
• Use localhost:port for containerized apps
• Start tests before container is healthy
• Ignore connection failures
• Assume port mappings work the same as direct IP

Expected Inputs

• Container name (e.g., "scheduling_ui")
• Network name (e.g., "stylemate_net")

Deliverables

• Container IP addresses
• Test URLs for Playwright
• Connectivity test results
• Configuration script
• Ready-to-use URLs for testing

Example: Complete Setup for QA Testing

#!/bin/bash
# prepare-playwright-test.sh

SERVICE_NAME="scheduling"
CONTAINER_NAME="${SERVICE_NAME}_ui"

echo "=== Preparing Playwright Test for $SERVICE_NAME ==="
echo ""

# Step 1: Check container is running
echo "Step 1: Checking container status..."
if ! docker ps | grep -q "$CONTAINER_NAME"; then
  echo "❌ Container $CONTAINER_NAME is not running"
  echo "Starting container..."
  docker-compose up -d "$CONTAINER_NAME"
  sleep 5
fi
echo "✅ Container is running"
echo ""

# Step 2: Get container IP
echo "Step 2: Getting container IP..."
CONTAINER_IP=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' "$CONTAINER_NAME")

if [ -z "$CONTAINER_IP" ]; then
  echo "❌ Failed to get container IP"
  exit 1
fi

echo "✅ Container IP: $CONTAINER_IP"
echo ""

# Step 3: Construct URL
TEST_URL="http://$CONTAINER_IP:80"
echo "Step 3: Test URL: $TEST_URL"
echo ""

# Step 4: Wait for container to be healthy
echo "Step 4: Waiting for container to be healthy..."
for i in {1..30}; do
  if curl -f -s -o /dev/null -m 2 "$TEST_URL/remoteEntry.js"; then
    echo "✅ Container is healthy and reachable"
    break
  fi

  if [ $i -eq 30 ]; then
    echo "❌ Container not healthy after 30 attempts"
    docker logs --tail 50 "$CONTAINER_NAME"
    exit 1
  fi

  echo "  Waiting... ($i/30)"
  sleep 2
done
echo ""

# Step 5: Export for Playwright
echo "Step 5: Playwright Configuration"
echo "=================="
echo "export PLAYWRIGHT_TEST_URL='$TEST_URL'"
echo "=================="
echo ""

echo "Use in Playwright:"
echo "mcp__playwright__browser_navigate('$TEST_URL')"
echo ""

echo "✅ Ready for Playwright testing!"

# Export for use in shell
export PLAYWRIGHT_TEST_URL="$TEST_URL"

This skill ensures Playwright tests connect to the correct Docker containers using IP addresses, avoiding localhost issues and ensuring reliable, consistent testing in containerized environments.