Implementation:Puppeteer Puppeteer NgSchematics Builder

Property	Value
sources	packages/ng-schematics/src/builders/puppeteer/index.ts
domains	Angular Builder, E2E Testing, Test Orchestration
last_updated	2026-02-12 00:00 GMT

Overview

Description

The NgSchematics Builder module implements an Angular CLI builder that orchestrates end-to-end testing with Puppeteer in Angular projects. It is registered as the @puppeteer/ng-schematics:puppeteer builder and handles the complete E2E test lifecycle: compiling TypeScript tests, starting a development server, running the test suite, and reporting results.

The builder supports four test runners through the TestRunner enum:

• Jasmine -- Configured via jasmine.json
• Jest -- Configured via jest.config.js
• Mocha -- Configured via .mocharc.js
• Node -- Uses Node.js built-in test runner with --test flag

The build process follows these steps:

1. Compile E2E tests using tsc -p e2e/tsconfig.json
2. Start the Angular development server (or use a provided baseUrl)
3. Execute the test runner with the base URL passed as an environment variable
4. Report success/failure with styled terminal output
5. Clean up by stopping the development server

Usage

This builder is automatically configured in angular.json when @puppeteer/ng-schematics is added to an Angular project. It can be invoked via ng e2e or ng run project:puppeteer.

Code Reference

Source Location

packages/ng-schematics/src/builders/puppeteer/index.ts

Signature

export function getCommandForRunner(runner: TestRunner): [string, ...string[]];

export default createBuilder<PuppeteerBuilderOptions>(executeE2ETest);

Import

// Typically used via Angular CLI builder registration in angular.json
// Direct import:
import {getCommandForRunner} from '@puppeteer/ng-schematics/builders/puppeteer';

I/O Contract

Builder Options (PuppeteerBuilderOptions)

Option	Type	Description
devServerTarget	string	Angular target string for the dev server (e.g., "my-app:serve")
testRunner	TestRunner	Test runner to use (Jasmine, Jest, Mocha, Node)
port	number (optional)	Port override for the dev server
baseUrl	string (optional)	Direct base URL; skips dev server startup if provided

Test Runner Commands

Runner	Command	Config
Jasmine	jasmine --config=./e2e/jasmine.json	e2e/jasmine.json
Jest	jest -c e2e/jest.config.js	e2e/jest.config.js
Mocha	mocha --config=./e2e/.mocharc.js	e2e/.mocharc.js
Node	node --test --test-reporter spec e2e/build/**/*.e2e.js	Built-in Node.js test runner

Outputs

Return	Type	Description
result	BuilderOutput	{success: true} on test pass, {success: false, error: string} on failure

Usage Examples

// angular.json configuration (auto-generated by ng-add schematic)
{
  "projects": {
    "my-app": {
      "architect": {
        "e2e": {
          "builder": "@puppeteer/ng-schematics:puppeteer",
          "options": {
            "devServerTarget": "my-app:serve",
            "testRunner": "jest"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-app:serve:production"
            }
          }
        }
      }
    }
  }
}

// Running e2e tests via Angular CLI
// ng e2e
// ng run my-app:e2e
// ng run my-app:puppeteer

// Programmatic usage of getCommandForRunner
import {getCommandForRunner} from '@puppeteer/ng-schematics/builders/puppeteer';
import {TestRunner} from '@puppeteer/ng-schematics/schematics/utils/types';

const command = getCommandForRunner(TestRunner.Jest);
// => ['jest', '-c', 'e2e/jest.config.js']

Related Pages

• Environment:Puppeteer_Puppeteer_Node_18_Runtime