Implementation:Puppeteer Puppeteer NgSchematics NgAdd

Property	Value
sources	packages/ng-schematics/src/schematics/ng-add/index.ts
domains	Angular Schematics, Project Setup, Package Management
last_updated	2026-02-12 00:00 GMT

Overview

Description

The NgSchematics NgAdd module implements the ng add @puppeteer/ng-schematics schematic, which is the primary entry point for integrating Puppeteer E2E testing into an Angular project. It performs a comprehensive setup by chaining five schematic rules:

1. addDependencies -- Resolves and adds required npm packages to package.json as dev dependencies, then triggers npm install with allowScripts: true to enable Puppeteer's post-install browser download hook. Dependencies vary by test runner:
   • All runners: puppeteer
   • Jasmine: jasmine
   • Jest: jest, @types/jest
   • Mocha: mocha, @types/mocha
   • Node: @types/node
2. addCommonFiles -- Generates common test infrastructure files (base test configuration, tsconfig for e2e) using schematic templates
3. addOtherFiles -- Generates test runner-specific configuration files (e.g., jest.config.js, .mocharc.js, jasmine.json)
4. updateScripts -- Adds an e2e or puppeteer script to package.json
5. updateAngularConfig -- Registers the @puppeteer/ng-schematics:puppeteer builder in angular.json with dev server target and test runner configuration

The default port for the development server is 4200.

Usage

This schematic is the first step in setting up Puppeteer for E2E testing in an Angular project. It is invoked once per project and handles all necessary configuration.

Code Reference

Source Location

packages/ng-schematics/src/schematics/ng-add/index.ts

Signature

export function ngAdd(options: SchematicsOptions): Rule;

Import

// Used as an Angular schematic rule factory
// Invoked via: ng add @puppeteer/ng-schematics
import {ngAdd} from '@puppeteer/ng-schematics/schematics/ng-add';

I/O Contract

Inputs

Parameter	Type	Description
options	SchematicsOptions	Schematic options including testRunner (TestRunner enum) and optional flags

Operations Performed

Step	Target File(s)	Operation
addDependencies	package.json	Adds puppeteer and test runner packages as dev dependencies
addCommonFiles	e2e/ directory	Generates base test files and tsconfig
addOtherFiles	e2e/ directory	Generates test runner-specific configuration
updateScripts	package.json	Adds e2e or puppeteer npm script
updateAngularConfig	angular.json	Registers the Puppeteer builder with serve target

Dependencies by Test Runner

Test Runner	Packages Added
Jasmine	puppeteer, jasmine
Jest	puppeteer, jest, @types/jest
Mocha	puppeteer, mocha, @types/mocha
Node	puppeteer, @types/node

Usage Examples

// Add Puppeteer with Jest test runner
// ng add @puppeteer/ng-schematics --test-runner jest

// Add Puppeteer with Mocha test runner
// ng add @puppeteer/ng-schematics --test-runner mocha

// Add Puppeteer with Node built-in test runner
// ng add @puppeteer/ng-schematics --test-runner node

// Default (Jasmine) test runner
// ng add @puppeteer/ng-schematics

// Resulting angular.json configuration
{
  "projects": {
    "my-app": {
      "architect": {
        "e2e": {
          "builder": "@puppeteer/ng-schematics:puppeteer",
          "options": {
            "devServerTarget": "my-app:serve",
            "testRunner": "jest"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-app:serve:production"
            }
          }
        }
      }
    }
  }
}

Related Pages

• Environment:Puppeteer_Puppeteer_Node_18_Runtime