Playwright Testing Environment

Key Features

• Multi-browser support with Chromium, Firefox, and WebKit engines pre-installed in a single container
• Web-based trace viewer accessible at port 8080 for visual test debugging and analysis
• Persistent test results and reports storage using Docker volumes for result retention
• Network isolation between Playwright runner and trace viewer for secure test execution
• Ready-to-mount test directory structure with ./tests mapped to container workspace
• NGINX-powered static file serving for fast access to generated HTML reports and trace files
• Keep-alive Playwright container for interactive test development and debugging sessions
• Separate read-only volume mounts for traces and reports to prevent accidental data modification

Common Use Cases

• 1Development teams running cross-browser compatibility tests with visual debugging capabilities
• 2CI/CD pipelines requiring persistent test result storage and web-accessible reporting
• 3QA engineers analyzing test failures through Playwright's trace viewer interface
• 4Remote teams sharing test execution traces and reports through centralized web access
• 5Educational environments teaching browser automation with hands-on trace analysis
• 6Automated testing workflows that need to archive and review historical test results
• 7Development workflows requiring isolated browser testing without local browser installations

Prerequisites

• Docker Engine 20.10+ with support for multi-platform images (Playwright image is Linux-based)
• Minimum 4GB RAM available for Docker (Playwright browsers are memory-intensive during execution)
• Port 8080 available on host system for accessing the trace viewer web interface
• Test files prepared in ./tests directory structure compatible with Playwright test discovery
• Basic understanding of Playwright test syntax and trace file generation commands
• Network connectivity for initial image pulls (Playwright image is approximately 2GB)

docker-compose.yml

1services: 
2  playwright: 
3    image: mcr.microsoft.com/playwright:latest
4    working_dir: /app
5    volumes: 
6      - ./tests:/app
7      - playwright_results:/app/test-results
8      - playwright_reports:/app/playwright-report
9    command: tail -f /dev/null
10    networks: 
11      - playwright_net
12
13  trace-viewer: 
14    image: nginx:alpine
15    ports: 
16      - "8080:80"
17    volumes: 
18      - playwright_results:/usr/share/nginx/html/traces:ro
19      - playwright_reports:/usr/share/nginx/html/report:ro
20    networks: 
21      - playwright_net
22
23volumes: 
24  playwright_results: 
25  playwright_reports: 
26
27networks: 
28  playwright_net: 

.env Template

1# Playwright
2# Run tests: docker compose exec playwright npx playwright test
3# Reports at http://localhost:8080/report
4# Traces at http://localhost:8080/traces

Usage Notes

Individual Services(2 services)

Copy individual services to mix and match with your existing compose files.

playwright:
  image: mcr.microsoft.com/playwright:latest
  working_dir: /app
  volumes:
    - ./tests:/app
    - playwright_results:/app/test-results
    - playwright_reports:/app/playwright-report
  command: tail -f /dev/null
  networks:
    - playwright_net

trace-viewer:
  image: nginx:alpine
  ports:
    - "8080:80"
  volumes:
    - playwright_results:/usr/share/nginx/html/traces:ro
    - playwright_reports:/usr/share/nginx/html/report:ro
  networks:
    - playwright_net

Quick Start

1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  playwright:
5    image: mcr.microsoft.com/playwright:latest
6    working_dir: /app
7    volumes:
8      - ./tests:/app
9      - playwright_results:/app/test-results
10      - playwright_reports:/app/playwright-report
11    command: tail -f /dev/null
12    networks:
13      - playwright_net
14
15  trace-viewer:
16    image: nginx:alpine
17    ports:
18      - "8080:80"
19    volumes:
20      - playwright_results:/usr/share/nginx/html/traces:ro
21      - playwright_reports:/usr/share/nginx/html/report:ro
22    networks:
23      - playwright_net
24
25volumes:
26  playwright_results:
27  playwright_reports:
28
29networks:
30  playwright_net:
31EOF
32
33# 2. Create the .env file
34cat > .env << 'EOF'
35# Playwright
36# Run tests: docker compose exec playwright npx playwright test
37# Reports at http://localhost:8080/report
38# Traces at http://localhost:8080/traces
39EOF
40
41# 3. Start the services
42docker compose up -d
43
44# 4. View logs
45docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

1curl -fsSL https://docker.recipes/api/recipes/playwright-testing/run | bash

Troubleshooting