Nikolay Vitkov from the Puppeteer Team co-authored this blog post.

Puppeteer, a powerful tool for automating browser interactions, is now even easier to integrate with your Angular projects thanks to the newly released @puppeteer/ng-schematics package.

This package provides an out-of-the-box experience for setting up and running Puppeteer tests, minimizing the configuration burden and accelerating your automation journey — especially creating end-to-end tests!

For new projects, integrating Puppeteer is a breeze. Run ng e2e and choose the Puppeteer option. It automatically configures your project for basic testing. This includes setting up a simple test that verifies your project name on the homepage.

Once you set up the above, running again will execute the tests.

If your project already utilizes ng e2e with another library like Protractor, fear not! You can still integrate Puppeteer with the following command:

ng add @puppeteer/ng-schematics

This command preserves your existing ng e2e configuration while installing Puppeteer separately. You can then run your Puppeteer tests with npm run puppeteer.

Here are two more helpful commands in @puppeteer/ng-schematics to speed up your workflow.

• Setting up a new Puppeteer test:

ng generate @puppeteer/ng-schematics:e2e <NewTest>

ng generate @puppeteer/ng-schematics:config

Transitioning from Protractor to Puppeteer for your Angular testing is made easier with our guide on porting existing tests. You can find the detailed steps and considerations in our guide.

The latest release of Puppeteer v21.6.0 brings exciting news. With experimental WebDriver BiDi support, you’ll be able to leverage Puppeteer’s power for cross-browser automation in Chrome, as well as Firefox!

If you haven’t heard about WebDriver BiDi yet, it is a new standard browser automation protocol that comes with lower level control by design, and supports speedy, bi-directional communication.