Browser testing

4 minute read

With CloudBees CodeShip Pro you have many different options to set up browser testing. The following sections describe how you can install different browsers. Please check the documentation for the language/framework you are using for specifics on how to test with your browser.

Xvfb

Before going into the details of setting up various browsers make sure to include Xvfb in your build. Running Xvfb before your browser sets up a virtual display the GUI of the various browsers can use.

Add the following to your Dockerfile to make sure Xvfb is properly started. If you use a non-Debian based Linux distribution please install the Xvfb package through the available package manager.

RUN apt-get install -y xvfb
# The server will listen for connections as server number 1 and screen 0 will be depth 16 1600x1200 Xvfb :1 -screen 0 1600x1200x16 & export DISPLAY=:1.0

Now you can start any browser that needs a screen available.

Chrome

To get the latest version of Google Chrome simply install it from their Debian repository in your Dockerfile. Additionally you need to install ChromeDriver if you want to use Selenium with Chrome.

# Starting from Ubuntu Xenial FROM ubuntu:xenial # We need wget to set up the PPA, Xvfb to have a virtual screen and unzip to extract ChromeDriver RUN apt-get update RUN apt-get install -y wget xvfb unzip # Set up the Chrome PPA RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - RUN echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list # Update the package list and install Chrome RUN apt-get update RUN apt-get install -y google-chrome-stable # Set up ChromeDriver environment variables ENV CHROMEDRIVER_VERSION 2.30 ENV CHROMEDRIVER_DIR /chromedriver # Download and install ChromeDriver RUN mkdir $CHROMEDRIVER_DIR RUN wget -q --continue -P $CHROMEDRIVER_DIR "http://chromedriver.storage.googleapis.com/$CHROMEDRIVER_VERSION/chromedriver_linux64.zip" RUN unzip $CHROMEDRIVER_DIR/chromedriver* -d $CHROMEDRIVER_DIR # Put ChromeDriver into the PATH ENV PATH $CHROMEDRIVER_DIR:$PATH

Now Chrome is installed in your path and available to use for any of your browser tests.

Headless Chrome

Beginning in Google Chrome 59, you can run Chrome in headless mode. To take advantage of this be sure your Dockerfile is using ChromeDriver 2.30 or greater. Your application will also need to pass the headless and disable-gpu flags to Chrome. You can also remove Xvfb as it is not needed for headless mode. See this example repository for more information.

Firefox

There are two ways to install Firefox in your Dockerfile. Either through the available package manager or by downloading it directly from Mozilla. At first we’re going to install it through the available package manager. Add the following to your Dockerfile:

# Starting from Ubuntu Xenial FROM ubuntu:xenial RUN apt-get update RUN apt-get install -y xvfb firefox

Now the Firefox version installed from your package manager will be available. As this sometimes doesn’t fit the exact version of Firefox you want to use you can instead download and install a specific version. We will still install Firefox through the package manager as this makes sure all necessary libraries are installed. We will set the PATH to use our specific version of Firefox though.

# Starting from Ubuntu Xenial FROM ubuntu:xenial # We need wget to download the custom version of Firefox, Xvfb to have a virtual screen, bzip2 for extracting and Firefox so all necessary libraries are installed RUN apt-get update RUN apt-get install -y wget xvfb bzip2 firefox # Set up Firefox environment variables ENV FIREFOX_VERSION 50.0 ENV FIREFOX_DIR /firefox # Download and install Firefox RUN wget -q --continue -P $FIREFOX_DIR "https://ftp.mozilla.org/pub/mozilla.org/firefox/releases/${FIREFOX_VERSION}/linux-x86_64/en-US/firefox-${FIREFOX_VERSION}.tar.bz2" RUN tar -xaf $FIREFOX_DIR/firefox* --strip-components=1 --directory $FIREFOX_DIR # Setting the PATH so the custom Firefox version will be used first ENV PATH $FIREFOX_DIR:$PATH

Now Firefox is installed in your path and available to use for any of your browser tests.

Selenium Server

To use the standalone Selenium Server you need to download the Selenium jar file in your Dockerfile.

# Starting from Ubuntu Xenial FROM ubuntu:xenial # We need wget to download Selenium Server and openjdk-8-jdk RUN apt-get update RUN apt-get install -y wget openjdk-8-jdk # Set up Selenium environment variables ENV SELENIUM_PORT 4444 ENV SELENIUM_WAIT_TIME 10 # Download Selenium Server RUN wget -q --continue --output-document /selenium-server.jar "http://selenium-release.storage.googleapis.com/3.4/selenium-server-standalone-3.4.0.jar"

Then as part of your build script you simply start the Selenium Server with the jar file and wait a few seconds for it to properly load.

java -jar /selenium-server.jar -port "${SELENIUM_PORT}" ${SELENIUM_OPTIONS} 2>&1 & sleep "${SELENIUM_WAIT_TIME}" echo "Selenium is now ready to connect on port ${SELENIUM_PORT}"

Notes And Known Issues

Chrome Crashing

If you are seeing Chrome crashing during your tests you may want to try modifying /dev/shm in codeship-services.yml. Try adding the following:

volumes: - /dev/shm:/dev/shm

Pro Resources

If you are seeing consistent unexplained crashes during your tests it could also be a resource issue. Pro comes in different instance sizes that can be configured for more CPU and memory resources. If you suspect this might be an issue, get in touch with us and we can check out the resource utilization for your build and can try out different instance configurations.