Aller au contenu principal

Puppeteer in Angular Projects – Complete Guide

1. What is Puppeteer?​

Puppeteer is a Node.js library developed by Google for controlling Chrome and Chromium via the Chrome DevTools Protocol (CDP).
It’s not a full "testing framework" like Playwright or Cypress — it’s more of a browser automation toolkit you can use for:

  • E2E testing
  • Web scraping
  • Performance auditing
  • PDF/image generation

By default, Puppeteer runs headless, but you can run it in full browser mode too.

2. Why Use Puppeteer?​

Benefits:​

  • Direct control of Chrome/Chromium with full DevTools access.
  • Very fast for Chrome-only testing.
  • Low-level automation — full access to browser features beyond E2E.
  • Good for non-testing tasks like scraping, screenshots, PDF creation.
  • Small API surface compared to bigger frameworks.

3. When to Choose Puppeteer​

  • You only need to test in Chrome/Chromium.
  • You need custom browser control beyond typical testing (e.g., simulating network failures, performance profiling).
  • You want lightweight automation without a big test runner.
  • You’re building browser tooling or scraping utilities.

4. How to Use Puppeteer in Angular​

Step 1 – Install Puppeteer​

Using Angular CLI schematics:

ng add @puppeteer/ng-schematics

This will:

  • Install puppeteer.
  • Create example test scripts.
  • Add e2e target to angular.json.

Manual install:

npm install -D puppeteer

(Puppeteer will automatically download a compatible Chromium binary.)

Step 2 – Understand Project Structure​

After adding Puppeteer, you might see:

e2e/
  example.spec.js     # Example test
puppeteer.config.js   # Optional custom config

Step 3 – Writing a Test​

Example (e2e/appTest.js):

const puppeteer = require('puppeteer');

describe('Angular App', () => {
  it('should display welcome message', async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto('http://localhost:4200');
    const text = await page.$eval('h1', el => el.textContent);
    expect(text).toContain('Welcome');
    await browser.close();
  });
});

Step 4 – Running Tests​

Run via Angular CLI:

ng e2e

Or directly with Node:

node e2e/appTest.js

Step 5 – Debugging & Advanced Features​

  • Run in headed mode: 
    const browser = await puppeteer.launch({ headless: false, slowMo: 50 });
  • Take screenshots: 
    await page.screenshot({ path: 'screenshot.png' });
  • Generate PDFs: 
    await page.pdf({ path: 'page.pdf', format: 'A4' });
  • Intercept network requests: 
    await page.setRequestInterception(true);
    page.on('request', req => req.abort());

Step 6 – Angular-Specific Tips​

  • Serving the app: Puppeteer doesn’t start Angular automatically.
    Run:

    ng serve

    in one terminal, then run your Puppeteer script in another.

  • Waiting for Angular elements:
    Use Puppeteer’s wait methods:

    await page.waitForSelector('#my-element');

7. Puppeteer CLI Commands​

CommandDescription
node <file>.jsRun Puppeteer script
npx puppeteer browsers install chromeInstall Chrome binary
npx puppeteer browsers uninstall chromeRemove Chrome binary

8. When Puppeteer Might Not Be Ideal​

  • If you need cross-browser testing (only supports Chrome/Chromium).
  • If you want a full test runner with built-in assertions, retries, and parallelism (you’ll need to pair Puppeteer with Jest, Mocha, etc.).
  • If you need Safari or Firefox coverage.

9. Summary​

Puppeteer is great if:

  • You’re testing or automating Chrome/Chromium only.
  • You need fine-grained browser control for non-standard use cases.
  • You want a lightweight automation tool.

It’s less ideal if you want a complete cross-browser E2E solution.