e2e tests on localhost with Docker?
Hi there, I'm trying to use Playwright for end-to-end testing in my project. I use Docker devcontainers with a backend container exposing a server at port 8000 and a frontend container exposing a server on port 3000. My containers are connected with docker compose. Normally, I access my application in development by going to localhost:3000 on my host machine browser, and that frontend makes requests to the backend at localhost:8000.
I'm trying to run Playwright tests on my development servers (localhost). I started by adding Playwright to my frontend container, and it's able to access localhost:3000 fine since that's in the same container, but the backend is not reachable at localhost:8000, since Playwright is running inside a container. I can fix this by changing the api url from http://localhost:8000 to http://backend:8000, where backend is the name of my backend container, but that breaks the site on my host browser, where the backend is accessible via localhost:8000, not backend:8000.
Does anybody have a solution or example of how to fix this? I think maybe I can map the external container ports to localhost ports in my Playwright container but not sure how. It seems like otherwise Playwright needs to run on my host, but I would prefer to run in a Docker container for ease of setup for new team members. The Playwright docs have a section on Docker, but maybe that's only meant for making requests to deployed sites on the internet? Testing on localhost seems important both for local testing of changes and for testing in CI without having to deploy a staging environment - or am I going down the wrong path here? Thanks!
This thread is trying to answer question "How can I access the backend server at localhost:8000 from Playwright running inside a Docker container?"
Related Ask AI answer for "What is the method to connect Playwright running in a Docker container to a backend server at localhost:8000?".
Answer
Accessing Localhost from a Docker Container with Playwright
To connect to a backend server at localhost:8000 from a Playwright Docker container, you need to share the network namespace between the container and the host machine. You can do this by using the --network="host" flag when running your Docker container.
Here's how you do it:
docker run -it --network="host" playwright-containerThis setup allows you to access your backend server at localhost:8000 from within the Docker container. But be aware, this exposes all network interfaces of your host machine to the container, which could have security implications.
If you prefer a more secure method, create a bridge network and connect your backend server and Playwright Docker containers to it.
First, create a bridge network:
docker network create my-networkThen, start your backend server container:
docker run -d --name backend-server --net=my-network -p 8000:8000 my-backend-imageFinally, start your Playwright Docker container:
docker run -it --name playwright-container --net=my-network playwright-imageNow, both containers can communicate with each other. Inside the Playwright Docker container, you can access the backend server at http://backend-server:8000.
Remember to replace my-backend-image and playwright-image with your actual image names or tags.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].