CodeBuild での Angular テスト

CodeBuild での Angular テスト

Takahiro Iwasa
Takahiro Iwasa
2 min read
Angular CodeBuild

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

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.

Footnotes

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

Takahiro Iwasa

Takahiro Iwasa

Software Developer at KAKEHASHI Inc.
Involved in the requirements definition, design, and development of cloud-native applications using AWS. Now, building a new prescription data collection platform at KAKEHASHI Inc. Japan AWS Top Engineers 2020-2023.