|
| 1 | +--- |
| 2 | +title: Playwright Testing with Localhost |
| 3 | +description: Test local web applications with Playwright through the firewall |
| 4 | +--- |
| 5 | + |
| 6 | +The firewall makes it easy to test local web applications with Playwright using the `localhost` keyword. |
| 7 | + |
| 8 | +## Quick Start |
| 9 | + |
| 10 | +Test a local development server with Playwright: |
| 11 | + |
| 12 | +```bash |
| 13 | +# Start your dev server (e.g., npm run dev on port 3000) |
| 14 | + |
| 15 | +# Run Playwright tests through the firewall |
| 16 | +sudo awf --allow-domains localhost,playwright.dev -- npx playwright test |
| 17 | +``` |
| 18 | + |
| 19 | +The `localhost` keyword automatically configures everything needed for local testing - no manual setup required. |
| 20 | + |
| 21 | +## What the localhost Keyword Does |
| 22 | + |
| 23 | +When you include `localhost` in `--allow-domains`, awf automatically: |
| 24 | + |
| 25 | +1. **Enables host access** - Activates `--enable-host-access` flag |
| 26 | +2. **Maps to host.docker.internal** - Replaces `localhost` with Docker's host gateway |
| 27 | +3. **Allows development ports** - Opens common dev ports: 3000, 3001, 4000, 4200, 5000, 5173, 8000, 8080, 8081, 8888, 9000, 9090 |
| 28 | + |
| 29 | +This means your Playwright tests inside the container can reach services running on your host machine's localhost. |
| 30 | + |
| 31 | +## Protocol Prefixes |
| 32 | + |
| 33 | +The `localhost` keyword preserves HTTP/HTTPS protocol prefixes: |
| 34 | + |
| 35 | +```bash |
| 36 | +# HTTP only |
| 37 | +sudo awf --allow-domains http://localhost -- npx playwright test |
| 38 | + |
| 39 | +# HTTPS only |
| 40 | +sudo awf --allow-domains https://localhost -- npx playwright test |
| 41 | + |
| 42 | +# Both HTTP and HTTPS (default) |
| 43 | +sudo awf --allow-domains localhost -- npx playwright test |
| 44 | +``` |
| 45 | + |
| 46 | +## Custom Port Configuration |
| 47 | + |
| 48 | +Override the default port list with `--allow-host-ports`: |
| 49 | + |
| 50 | +```bash |
| 51 | +# Allow only specific ports |
| 52 | +sudo awf \ |
| 53 | + --allow-domains localhost \ |
| 54 | + --allow-host-ports 3000,8080 \ |
| 55 | + -- npx playwright test |
| 56 | + |
| 57 | +# Allow a port range |
| 58 | +sudo awf \ |
| 59 | + --allow-domains localhost \ |
| 60 | + --allow-host-ports 3000,8080-8090 \ |
| 61 | + -- npx playwright test |
| 62 | +``` |
| 63 | + |
| 64 | +:::note |
| 65 | +Port ranges must avoid dangerous ports (SSH, databases, etc.). See the [security model](/gh-aw-firewall/concepts/security-model) for details. |
| 66 | +::: |
| 67 | + |
| 68 | +## Example: Testing a Next.js App |
| 69 | + |
| 70 | +```bash |
| 71 | +# Terminal 1: Start Next.js dev server |
| 72 | +npm run dev |
| 73 | +# Server runs on http://localhost:3000 |
| 74 | + |
| 75 | +# Terminal 2: Run Playwright tests through firewall |
| 76 | +sudo awf \ |
| 77 | + --allow-domains localhost,vercel.app,next.js.org \ |
| 78 | + -- npx playwright test |
| 79 | +``` |
| 80 | + |
| 81 | +Your Playwright tests can now access `http://localhost:3000` and also fetch from `vercel.app` and `next.js.org`. |
| 82 | + |
| 83 | +## Example: Testing a React App with External APIs |
| 84 | + |
| 85 | +```bash |
| 86 | +# Start React dev server on port 3000 |
| 87 | +npm start |
| 88 | + |
| 89 | +# Run tests with access to localhost and external APIs |
| 90 | +sudo awf \ |
| 91 | + --allow-domains localhost,api.github.com,cdn.example.com \ |
| 92 | + -- npx playwright test |
| 93 | +``` |
| 94 | + |
| 95 | +## Without the localhost Keyword |
| 96 | + |
| 97 | +Before the `localhost` keyword, you had to manually configure host access: |
| 98 | + |
| 99 | +```bash |
| 100 | +# Old way (still works) |
| 101 | +sudo awf \ |
| 102 | + --enable-host-access \ |
| 103 | + --allow-domains host.docker.internal \ |
| 104 | + --allow-host-ports 3000,8080 \ |
| 105 | + -- npx playwright test |
| 106 | +``` |
| 107 | + |
| 108 | +The `localhost` keyword eliminates this boilerplate. |
| 109 | + |
| 110 | +## Security Considerations |
| 111 | + |
| 112 | +:::caution |
| 113 | +The `localhost` keyword enables access to services running on your host machine. Only use it for trusted workloads like local testing and development. |
| 114 | +::: |
| 115 | + |
| 116 | +When `localhost` is specified: |
| 117 | +- Containers can access ANY service on the specified ports on your host machine |
| 118 | +- This includes local databases, development servers, and other services |
| 119 | +- This is safe for local development but should not be used in production |
| 120 | + |
| 121 | +## Troubleshooting |
| 122 | + |
| 123 | +### "Connection refused" errors |
| 124 | + |
| 125 | +If Playwright can't connect to your local server: |
| 126 | + |
| 127 | +1. **Verify server is running:** Check that your dev server is actually running on the host |
| 128 | +2. **Check the port:** Ensure the port is in the allowed list (default: 3000, 3001, 4000, 4200, 5000, 5173, 8000, 8080, 8081, 8888, 9000, 9090) |
| 129 | +3. **Use custom ports:** If using a different port, specify it with `--allow-host-ports` |
| 130 | + |
| 131 | +### "Host not found" errors |
| 132 | + |
| 133 | +If you see DNS resolution errors: |
| 134 | + |
| 135 | +- Use `localhost` (not `127.0.0.1` or your machine's hostname) |
| 136 | +- The `localhost` keyword maps to `host.docker.internal` which resolves to the host |
| 137 | + |
| 138 | +### Server binds to 127.0.0.1 only |
| 139 | + |
| 140 | +Some dev servers bind only to 127.0.0.1. To make them accessible from Docker containers: |
| 141 | + |
| 142 | +```bash |
| 143 | +# Bind to 0.0.0.0 instead of 127.0.0.1 |
| 144 | +npm run dev -- --host 0.0.0.0 |
| 145 | + |
| 146 | +# Or for Vite/Vue |
| 147 | +npm run dev -- --host |
| 148 | + |
| 149 | +# Or for Next.js |
| 150 | +npm run dev -- -H 0.0.0.0 |
| 151 | +``` |
| 152 | + |
| 153 | +## See Also |
| 154 | + |
| 155 | +- [Server Connectivity](/gh-aw-firewall/guides/server-connectivity) - Connecting to HTTP, HTTPS, and gRPC servers |
| 156 | +- [Security Model](/gh-aw-firewall/concepts/security-model) - Understanding the firewall's security guarantees |
| 157 | +- [CLI Reference](/gh-aw-firewall/reference/cli-reference) - All command-line options |
0 commit comments