My goal was to be able to run unit tests from a pipeline for the Angular's "Tour of Heroes" tutorial application which use Karma Jasmine framework. In this case the pipeline was built using Tekton to deploy to a Red Hat OpenShift cluster.
Step 1: Change Karma Browser Configuration to use Headless Chromium
Launching the unit tests locally was not an issue because I had Chrome installed locally, but in order to get this to work in a pipeline we need to switch to a Headless browser configuration. This can be accomplished by updating karma.conf.js as follows. This configuration prunes all interactivity, not all of these settings are necessary, but these will work both locally and from the pipeline task:
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browserNoActivityTimeout: 30000,
browsers: ['ChromiumHeadlessNoSandbox'],
customLaunchers: {
ChromiumHeadlessNoSandbox: {
base: 'ChromiumHeadless',
flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-translate', '--disable-extensions', '--remote-debugging-port=9223']
}
},
singleRun: true,
restartOnFileChange: false
Step 2: Add Puppeteer to the project
With these changes the local tests were running headless successfully, however they were still failing because they still need a browser binary downloaded. Our pipeline was using the ubi8/nodejs-12 image to run npm tasks. All of the npm tasks (e.g. install, lint, build) were running successfully, except for the test task. One easy solution would have been to install chromium into a modified image using a Dockerfile with ubi8/nodejs-12 as the base. Unfortunately the chrome download url was not whitelisted from the pipeline server and could not go that route.
This led us to using puppeteer. Puppeteer is a node library which allows you to test using headless chromium. One of the features that we needed is that it downloads the chromium binary.
Step 2.1: Add puppeteer as a dev dependency
Puppeteer can be easily added as a development dependency by adding it to package.json within devDependencies section:
"puppeteer": "^9.1.0",
Step 2.2: Export download host for puppeteer
This may not be an issue locally, but in case npm install gets stuck downloading puppeteer, this can be addressed by adding this download host environment variable prior to running npm install (ensure this is added to the pipeline task as well):
export PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors
Step 2.3: Update karma configuration to use puppeteer
Update karma.conf.js with the following changes:
- Require puppeteer
- Export the path to the Chromium executable
- Wait for chromium to launch (i.e. to ensure it is downloaded if applicable)
const puppeteer = require('puppeteer');
process.env.CHROMIUM_BIN = puppeteer.executablePath();
(async () => {
const browser = await puppeteer.launch({
args: ['--no-sandbox', '--disable-setuid-sandbox'],
});
})();
Step 3: Add required Linux libraries to ubi8 image
To troubleshoot this error the following commands were instrumental:
Command #1 (from troubleshooting puppeteer)
This command will help troubleshoot which libraries are missing in one shot versus adding one library at a time and getting a different error. You can get the path to local-chromium by echoing the output of puppeteer.executablePath() - it should be very similar to the one below except for the linux version number:
ldd /workspace/source/node_modules/puppeteer/.local-chromium/linux-869685/chrome-linux/chrome | grep not
Command #2 (from troubleshooting puppeteer)
The second command that was helpful was to run yum whatprovides on each missing library from the Dockerfile building the custom image. The only caveat is that in a few cases what provides resolved to the i686 library and that did not provide the missing library instead I had to switch to the x86_64 library version.
yum what provides libnss3.so
Magic Dockerfile
The hardest part of this task was to arrive to the correct Dockerfile. After iterating through the commands above, we arrived to the right dockerfile what allowed Puppeteer running headless chromium successfully:
FROM registry.access.redhat.com/ubi8/nodejs-12:latest
USER root
RUN yum install -y alsa-lib.x86_64 atk.x86_64 cups-libs.x86_64 gtk3.x86_64 \
libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 \
libXext.x86_64 libXi.x86_64 libXrandr.x86_64 libXScrnSaver.x86_64 \
libXtst.x86_64 pango.x86_64 xorg-x11-fonts-Type1 libdrm-2.4.101-1.el8.x86_64 \
mesa-libgbm-20.1.4-1.el8.x86_64 libxshmfence-1.3-2.el8.x86_64 nss.i686 \
&& yum update -y && yum clean all
USER 1001
Hopefully this guides saves some time for others trying to get this to work on a ubi8 image!
