How to Connect Playwright Tests to a Web Service Container in GitLab CI/CD

Learn how to configure GitLab CI/CD to allow Playwright test containers to communicate with a web service container using Docker service aliases.
---
This video is based on the question https://stackoverflow.com/q/79461429/ asked by the user 'Jasper' ( https://stackoverflow.com/u/7619474/ ) and on the answer https://stackoverflow.com/a/79464720/ provided by the user 'Jasper' ( https://stackoverflow.com/u/7619474/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Playwright container cannot reach web service container in GitLab CI/CD

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Overview

Running UI tests with Playwright in a GitLab CI/CD pipeline alongside a web service container can be tricky due to inter-container networking. A common issue is the Playwright test container not being able to reach the service container, even though both are running.

Problem Explained

The typical setup:

Launch a web service container (e.g., named app).

Run Playwright tests in a separate container.

Access the service inside tests via a hostname like http://docker:8000.

Why it fails:

The Playwright container cannot resolve the hostname (docker in this case).

Running the service container as a standalone container (using docker run) inside a GitLab job doesn't automatically expose it to other containers via network aliases.

Modern and Reliable Solution

Instead of manually running containers inside scripts, leverage GitLab CI's services keyword to spin up dependent containers in the pipeline job. This approach automatically creates a network where containers can communicate using their service aliases.

Step-by-Step Fix

Define the web service as a service within the job using the services keyword.

Assign an alias to the service container for easy hostname reference.

Use that alias within Playwright tests as the base URL.

Run Playwright tests in the main job container, which has network access to the service.

Example gitlab-ci.yml Job Configuration

[[See Video to Reveal this Text or Code Snippet]]

Explanation

${CI_REGISTRY_IMAGE} refers to your web service Docker image.

Defining it under services makes GitLab spin up the web service container alongside the job.

The alias: app option lets you use http://app as the hostname from the Playwright container.

The main job container (Playwright) can now access the service reliably without custom network hacks.

Key Takeaways

Avoid launching containers via docker run inside the job script for inter-container communication.

Use GitLab CI/CD's services feature to manage dependent containers.

Reference services using their aliases for stable networking.

Keep Playwright and service containers in the same GitLab network to allow seamless access.

This setup leads to stable, maintainable, and reproducible test environments in your CI/CD pipeline.