Pending ALL Puppeteer

Introduction

Pending ALL Puppeteer is a tool that detect when there is all requests not yet finished. You can use it to have a all requests count or to wait for all all requests to be finished.

Installation

To install with yarn :

yarn add pending-all-puppeteer -D

To install with npm :

npm install pending-all-puppeteer --save-dev

Usage

wait for all all requests to be finished

const puppeteer = require('puppeteer');
const { PendingALL } = require('pending-all-puppeteer');

const browser = await puppeteer.launch({
  headless: true,
  args,
});

const page = await browser.newPage();
const pendingALL = new PendingALL(page);
await page.goto(`http://page-with-all`);
// Here all all requests are not finished
await pendingALL.waitForAllAllFinished();
// Here all all requests are finished

Get the number of pending all

const puppeteer = require('puppeteer');
const { PendingALL } = require('pending-all-puppeteer');

const browser = await puppeteer.launch({
  headless: true,
  args,
});

const page = await browser.newPage();
const pendingALL = new PendingALL(page);
await page.goto(`http://page-with-all`);
console.log(pendingALL.pendingAllCount());
// Display the number of all pending

Usage with Promise.race

If you need to wait alls but not longer than a specific time, You can race pending-all-puppeteer and setTimeout in a Promise.race.

const puppeteer = require('puppeteer');
const { PendingALL } = require('pending-all-puppeteer');

const browser = await puppeteer.launch({
  headless: true,
  args,
});

const page = await browser.newPage();
const pendingALL = new PendingALL(page);
await page.goto(`http://page-with-all`);
// We will wait max 1 seconde for alls
await Promise.race([
  pendingALL.waitForAllAllFinished(),
  new Promise(resolve => {
    setTimeout(resolve, 1000);
  }),
]);
console.log(pendingALL.pendingAllCount());
// May or may not have pending alls

Wait for all all triggered by all the events of the page

You can use this lib to wait for all triggered by any event from the UI (click, typing, ...).

Exemple :

const pendingALL = new PendingALL(page);
await page.goto(`http://page-with-all`);
await page.click('.my-selector'); // This action will trigger some all
// Here all all requests triggered by the click are not finished
await pendingALL.waitForAllAllFinished();
// Here all all requests triggered by the click are finished
// You can then perform an other all producer event
await page.click('.my-selector2'); // This action will trigger some all
// You can rewait them
await pendingALL.waitForAllAllFinished();

This mode is usefull to test SPA, you d'ont have to recreate a new instance at each time. The request listeners will be deleted when you leave the page.

Wait for all all triggered by an event of the page

with waitOnceForAllAllFinished you can wait until all the all are finished and them remove the listeners. This is usefull when waitForAllAllFinished has a leaking behaviour for you.

Exemple :

const pendingALL = new PendingALL(page);
await page.goto(`http://page-with-all`);
await page.click('.my-selector'); // This action will trigger some all
// Here all all requests triggered by the click are not finished
await pendingALL.waitOnceForAllAllFinished();
// Here all all requests triggered by the click are finished
// All pendingALL listeners are remove here too

Contribute

git clone https://github.com/jtassin/pending-all-puppeteer.git
cd pending-all-puppeteer
yarn
yarn test

Merge requests and issues are welcome.