Mocking API Through Browser DevTools
Sometimes, as a test engineer, it is time to examine new features of standard, seemingly familiar tools.
For decades, to mock API responses for UI testing, QA engineers used special proxies and interceptors like Charles, Fiddler, Proxyman, Requestly, or HTTP Toolkit; even Postman has acquired similar functionality.
Under «mocking» API responses, I figuratively mean all kinds of overriding of different parts of HTTP requests and responses. This is a very important and useful tool by itself, which helps to test, prototype, and develop the frontend.
Today, browsers have started to provide the ability to override HTTP responses out of the box, straight from DevTools, without any third-party extensions. This is very convenient, especially if you do not have the opportunity or desire to install and deal with a new tool for a one-time occasion.
Currently, only Chrome (and other Chromium-based browsers) and Safari have such a feature, but I hope Firefox will implement it someday, too. Chrome has started to support overrides since the 117 version, which was released in September 2023 — more than a year ago, but I was surprised when a vast number of colleagues around did not know about this feature. And Safari (WebKit) has been supporting overriding since around 2020!
I will give an example of overriding HTTP response bodies in both cases: Chrome DevTools and Safari Web Inspector. I took the OpenWeather website and its API as a sample because their client-server interaction is very clear.
Chrome
Open DevTools and go to the Network tab. Choose a resource you want to override, right-click it, and select [Override content].
Chrome will first ask you to select a directory to store override files.
After you grant access to it, Chrome will redirect you to the Sources tab.
Here, you can edit the JSON body just in the DevTools!
After the page refresh, the response body of the resource will be overwritten by the new data.
In the screenshot above, you can see the implausible weather values that turned out to be overwritten by the new data. This data is saved in a file in the selected folder.
Chrome DevTools documentation: Override web content and HTTP response headers locally.
Safari
Open Web Inspector and go to the Sources tab. Click [+] and select [Local Override…].
In the Local Overrides section, you can fill the popover’s inputs with the corresponding values to override the required HTTP resource. In the Type field, choose Resonse > [File] to override the response’s body.
In my experience, filling all the fields correctly from scratch is quite tricky, and the difficulty varies from site to site. The easiest way to make an override rule for response is to find a required HTTP resource and choose [Create Response Local Override].
It creates a fully prefilled popover to override the response. In the last step, you need to select a file where you saved the new response body in advance.
After the page refresh, the response body of the resource will be overwritten by the chosen file’s contents.
In the screenshot above, you can see the implausible weather values that turned out to be overwritten from the file.
WebKit documentation: Local Overrides.