Implementation:Puppeteer Puppeteer NgSchematics E2E

Property	Value
sources	packages/ng-schematics/src/schematics/e2e/index.ts
domains	Angular Schematics, E2E Test Generation, Code Scaffolding
last_updated	2026-02-12 00:00 GMT

Overview

Description

The NgSchematics E2E module implements an Angular schematic for generating individual E2E test specification files within an Angular project that has been set up with Puppeteer. It is invoked via the ng generate @puppeteer/ng-schematics:e2e command (or its alias ng generate @puppeteer/ng-schematics:test).

The schematic performs the following operations:

1. Parses user arguments, mapping shorthand flags (-p for project, -n for name, -r for route)
2. Locates the target Angular project from angular.json
3. Reads the test runner configuration and port from the project's Puppeteer builder configuration
4. Generates a test spec file using the appropriate template for the configured test runner
5. The file extension is .test for Node test runner and .e2e for all others

The schematic reads the testRunner and port settings from the project's existing Puppeteer builder configuration in angular.json, looking under either the e2e or puppeteer architect target.

Usage

This schematic is used after the initial ng add @puppeteer/ng-schematics setup to generate additional E2E test files for specific pages or routes in the application.

Code Reference

Source Location

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

Signature

export function e2e(userArgs: Record<string, string>): Rule;

Import

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

I/O Contract

Inputs

Parameter	Short Flag	Type	Description
name	-n	string	Name of the test spec file to generate
project	-p	string	Target Angular project name (defaults to the project with root "")
route	-r	string	Application route to test (leading "/" is stripped)

Outputs

Output	Type	Description
Generated file	E2E spec file	Test file created at e2e/tests/{name}.{ext}.ts using the configured test runner template
Rule	Rule	Angular schematic Rule that modifies the project Tree

Configuration Lookup

Source	Path	Properties Read
angular.json	projects.{name}.architect.e2e or projects.{name}.architect.puppeteer	testRunner, port

Usage Examples

// Generate a new E2E test spec
// ng generate @puppeteer/ng-schematics:e2e --name=login --route=auth/login

// Using shorthand flags
// ng generate @puppeteer/ng-schematics:e2e -n login -r auth/login -p my-app

// This generates a file like: e2e/tests/login.e2e.ts (or login.test.ts for Node runner)

// Generated test file example (Jest runner)
import * as puppeteer from 'puppeteer';

describe('Login', () => {
  let browser: puppeteer.Browser;
  let page: puppeteer.Page;

  beforeAll(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should navigate to auth/login', async () => {
    const baseUrl = process.env['baseUrl'] || 'http://localhost:4200/';
    await page.goto(`${baseUrl}auth/login`);
  });
});

Related Pages

• Environment:Puppeteer_Puppeteer_Node_18_Runtime