I have created a docker image using the following Dockerfile

FROM mcr.microsoft/playwright:v1.33.0-jammy

# Install Xvfb
RUN apt-get update && \
    apt-get install -y xvfb x11-apps x11-xkb-utils libx11-6 libx11-xcb1

# Set the work directory for the application
WORKDIR /app

# Set the environment path to node_modules/.bin
ENV PATH /app/node_modules/.bin:$PATH

# Install NVM
RUN curl -o- .39.0/install.sh | bash
# Activate NVM
SHELL ["/bin/bash", "-c"]
ENV NVM_DIR=/root/.nvm
RUN source $NVM_DIR/nvm.sh && nvm --version
# Install Node.js version 16.18.0
RUN source $NVM_DIR/nvm.sh && nvm install 16.18.0
# Set Node.js version 16.18.0 as the default
RUN source $NVM_DIR/nvm.sh && nvm alias default 16.18.0
# COPY the needed files to the app folder in Docker image
COPY . /app/
# Install the dependencies in Node environment
RUN source $NVM_DIR/nvm.sh && nvm use 16.18.0 && npm ci

I have playwright tests on my project, with headless: false in playwright.config and I want to run them on the container based on Microsoft's image. I installed XQuartz using brew install --cask xquartz and allowed connections from network clients and run xhost +localhost, gave docker desktop access to /tmp/.X11-unix. as in Running Playwright inside Docker containers

On XQuartz, I run:

docker run --rm \
        --name e2e-on-docker-container \
        -e HTTPS=false \
        -e DISPLAY=host.docker.internal:0 \
        -it -p 3000:3000 \
        -v /tmp/.X11-unix:/tmp/.X11-unix \
        e2e-on-docker-image /bin/bash

to create the container

I run npm start and run npx playwright test

but got

Error: browserType.launch: 
     Looks like you launched a headed browser without having a XServer running.

Have anyone faced this issue? Thanks for your help.

I have created a docker image using the following Dockerfile

FROM mcr.microsoft./playwright:v1.33.0-jammy

# Install Xvfb
RUN apt-get update && \
    apt-get install -y xvfb x11-apps x11-xkb-utils libx11-6 libx11-xcb1

# Set the work directory for the application
WORKDIR /app

# Set the environment path to node_modules/.bin
ENV PATH /app/node_modules/.bin:$PATH

# Install NVM
RUN curl -o- https://raw.githubusercontent./nvm-sh/nvm/v0.39.0/install.sh | bash
# Activate NVM
SHELL ["/bin/bash", "-c"]
ENV NVM_DIR=/root/.nvm
RUN source $NVM_DIR/nvm.sh && nvm --version
# Install Node.js version 16.18.0
RUN source $NVM_DIR/nvm.sh && nvm install 16.18.0
# Set Node.js version 16.18.0 as the default
RUN source $NVM_DIR/nvm.sh && nvm alias default 16.18.0
# COPY the needed files to the app folder in Docker image
COPY . /app/
# Install the dependencies in Node environment
RUN source $NVM_DIR/nvm.sh && nvm use 16.18.0 && npm ci

I have playwright tests on my project, with headless: false in playwright.config and I want to run them on the container based on Microsoft's image. I installed XQuartz using brew install --cask xquartz and allowed connections from network clients and run xhost +localhost, gave docker desktop access to /tmp/.X11-unix. as in Running Playwright inside Docker containers

On XQuartz, I run:

docker run --rm \
        --name e2e-on-docker-container \
        -e HTTPS=false \
        -e DISPLAY=host.docker.internal:0 \
        -it -p 3000:3000 \
        -v /tmp/.X11-unix:/tmp/.X11-unix \
        e2e-on-docker-image /bin/bash

to create the container

I run npm start and run npx playwright test

but got

Error: browserType.launch: 
     Looks like you launched a headed browser without having a XServer running.

Have anyone faced this issue? Thanks for your help.

• javascript
• reactjs
• docker
• testing
• playwright

• 1 xvfb-run npx playwright test Refer this doc playwright.dev/docs/next/ci#running-headed – Barney Commented May 8, 2023 at 11:17
• 2 Thanks @Barney, I tried it but unfortunately doesn't work. – Khaled Taymour Commented May 11, 2023 at 9:35

2 Answers 2

I will provide a brief summary of what you can read in my article on Medium - Docker for QAs: Standardizing Your Tests with Playwright

I remend following these steps:

1 - Create a folder named .devcontainer.

2 - Create a Dockerfile and add the following content:

# Use a imagem base do Playwright
FROM mcr.microsoft./playwright:v1.43.0-focal


RUN hwclock --hctosys || true


RUN apt-get update && apt-get install -y software-properties-mon \
    && curl -fsSL https://download.docker./linux/ubuntu/gpg | apt-key add - \
    && add-apt-repository "deb [arch=amd64] https://download.docker./linux/ubuntu $(lsb_release -cs) stable" \
    && apt-get install -y docker-ce-cli \
    && curl -o- https://raw.githubusercontent./nvm-sh/nvm/v0.38.0/install.sh | bash \
    && export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" \
    && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" \
    && nvm install 20.11.1


RUN npm install -g npm@latest


RUN apt-get install -y libgtk-3-0 libx11-xcb1 libxposite1 libxcursor1 libxdamage1 libxi6 libxtst6 libnss3 libxrandr2 libasound2 libpangocairo-1.0-0 libatk1.0-0 libatk-bridge2.0-0 libepoxy0 libgbm-dev libxshmfence1


SHELL ["/bin/bash", "-c"]


WORKDIR /workspace


COPY package.json package-lock.json ./
RUN npm ci && npx playwright install


EXPOSE 3000


CMD ["sleep", "infinity"]

3 - Create a docker-pose.yml file and add the following content:

version: '3.8'

services:
  playwright:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - ..:/workspace
      - /var/run/docker.sock:/var/run/docker.sock
      - /tmp/.X11-unix:/tmp/.X11-unix
    environment:
      - DISPLAY=${DISPLAY}
      - NVM_DIR=/root/.nvm
    ports:
      - "3000:3000"
    mand: /bin/bash -c "sleep infinity"
    tty: true

4 - Run the mand:

cd .devcontainer

docker-pose -f docker-pose.yml up -d --build

5 - Run the mand:

docker exec -it <nome-do-container> /bin/bash

As above, but I did have to do an extra step of allowing the container access to the server (I think that's the right way to say it?). I am using arch linux and I had to do this step of running xhost +local:docker.