Angular E2E with Puppeteer Node CI

This article describes how to configure continuous integration for Angular applications to automatically execute their tests.

There are examples for Bitbucket Pipelines and CircleCI.

  1. Install puppeteer as a dev dependency
  2. Configure webdriver
  3. Configure Karma in Angular 2+ app to use puppeteer for CI
  4. Configure Protractor in Angular 2+ app to use puppeteer for CI
  • Configure BitBucket pipelines
  • Configure CircleCI
    • IE11 on CI
  • Fast match of versions

1. Install puppeteer as a dev dependency

The first step is to decide which Chromium version (Chrome Browser) you want to use for tests.

Not all version are supported. You need to check puppeteer versions first. At the moment of writing the article puppeteer version 15.3.x works with the version 103.x of Chromium (Chrome Browser). Let’s proceed with it.

npm install --save-dev 'puppeteer@~15.3.0'

2. Configure webdriver

Another news is that the webdriver also needs a specific version of the chromedriver to work with the chosen Chromium.

We need to go to chromedriver downloads and to choose a version that supports 103.x. At the moment of writing the article it is ChromeDriver 103.0.5060.53.

To configure it we need to edit package.json and add there a postinstall script.

{
  "scripts": {
    "postinstall": "webdriver-manager update --versions.chrome 103.0.5060.53 --gecko=false"
  }
}

The next step is to disable automatic updates of the webdriver when we’re executing e2e tests. For that we need to add --webdriver-update=false flag to e2e script in package.json.

{
  "scripts": {
    "e2e": "ng e2e --webdriver-update=false"
  }
}

3. Configure Karma in Angular 2+ app to use puppeteer for CI

Update src/karma.conf.js with the next changes.

// important to add
process.env.CHROME_BIN = require('puppeteer').executablePath();

module.exports = function(config) {
  config.set({
    // ...
    customLaunchers: {
      // you can define a browser configuration, 
      // then simply copy the whole section
      ChromeCi: {
        base: 'ChromeHeadless',
        flags: [
          '--headless',
          '--disable-gpu',
          '--window-size=800,600',
          // important to add
          '--no-sandbox',
          // important to add
          '--disable-dev-shm-usage',
        ],
      },
    },
    // ...
  });
};

4. Configure Protractor in Angular 2+ app to use puppeteer for CI

Update e2e/protractor.conf.js with the next changes.

exports.config = {
  // ...
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: [
        '--headless',
        '--disable-gpu',
        '--window-size=800,600',
        // important to add
        '--no-sandbox',
        // important to add
        '--disable-dev-shm-usage',
      ],
      // important to add
      binary: require('puppeteer').executablePath(),
    },
  },
  // ...
};

Configure BitBucket pipelines

Let’s assume you want to use puppeteer with node v20.9.0 on bookworm, which means base image is node:20.9.0-bookworm, then you only need to replace node with satantime/puppeteer-node.

An example of bitbucket-pipelines.yml how to run unit and e2e tests:

# replace 20.9.0-bookworm here with the version of node you need
image: satantime/puppeteer-node:20.9.0-bookworm

pipelines:
  default:
    - step: &Tests
        name: Tests
        caches:
          - node
        script:
          - npm install
          - npm run postinstall
          # remove --browsers=ChromeCi,
          # if you didn't configure it in karma.conf.js
          - >
            npm run test --
            --browsers=ChromeCi
            --no-watch
            --no-progress
          - npm run e2e
  pull-requests:
    '**':
      - step: *Tests
  branches:
    '**':
      - step: *Tests

Configure CircleCI

Let’s assume you want to use puppeteer with node v20.9.0 on bookworm, which means base image is node:20.9.0-bookworm, then you only need to replace node with satantime/puppeteer-node.

An example of .circleci/config.yml how to run unit and e2e tests.

version: 2.1
jobs:
  build:
    docker:
      # replace 20.9.0-bookworm here with the version of node you need
      - image: satantime/puppeteer-node:20.9.0-bookworm
    steps:
      - checkout
      - restore_cache:
          key: cache
      - run:
          name: Install
          command: |
            if [ ! -d "./node_modules/" ]; then
              npm ci && npm run postinstall
            fi
      - save_cache:
          key: cache
          paths:
            - ./node_modules
      - run:
          name: Unit Tests
          # remove --browsers=ChromeCi,
          # if you didn't configure it in karma.conf.js
          command: >
            npm run test --
            --browsers=ChromeCi
            --no-watch
            --no-progress
      - run:
          name: End to End Tests
          command: npm run e2e

IE11 on CI

CicleCI provides Windows machines, therefore we can use continuous integration to run tests in Internet Explorer 11, if it is needed.

Update src/karma.conf.js with info about IECi in customLaunchers:

module.exports = function(config) {
  config.set({
    // ...
    customLaunchers: {
      // ...
      // Add the definition for IE
      IECi: {
        base: 'IE',
        // important to add
        flags: ['-extoff'],
      },
      // ...
    },
    // ...
  });
};

Then update .circleci/config.yml with a new step for IE:

version: 2.1
orbs:
  # important to add
  windows: circleci/[email protected]
jobs:
  # important to add
  IE:
    executor:
      name: windows/server-2019
      size: medium
      shell: bash.exe
    steps:
      - checkout
      - restore_cache:
          key: cache-
      - run:
          name: NPM Install
          command: |
            if [ ! -d "e2e/a5es5/node_modules/" ]; then
              npm ci --no-optional --ignore-scripts
            fi
      - save_cache:
          key: root-
          paths:
            - ./node_modules
      - run:
          name: Unit Tests
          command: >
            npm run test --
            --browsers=IECi
            --no-watch
            --no-progress
    environment:
      IE_BIN: 'C:\Program Files\Internet Explorer\iexplore.exe'

Fast match of versions

puppeteerchromedriver
15.3.x103.0.5060.53
15.2.x103.0.5060.53
15.1.x103.0.5060.53
15.0.x103.0.5060.53
14.4.x103.0.5060.53
14.3.x103.0.5060.53
14.2.x103.0.5060.53
14.1.x101.0.4951.41
14.0.x101.0.4951.41
13.7.x101.0.4951.41
13.6.x101.0.4951.41
13.5.x99.0.4844.51
13.4.x99.0.4844.51
13.3.x99.0.4844.51
13.2.x99.0.4844.51
13.1.x97.0.4692.71
13.0.x97.0.4692.71
12.0.x97.0.4692.71
11.0.x93.0.4577.63
10.4.x93.0.4577.63
10.2.x93.0.4577.63
10.1.x91.0.4472.19
10.0.x91.0.4472.19
9.1.x91.0.4472.19
9.0.x91.0.4472.19
8.0.x90.0.4430.24
7.1.x90.0.4430.24
7.0.x90.0.4430.24
6.0.x88.0.4324.27
5.5.x88.0.4324.27
5.4.x86.0.4240.22
5.3.x85.0.4183.38
5.2.x85.0.4183.38
5.1.x84.0.4147.30
5.0.x83.0.4103.39
4.0.x83.0.4103.39
3.3.x83.0.4103.39
3.2.x83.0.4103.39
3.1.x83.0.4103.39
3.0.x81.0.4044.69
2.1.x80.0.3987.106
2.0.x79.0.3945.36
1.20.x78.0.3904.105
1.19.x77.0.3865.40
1.17.x76.0.3809.126
1.15.x75.0.3770.140
chromedriver version to puppeteer version match

Feel free to reach to me if you need help.

satanTime

I enjoy absorbing knowledge, sharing it, and helping customers to build solutions which achieve their business goals in the most optimal way.