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.