How to test exceptional behavior with Puppeteer? - http

Question

Many have experience with generic automated tests with Puppeteer. This is mostly about imitating user behavior on web pages and asserting results. But what if you need to test representation of errored state, which you cannot (or don’t know how to) trigger by a user action? For example, we have a form. When user submits the app sends a POST request to the server and shows success messages as soon as the server responds with 200 OK. That is the expected behavior. Yet, in real world the server may happened to be down or respond with Internal Error. Imagine the app covers gratefully this case. But how we would reproduce it with Puppeteer?

Answer 1

Given that Puppeteer provides a lot of possibilities on handling HTTP/S requests, I came up with the following solution. While submitting the form I mock the server response with my own.
Basically I set up an interceptor, which replaces the next request matching a given URL fragment with custom server response:
await bs.mockRequest( "response.json", { "GET", "500 Internal Server Error", "application/javascript", "{ \"status\": \"FAIL\" }", [] });
While it’s watching the network, I can submit the form, e.g. by emulating click on the submit button. The following request will be replaced so that the app under test would treat it as in the case of real server error.
Here the source code of the mockRequest:
class BrowserSession {
// obtaining page context from Puppeteer
// #see https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-puppeteerlaunchoptions
async setup( options ) {
this.browser = await puppeteer.launch( options );
this.context = await this.browser.createIncognitoBrowserContext();
this.page = await this.context.newPage();
}
/**
* Intercept and replace request
* #param {String} url - URL substring to match
* #param {Object} newRespond
*/
async mockRequest( url, { method, status, contentType, newBody, headers }) {
const session = await this.page.target().createCDPSession(),
patterns = [ `*${ url }*` ];
await session.send( "Network.enable" );
await session.send( "Network.setRequestInterception", {
patterns: patterns.map( pattern => ({
urlPattern: pattern,
interceptionStage: "HeadersReceived"
}))
});
session.on( "Network.requestIntercepted", async ({ interceptionId, request, responseHeaders, resourceType }) => {
if ( ( method || "GET" ) !== request.method.toUpperCase() ) {
await session.send( "Network.continueInterceptedRequest", { interceptionId });
return;
}
const newHeaders = [
"Date: " + ( new Date() ).toUTCString(),
"Connection: closed",
"Content-Length: " + newBody.length,
"Content-Type: " + contentType,
...headers
];
await session.send( "Network.continueInterceptedRequest", {
interceptionId,
rawResponse: btoa( `HTTP/1.1 ${ status }\r\n`
+ newHeaders.join('\r\n') + '\r\n\r\n' + newBody )
});
session.detach();
});
}
}