How to use Puppeteer in an Angular application

Question

My question is simple but I don't understand if it's possible and, in this case, how it's possible.

I would like to use the puppeteer library in an Angular application using the npm package, but I don't understand how I can use it.

For example I just want to make this script :

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

In an Angular component, can somebody help me (it will be able me to understanding a lot of thing).

Thanks in advance, sorry for my bad English, I'm French.

Solution 1

How to use Angular e2e testing with Puppeteer

1) Install Puppeteer

npm install --save-dev puppeteer @types/puppeteer

2) Configure Protractor to use Puppeteer

Edit your protractor.conf.js and add the following inside capabilities:

// ...
const puppeteer = require('puppeteer');

exports.config = {
  // ...
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--headless'],
      binary: puppeteer.executablePath(),
    },
  },
  // ...
};

3) Write and execute your tests

For example, edit your e2e/src/app.e2e-spec.ts and do the following:

import * as puppeteer from 'puppeteer';

describe('workspace-project App', () => {
  it('Test Puppeteer screenshot', async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('http://localhost:4200');
    await page.screenshot({ path: 'example.png' });

    await browser.close();
  });
});

Run your e2e tests using ng e2e. The above example will produce a screenshot of your app home page and save it as example.png.

---

Check the official Puppeteer website for more information about how to write tests.

Solution 2

You can use Puppeteer as a modern smart alternative to Angular Universal for server side rendering and pre-rendering. When using Puppeteer for this purpose, unlike Angular Universal, you don't need to modify your project source code. Using Puppeteer seems significantly easier than Universal.

References:

Headless Chrome: an answer to server-side rendering JS sites

Prerender an Angular application with @angular/cli and puppeteer

Comments

[qtopierw]

Does it work with chromedriver? I met this error: E/launcher - session not created: This version of ChromeDriver only supports Chrome version 74

[txavier]

Doesnt work, I am getting an error, E/launcher - session not created: Chrome version must be between 71 and 75

[Kosala Nuwan Perera]

There's puppeteer-core which is what they recommend to use w/out downloading chromium. There might be differences between browser versions depending on puppeteer-core version. However, the puppeteer full version is guaranteed to work since it downloads the chromium as per the documentation pptr.dev/…

[JavaGeek]

@artificerpi you have to make sure your version of chrome/chromium is compatible with the chromedriver/webdriver version that you are using.

[ps0604]

@Francesco How do you start the Angular/Puppeteer application if I don't want to run any tests, just run a headless browser? is it also ng e2e ?

[Francesco Borzi]

@ps0604 sorry it's been a while I don't use Puppeteer, I can't help you

[Coderer]

One note, don't forget to run webdriver-update after configuring Puppeteer, I had a Chrome version mismatch error until I did this.