Search code examples
dockerubuntuplaywright

running PlayWright headed test on dockerized ubuntu with gui

I am trying to run a test with headed mode on ubuntu with GUI on docker container.

I have created an image that's creating a docker image with GUI + VNC so i will able to watch it.

Dockerfile:

# Pull base image.
FROM ubuntu

RUN apt-get update

# Install LXDE and VNC server.
RUN apt-get install -y xvfb
RUN DEBIAN_FRONTEND=noninteractive apt-get install -y lxde-core lxterminal tightvncserver
RUN apt-get install -y xfce4
RUN rm -rf /var/lib/apt/lists/*
RUN touch /root/.Xresources
COPY xstartup /root/.vnc/xstartup
RUN chmod +x /root/.vnc/xstartup

# Define working directory.
WORKDIR /data

COPY * /data

# Install Playwright dependencies
RUN npm install
# # # Install dependencies.
RUN npx @playwright/test install


# Expose ports.
EXPOSE 5901

I am initiating this container using this command:

docker run -it --rm -v /data:/data -p 5901:5901 -e USER=root ubuntudsktp bash -c "vncserver :1 -geometry 1280x800 -depth 24 && tail -F /root/.vnc/*.log"

I am able to log in to the container through VNC successfully, but when I am trying to execute some tests by using this command:

xvfb-run npx playwright test test.spec.js --headed

I can see the test is executed successfully but the browser is not opening in the VNC session.

image

What am I missing here? How can make the test open the browser?

Solution

  • There are a few changes you can make to resolve this issue:

    In your Dockerfile, you are installing both LXDE and XFCE4. You only need one desktop environment, so you can remove one of them.

    Ensure that your xstartup file is correctly configured. Your xstartup file should look like this (assuming you use LXDE, otherwise replace lxsession with startxfce4 for XFCE4):

    #!/bin/sh
xrdb $HOME/.Xresources
xsetroot -solid grey
export XKL_XMODMAP_DISABLE=1
export XDG_CURRENT_DESKTOP="LXDE"
lxsession -s LXDE &

    Optional: Instead of using xvfb-run in your test command, use the DISPLAY environment variable to specify the display to use:

    DISPLAY=:1 npx playwright test test.spec.js --headed

    Make sure to update your Docker container with any changes made to the Dockerfile and xstartup file.