Get XHR response (network traffic) and parse it in Katalon Studio

How can I read an XHR response and parse it in Katalon Studio?

I currently use a workaround way of testing responsiveness of my app: I use various waitForElement_*_() (*=visible, clickable, present, not-visible, not-clickable, not-present) commands in order to measure loading time of various elements.

I would like to get more specific and measure the duration of network requests (that can be seen in DevTools - network traffic).

Can it be done?

In Katalon 7 and with and with Chrome DevTools Protocol Integration plugin, as was described here you can intercept network requests.

The following example shows how to mock search requests in Wikipedia so that the result will always be “Katalon Studio”.

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.github.kklisura.cdt.protocol.commands.Fetch as Fetch
import com.github.kklisura.cdt.protocol.commands.Page as Page
import com.github.kklisura.cdt.services.ChromeDevToolsService as ChromeDevToolsService
import com.katalon.cdp.CdpUtils as CdpUtils
import com.kms.katalon.core.util.internal.Base64 as Base64
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject as TestObject

WebUI.openBrowser('')
ChromeDevToolsService cdts = CdpUtils.getService()
Page page = cdts.getPage()
Fetch fetch = cdts.getFetch()
fetch.onRequestPaused({ def requestIntercepted ->
    String interceptionId = requestIntercepted.getRequestId()
    String url = requestIntercepted.getRequest().getUrl()
    boolean isMocked = url.contains('api.php')
    String response = '["Katalon Studio",["Katalon Studio"],["Katalon Studio is an automation testing solution developed by Katalon LLC."],["https://en.wikipedia.org/wiki/Katalon_Studio"]]'
    String rawResponse = Base64.encode(response)
    System.out.printf('%s - %s%s', isMocked ? 'MOCKED' : 'CONTINUE', url, System.lineSeparator())
    if (isMocked) {
        fetch.fulfillRequest(interceptionId, 200, new ArrayList(), rawResponse, null)
    } else {
        fetch.continueRequest(interceptionId)
    }
})

fetch.enable()
page.enable()
WebUI.navigateToUrl('https://en.wikipedia.org/wiki/Main_Page')
TestObject searchInput = new TestObject().addProperty('css', ConditionType.EQUALS, '#searchInput')
TestObject containing = new TestObject().addProperty('xpath', ConditionType.EQUALS, "//div[div[contains(.,'containing...')]]")
WebUI.setText(searchInput, 'Intercept request')
WebUI.waitForElementVisible(containing, 10)

NOTES:

Original post on Katalon forum: https://forum.katalon.com/t/intercepting-request-with-chrome-devtools-protocol/36081.

Sample project used in this topic: https://github.com/katalon-studio-samples/katalon-studio-chrome-devtools-protocol-plugin-samples.

The plugin uses https://github.com/kklisura/chrome-devtools-java-client to connect to CDP.