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 a angular application. https://www.npmjs.com/package/puppeteer it's the npm installation. But i don't understand how i can use it. For example i just want to make this script :

In a 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

Answer 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.