Puppeteer: how to listen for http responses until you get to the right one?

Question

Goal: I am writing a Puppeteer test which needs to listen for a certain response, check that the response url is of a certain format, and then save the response so that the values in the body can be used later.

Current code: Suppose we have a const teacherId. Right now my code looks like this:

await page.goto(`url/teacher-profile/${teacherId}`);

// eslint-disable-next-line jest/valid-expect-in-promise
const teacherPromise = page
      .waitForResponse(
        response =>
          response.url().includes(`/teacher-profile/teachers/${teacherId}`) &&
          response.status() === 200,
      )
      .then(res => res.json());

const teacher = await teacherPromise;

The problem: This works great... at finding the first http response. But I know that the http response I am looking for will take a little longer. It is always the 4th-6th response in the network tab when I load the page manually.

What I've tried: I have tried changing the teacherPromise to call page.on('request', ...) but it still only caught the first request. I briefly considered putting the promise in a for-loop, but that seemed messy.

Any suggestions appreciated!

Answer 1

I don't think you can do that only by firing a goto and checking the url. If you want to access the request time-line (like we usually do from the network tab) I believe you will need page tracing please take a look at : https://pptr.dev/#?product=Puppeteer&version=v10.0.0&show=api-pagetracing

If that is not what you are looking for try to post more info about your question like which response would that be once you open the page maybe a screenshot form the network tab.