Using Puppeteer with Mocha/Jest and Aurelia 2
What is Puppeteer?
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:
- Generate screenshots and PDFs of pages.
- Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. “SSR” (Server-Side Rendering)).
- Automate form submission, UI testing, keyboard input, etc.
- Capture a timeline trace of your site to help diagnose performance issues.
- Test Chrome Extensions.
What browsers are supported?
After version 3.0, Puppeteer supports
Firefox in addition to the
Puppeteer, Mocha & Aurelia 2 (Typescript) integration
How to set it up is as follows:
1- Run the following command in your terminal
2- Make your
Custom Aurelia 2 App with these options
- Mocha + Chai
Cypress for e2e testing, we will set
Puppeteer up soon!
3- Install the following Node packages
4- Create the
ts_hook.js file beside
tsconfig.json in the root folder then copy the below snippet code into it.
As you see, you can use
project option to define a separated
tsconfig just for using E2E test instead of defining
compilerOptions but the most important thing to consider is set
commonjs otherwise you will get an Cannot use import statement outside a module error (Does not matter choose which one).
my-app.e2e.ts file inside
test folder and copy the following code
This code is a very simple and classic sample to start using Puppeteer. (Not related to Aurelia)
package.json and append the below script to
As you see, we have filtered the files in
test folder that ends with
.e2e.ts for E2E testing and using Puppeteer.
7- To run tests, execute the below command.
Puppeteer, Jest & Aurelia 2 (Typescript) integration