web-dev-qa-db-fra.com

Meilleur moyen d'intercepter la demande XHR à la page avec Puppeteer et de renvoyer une réponse factice

Je dois être en mesure d'intercepter les demandes XHR sur une page chargée avec Puppeteer et de renvoyer des réponses factices afin d'organiser des tests sans backend pour mon application Web. Quelle est la meilleure façon de procéder?

automated-testspuppeteer
14
s.ermakovich

Il semble que le chemin à parcourir est en effet request.respond(), mais je n'ai toujours pas trouvé d'exemple concret sur le Web sur la façon de l'utiliser. La façon dont je l'ai fait était comme ceci:

// Intercept API response and pass mock data for Puppeteer
await page.setRequestInterception(true);
page.on('request', request => {
    if (request.url() === constants.API) {
        request.respond({
            content: 'application/json',
            headers: {"Access-Control-Allow-Origin": "*"},
            body: JSON.stringify(constants.biddersMock)
        });
    }
    else {
        request.continue();
    }
});

Que se passe-t-il ici exactement?

  1. Tout d'abord, toutes les requêtes sont interceptées avec page.setRequestInterception()
  2. Ensuite, pour chaque demande, je recherche celle qui m'intéresse, en la faisant correspondre par URL avec if (request.url() === constants.API) où constants.API Est juste le point final que je dois faire correspondre.
  3. S'il est trouvé, je passe ma propre réponse avec request.respond(), sinon je laisse simplement la demande continuer avec request.continue()

Deux points supplémentaires:

  • constants.biddersMock Ci-dessus est un tableau
  • L'en-tête CORS est important ou l'accès à vos données factices ne sera pas autorisé

Veuillez commenter ou vous référer aux ressources avec de meilleurs exemples.

19
Kostas Siabanis

Si quelqu'un est intéressé, j'ai fini par créer une application spécialement conçue pour mes besoins de test, ce qui ajoute Pretender à la page. Et je communique avec le serveur Pretender en utilisant la méthode evaluate de Puppeteer.

Ce n'est pas idéal, mais je n'ai pas pu trouver un moyen de réaliser ce dont j'ai besoin avec Puppeteer uniquement. Il existe un moyen d'intercepter les demandes avec Puppeteer, mais il semble qu'il n'y ait aucun moyen de fournir une fausse réponse pour une demande donnée.

MISE À JOUR:

Comme X Rene mentionné il y a maintenant un support natif pour cela dans Puppeteer v0.13.0 en utilisant la méthode request.respond () . Je vais réécrire mes tests pour l'utiliser à la place de Pretender, car cela simplifiera beaucoup de choses pour moi.

MISE À JOUR 2:

Il y a pptr-mock-server disponible maintenant pour accomplir cela. En interne, il repose sur l'interception des requêtes et la méthode request.respond () . La bibliothèque est assez minimale et peut ne pas répondre à vos besoins, mais elle fournit au moins un exemple sur la façon d'implémenter des tests backendless à l'aide de Puppeteer. Avertissement: j'en suis l'auteur.

5
s.ermakovich

J'ai créé une bibliothèque qui utilise page.on('request') et page.on('response') de Puppeteer pour enregistrer et répondre avec des requêtes simulées.

https://github.com/axiomhq/puppeteer-request-intercepter

npm install puppeteer-request-intercepter

const puppeteer = require('puppeteer');

const { initFixtureRouter } = require('puppeteer-request-intercepter');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Intercept and respond with mocked data.
  const fixtureRouter = await initFixtureRouter(page, { baseUrl: 'https://news.ycombinator.com' });
  fixtureRouter.route('GET', '/y18.gif', 'y18.gif', { contentType: 'image/gif' });

  await page.goto('https://news.ycombinator.com', { waitUntil: 'networkidle2' });
  await page.pdf({ path: 'hn.pdf', format: 'A4' });

  await browser.close();
})();
0
cdeutsch