Pending Requests Puppeteer
| Introduction
| Installation
| Usage
| Contribute |
Introduction
Pending Requests Puppeteer is a tool that detect when there are HTML requests not yet finished. You can use it to have an HTML request count or to wait for all HTTP requests to be finished.
Installation
To install with yarn :
yarn add @mailbutler/pending-requests-puppeteer -D
To install with npm :
npm install @mailbutler/pending-requests-puppeteer --save-dev
Usage
wait for all requests requests to be finished
const puppeteer = require('puppeteer');
const { PendingRequests } = require('pending-requests-puppeteer');
const browser = await puppeteer.launch({
headless: true,
args,
});
const page = await browser.newPage();
const pendingRequests = new PendingRequests(page, 'xhr');
await page.goto(`http://page-with-xhr`);
await pendingRequests.waitForAllRequestsFinished();
Get the number of pending requests
const puppeteer = require('puppeteer');
const { PendingRequests } = require('pending-requests-puppeteer');
const browser = await puppeteer.launch({
headless: true,
args,
});
const page = await browser.newPage();
const pendingRequests = new PendingRequests(page, 'xhr');
await page.goto(`http://page-with-xhr`);
console.log(pendingXHR.pendingRequestCount());
Usage with Promise.race
If you need to wait for HTTP requests, but not longer than a specific time, you can race pending-requests-puppeteer and setTimeout
in a Promise.race
.
const puppeteer = require('puppeteer');
const { PendingRequests } = require('pending-requests-puppeteer');
const browser = await puppeteer.launch({
headless: true,
args,
});
const page = await browser.newPage();
const pendingRequests = new PendingRequests(page, 'xhr');
await page.goto(`http://page-with-xhr`);
await Promise.race([
pendingRequests.waitForAllRequestsFinished(),
new Promise(resolve => {
setTimeout(resolve, 1000);
}),
]);
console.log(pendingRequests.pendingRequestCount());
Wait for all xhr triggered by all the events of the page
You can use this lib to wait for xhr triggered by any event from the UI (click, typing, ...).
Exemple :
const pendingRequests = new PendingRequests(page, 'xhr');
await page.goto(`http://page-with-xhr`);
await page.click('.my-selector');
await pendingRequests.waitForAllRequestsFinished();
await page.click('.my-selector2');
await pendingRequests.waitForAllRequestsFinished();
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 requests triggered by an event of the page
with waitOnceForAllRequestsFinished
you can wait until all the HTTP requests are finished and them remove the listeners.
This is usefull when waitForAllRequestsFinished
has a leaking behaviour for you.
Exemple :
const pendingRequests = new PendingRequests(page, 'xhr');
await page.goto(`http://page-with-xhr`);
await page.click('.my-selector');
await pendingRequests.waitOnceForAllRequestsFinished();
Contribute
git clone https://github.com/mailbutler/pending-requests-puppeteer.git
cd pending-requests-puppeteer
yarn
yarn test
Merge requests and issues are welcome.