Here I published the sample code
Problem to solve
In the Console tab you find a line
This is the output of
However, we UI testers still want to read the output of
console.log() in the automated UI test scripts. Is there any feasible approach?
How to solve it
Chrome DevTools Protocol (a.k.a. CDP) supports ConsoleAPICalled interface. The Chrome browser supports CDP fully. If we can utilize CDP in Katalon Studio Test Case, it would be possible to transfer the
console.log() messages from Chrome browser to the test script.
Also FireFox browser provides Remote Debugging Protocol which supports the subset of CDP.
To me it seems that major browser vendors (Google, Mozilla) are willing to support some remote interfaces like CDP in addition to the W3C WebDrvier standard. I think that CDP is worth studying.
You can see a working sample Test case:
Let me copy the partial source and paste here for easier reference:
When I ran this test case, I saw following output in the Katalon Log View:
... 2021-01-14 16:46:05.220 DEBUG testcase.Listen to Console log - 11: navigateToUrl("http://demoaut-mimic.kazurayam.com/") 2021-01-14 16:46:05.796 INFO com.kms.katalon.core.util.KeywordUtil - >>>LOG content script: Katalon Waiter v.2 is up and running ! 2021-01-14 16:46:06.845 INFO com.kms.katalon.core.util.KeywordUtil - >>>LOG 2021/1/14 7:46:6 ...
This web page called ‘console.log()’ twice, and emitted 2 messages:
>>>LOG content script: Katalon Waiter v.2 is up and running !
>>>LOG 2021/1/14 7:46:6
The sample simply prints the messages. But you can process the messages in more sophisticated way as you like.
You need to install the “Chrome DevTools Protocol Integration” plugin into your local Katalon Studio. It is avaliable fre at https://store.katalon.com/product/144/Chrome-DevTools-Protocol-Integration. This plugin wraps the library kklisura/Chrome DevTools Java Client and bridges it to Katalon Studio.
I tested this project using Katalon Studio version 7.6.6.