Angular Testing on CodeBuild

Takahiro Iwasa

May 4, 2020

1 min read

Angular CodeBuild

Angular applications can be also tested on CodeBuild ¹ with Headless Chrome.

developer.chrome.com

Getting Started with Headless Chrome  |  Blog  |  Chrome for Developers

Getting started with Headless Chrome

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g @angular/cli
      # Install puppeteer as a dev dependency
      - npm i -D puppeteer
      - npm i -D @angular-devkit/build-angular
      # Print out missing libs
      - echo "Missing Libs" || ldd ./node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome | grep not
      # Upgrade apt
      - apt-get upgrade
      # Update libs
      - apt-get update
      # Install apt-transport-https
      - apt-get install -y apt-transport-https
      # Use apt to install the Chrome dependencies
      - apt-get install -y libxcursor1
      - apt-get install -y libgtk-3-dev
      - apt-get install -y libxss1
      - apt-get install -y libasound2
      - apt-get install -y libnspr4
      - apt-get install -y libnss3
      - apt-get install -y libx11-xcb1
      # Print out missing libs
      - echo "Missing Libs" || ldd ./node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome | grep not
      # Install project dependencies
      - npm install
  build:
    commands:
      - echo Testing started on `date`
      - ng test --watch=false --browsers=ChromeHeadless

The key point is the --browsers=ChromeHeadless option (line 35), which allows testing without launching Chrome. If this option is not specified, you may encounter the following error.

[1889:1889:0502/194708.787545:ERROR:browser_main_loop.cc(1512)] Unable to open X display.