Introducing Puppeteer Schematics: Test Your Angular Apps with Ease
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!
Quick setup for new project
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.
Integrate with your existing project
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-schematicsThis command preserves your existing ng e2e configuration while installing Puppeteer separately. You can then run your Puppeteer tests with npm run puppeteer.
Create a test and customize configuration
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>- Creating a Puppeteer configuration file for customization (e.g. changing the default cache directory):
ng generate @puppeteer/ng-schematics:configMigrating from Protractor
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.
Sneak peek: Cross-browser automation with Firefox
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.
Resources
- Learn more about Puppeteer Angular Schematics? Take a look at our full documentation.
- Encountered a bug? Submit an issue on the official Puppeteer issues tracker.
