Introducing Puppeteer Schematics: Test Your Angular Apps with Ease | by Jecelyn Yeen | Dec, 2023


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

Introducing Puppeteer Angular Schematics

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.

Console window displaying the results of “ng e2e” command, including the new Puppeteer option.

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.


Source link

2023. All Rights Reserved.