CodeBuild での Angular テスト

Takahiro Iwasa (岩佐孝浩)

2020年5月4日

2 min read

Angular CodeBuild

この記事は、公開後3年以上が経過しています。

Angular アプリケーションは、 Headless Chrome を使用して CodeBuild でテストできます。¹

Getting Started with Headless Chrome | Blog | Chrome for Developers

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

重要なポイントは、 --browsers=ChromeHeadless オプション（35行目）で、これにより Chrome を起動せずにテストできます。このオプションを指定しない場合、以下のエラーが発生するはずです。

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

https://aws.amazon.com/blogs/devops/how-to-run-headless-front-end-tests-with-aws-cloud9-and-aws-codebuild/ ↩

Footnotes