Running UI Test on Docker

Continuous integration tools spin up generic linux system to build and run tests. It’s essential to have a Docker image that comes with dependencies such as JDK, maven, and the web browser if we are running UI test in the system.

There are public images that come with JDK and Maven, and we can make the Dockerfile to download and install the latest web browser.

FROM maven:3-jdk-11

# install chrome browser
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
RUN apt-get -y update
RUN apt-get install -y google-chrome-stable

Once the Docker image is built, we can run the test like this.

> docker run -v `pwd`:/home -w=/home <docker_image> sh -c "mvn test -DbrowserOptions=headless"

It was going to be easy except that I faced two challenges. First, I was using an Apple’s M1 macbook and the CI environment wasn’t going to like if I align the architecture to arm64v8. Two, some UI pages crashed in headless mode (I tried with Google Finance page for the sample test and had to drop it due to this issue). The first challenge can be tackled by debugging the image on the CI environment straight away, skipping the local test on developer environment. If you face troubles running your test in headless mode, probably it’s time to use remote client platforms like BrowserStack or LambdaTest.

If you are satisfied with just a chrome browser for your coverage, someone already created a public Docker image that comes with JDK, Maven, and Chrome. If you have Docker desktop running in your environment, right after you clone the Krinder repo, you can run the test like below.

> docker pull markhobson/maven-chrome
> docker run -v `pwd`:/home -w=/home markhobson/maven-chrome sh -c "mvn test -DbrowserOptions=headless"