Best way to intercept XHR request on page with Puppeteer and return mock response

Question

I need to be able to intercept XHR requests on page loaded with Puppeteer and return mock responses in order to organize backendless testing for my web app. What's the best way to do this?

Adulterate

Answer 1

Well. In the newest puppeteer,it provide the request.respond() method to handle this situation.

Izard

Great to see that it's now implemented. Marked this as an accepted answer. – Adulterate

There is pptr-mock-server available now to accomplish this. Internally it relies on request interception and request.respond() method. Library is pretty minimal, and may not fit everyone's needs, but it at least provides an example how to implement backendless testing using Puppeteer. – Adulterate

there is a NOTE in doc says "mocking responses for dataURL requests is not supported. calling request.respond for a dataURL request is a noop" – Bondon

Answer 2

It seems that the way to go is request.respond() indeed, but still, I couldn't find a concrete example in the web on how to use it. The way I did it was like this:

// 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();
    }
});

What happens here exactly?

1. Firstly, all requests are intercepted with page.setRequestInterception()
2. Then, for each request I look for the one I am interested in, by matching it by URL with if (request.url() === constants.API) where constants.API is just the endpoint I need to match.
3. If found, I pass my own response with request.respond(), otherwise I just let the request continue with request.continue()

Two more points:

• constants.biddersMock above is an array
• CORS header is important or access to your mock data will not be allowed

Please comment or refer to resources with better example(s).

Chrysler

This is a correct way of doing this. However Access-Control-Allow-Origin is optional and depends on particular setup. – Adulterate

Thanks a lot for confirming this! – Chrysler

Note, request.url is a function, so should be request.url() === constants.API – Headrick

Nice catch. Updated! – Chrysler

I think the content: 'application/json', key should be contentType: "application/json". Docs – Program

Answer 3

If anyone is interested I ended up creating special app build for my testing needs, which adds Pretender to the page. And I communicate with Pretender server using Puppeteer's evaluate method.

This is not ideal, but I couldn't find a way to achieve what I need with Puppeteer only. There is a way to intercept requests with Puppeteer, but seems to be no way to provide fake response for a given request.

UPDATE:

As X Rene mentioned there is now native support for this in Puppeteer v0.13.0 using request.respond() method. I'm going to rewrite my tests to use it instead of Pretender, since this will simplify many things for me.

UPDATE 2:

There is pptr-mock-server available now to accomplish this. Internally it relies on request interception and request.respond() method. Library is pretty minimal, and may not fit your needs, but it at least provides an example how to implement backendless testing using Puppeteer. Disclaimer: I'm an author of it.

Adulterate

do you have some examples on how to use pptr-mock-server? – Vulgar

@Vulgar I planned to work on documentation and some examples next week. Will add to the repository readme. – Adulterate

tks, I'm gonna keep track of the repository... my problem is with resquest.respond method, the response is not getting processed by the app – Vulgar

Answer 4

I created a library that uses Puppeteer's page.on('request') and page.on('response') to record and respond with mocked requests.

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();
})();

Girand

Answer 5

You may want to try out Mockiavelli - request mocking library for Puppeteer. It was build exactly for backendless testing of webapps. It integrates best with jest and jest-puppeteer, but works with any testing library.

Mosemoseley