pending-xhr-puppeteer - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #go #docker #nodejs #awesome #cli #ios #mcp #openai #open-source

pending-xhr-puppeteer

(★ 276)

Small tool to wait that all xhr are finished in puppeteer

파일 탐색기

최종 버전 다운로드 (.zip)

- - test.yml
- - index.test.ts
- index.ts
.editorconfig
.eslintrc.json
.gitignore
.npmignore
CHANGELOG.md
jest.config.js
jest.setup.ts
LICENSE
package-lock.json
package.json
prettier.config.js
README.md
renovate.json
rollup.config.js
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/jtassin/pending-xhr-puppeteer

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd pending-xhr-puppeteer

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn add pending-xhr-puppeteer -D

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm install pending-xhr-puppeteer --save-dev

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn test

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Pending XHR Puppeteer

[![npm version](https://badge.fury.io/js/pending-xhr-puppeteer.svg)](https://badge.fury.io/js/pending-xhr-puppeteer)
[![Build Status](https://travis-ci.org/jtassin/pending-xhr-puppeteer.svg?branch=master)](https://travis-ci.org/jtassin/pending-xhr-puppeteer)

<p align="center">
  | <b><a href="#introduction">Introduction</a></b>
  | <b><a href="#installation">Installation</a></b>
  | <b><a href="#usage">Usage</a></b>
  | <b><a href="#contribute">Contribute</a></b> |
</p>

## Introduction

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

## Installation

To install with yarn :

```bash
yarn add pending-xhr-puppeteer -D
```

To install with npm :

```bash
npm install pending-xhr-puppeteer --save-dev
```

## Usage

### wait for all xhr requests to be finished

```javascript
const puppeteer = require('puppeteer');
const { PendingXHR } = require('pending-xhr-puppeteer');

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

const page = await browser.newPage();
const pendingXHR = new PendingXHR(page);
await page.goto(`http://page-with-xhr`);
// Here all xhr requests are not finished
await pendingXHR.waitForAllXhrFinished();
// Here all xhr requests are finished
```

### Get the number of pending xhr

```javascript
const puppeteer = require('puppeteer');
const { PendingXHR } = require('pending-xhr-puppeteer');

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

const page = await browser.newPage();
const pendingXHR = new PendingXHR(page);
await page.goto(`http://page-with-xhr`);
console.log(pendingXHR.pendingXhrCount());
// Display the number of xhr pending
```

### Usage with Promise.race

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

```javascript
const puppeteer = require('puppeteer');
const { PendingXHR } = require('pending-xhr-puppeteer');

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

const page = await browser.newPage();
const pendingXHR = new PendingXHR(page);
await page.goto(`http://page-with-xhr`);
// We will wait max 1 seconde for xhrs
await Promise.race([
  pendingXHR.waitForAllXhrFinished(),
  new Promise(resolve => {
    setTimeout(resolve, 1000);
  }),
]);
console.log(pendingXHR.pendingXhrCount());
// May or may not have pending xhrs
```

## 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 :

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

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 xhr triggered by an event of the page

with `waitOnceForAllXhrFinished` you can wait until all the xhr are finished and them remove the listeners.
This is usefull when `waitForAllXhrFinished` has a leaking behaviour for you.

Exemple :

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

## Contribute

```bash
git clone https://github.com/jtassin/pending-xhr-puppeteer.git
cd pending-xhr-puppeteer
yarn
yarn test
```

Merge requests and issues are welcome.