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:

bash

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:

code

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:

bash

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

bash

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

Expected Output:

code

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

bash

#!/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:

code

=== 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

bash

#!/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

bash

#!/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:

code

=== 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

bash

# 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:

bash

#!/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:

bash

# 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:

•Get container IP address
•Construct URL
•Test connectivity
•Use in Playwright navigate

Example Test Setup:

bash

# 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

bash

# 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

bash

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:

bash

# 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:

bash

# 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:

bash

# 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

bash

#!/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.