Recently we migrated from xvfb to headless chrome for end-to-end tests written using protractor. This post talks about what all things you need to take care of when migrating and what all you need to fix.

Check Versions Compatibility:

To start with, you should check the versions compatibility:

• protractor’s compatibility with chromedriver version
• protractor’s compatibility with selenium driver versions
• selenium’s compatibility with chrome browser versions

Our Older tests configuration looked something like:

1. Protractor: v4.0.7
2. Browser: Firefox v47.0 (with firefox driver)
3. Selenium standalone server: v2.53.0
4. protractor-jasmine2-screenshot-reporter: v0.3.2

We used Circle CI for build pipelines. Circle CI comes with following by default:

1. Ubuntu: v14.04
2. Google Chrome: v54
3. Java: v1.7

We started with upgrading the drivers and browser and our newer configuration looked something like:

1. Protractor: v5.2.2
2. Browser: Chrome v63.0
3. Chromedriver version: v2.34.0
4. Selenium standalone server: v3.8.1
5. protractor-jasmine2-screenshot-reporter: v0.5.0

Note: We went through multiple rounds of check and came up with the above final drivers list that works.

 

Versions upgrade:

• Drivers update can be done via webdriver-manager which is a selenium and driver manager for e2e tests:

webdriver-manager update --gecko false --versions.standalone 3.8.1 --versions.chrome 2.34

• Fix java version in Circle CI (added following in circle.yaml setup file):

machine:
 java:
 version: oraclejdk8

• Updating Google Chrome as headless support starts from v59 (reference):

apt-get update && apt-get -y install libxss1 libappindicator1 libindicator7
curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
dpkg -i ./google-chrome*.deb
apt-get install -yf

The last step above was added which actually helped installing dependencies and then installing chrome.

• Protractor configuration change was pretty straightforward:

"chromeOptions" : { 
    "args": [
      'headless'
    ]
  }

• Start selenium server: When you fix versions using webdriver-manager, you need to forcefully start those specific versions as mentioned here which would start the selenium server in background:

webdriver-manager start --versions.standalone 3.8.1 --versions.chrome 2.34 &

And, then finally, we were able to start our tests with:

protractor ./protractor_conf.js

 

Memory Issue – Circle CI

We were able to successfully run our tests with the above configurations but we had issues of Chrome crashing in Circle CI saying “session/chrome not available”. We discovered that this was due to limited size of /dev/shm given to Circle CI docker.

Solution: We created up a separate docker image for our end-to-end tests :

#install jdk8 in circle ci
FROM openjdk:8

ARG NODE_ENV

# replace shell with bash so we can source files
RUN rm /bin/sh && ln -s /bin/bash /bin/sh

# update the repository sources list
# and install dependencies
RUN apt-get update \
    && apt-get install ssh git ca-certificates curl build-essential -y \
    && apt-get -y clean autoclean \
    && apt-get -y autoremove \
  && rm -rf /var/lib/apt/lists/*

# nvm environment variables
ENV NVM_DIR /usr/local/nvm
ENV NODE_VERSION 6.10.1
ENV browser chrome
ENV insomnia true


# install nvm
# https://github.com/creationix/nvm#install-script
RUN curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | bash

RUN ls /usr/local/nvm
# install node and npm
RUN source $NVM_DIR/nvm.sh \
    && nvm install $NODE_VERSION \
    && nvm alias default $NODE_VERSION \
    && nvm use default

# add node and npm to path so the commands are available
ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
ENV PATH $NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH

# confirm installation
RUN node -v && npm -v
ADD ./ /test
WORKDIR /test
#chrom setup instructions
RUN sh ./setupChrome.sh
ADD ./runE2E.sh /runE2E.sh
RUN npm install
RUN ./node_modules/protractor/bin/webdriver-manager clean
RUN ./node_modules/protractor/bin/webdriver-manager update --gecko false --versions.standalone 3.8.1 --versions.chrome 2.33
RUN chmod +x /runE2E.sh

CMD ["/bin/bash", "/runE2E.sh"]

Dockerfile:

• java installation achieved via command: FROM openjdk:8
• moved the chrome installation instructions to separate file  which is setupChrome.sh
• runE2E.sh contained start of drivers and running tests:

#!/usr/bin/env bash
export PATH=$PATH:./node_modules/.bin
./node_modules/protractor/bin/webdriver-manager start --gecko false --versions.standalone 3.8.1 --versions.chrome 2.33 &
echo "*** Run script for e2e tests"
gulp e2e

The protractor configuration had to be updated to run from root:

"chromeOptions" : { 
    "args": [
      'headless',  '--no-sandbox'
    ]
  }

Finally, we build and spin up a docker image:

docker build -t app/e2e:latest .
docker run -v $HOME/tmp-shm:/dev/shm -i -t app/e2e

 

Build Artefacts:

Last concern was around the artefacts: CircleCI used to store artefacts but only within docker context. The doc around mounting folders in CircleCI v2.0 helped us here:

docker build -t app/e2e:latest .
docker run -v $HOME/tmp-shm:/dev/shm --name app-e2e -i -t app/e2e
docker cp app-e2e:/output ${CIRCLE_TEST_REPORTS}/

 

And finally, all done!!  🙂