Selecting / detecting given element from DevTools Network tab?

kevin.jackey · October 16, 2023, 1:04pm

We have several scripts designed to track various page timings, but are having challenges getting accurate readings off some of the “continuously tracked” items such as LCP.

We know that our LCP values stabilize after a particular Network element fires, we could add a console statement that Katalon could detect (per the solution mentioned in Capture chrome console logs and network when i run my test suite and validate downloaded excel sheet) but we’d rather keep the console as clean as possible.

Does Katalon have a way to detect when a particular element has been found in the DevTools Network Tab?

kazurayam · October 17, 2023, 12:16am

I don’t think Katalon Studio is capable of it. You should choose other tools.

Rational

You need a tool that enables you to utilize Chrome DevTools Protocol (CDP for short) / DOM domain and/or Network domain.

There are a few candidates

there could be more, I don’t know.

Katalon Studio works on Selenium3, it does not work on Selenium4. Therefore you can not utilize the CDP features in Katalon Studio.

If I were you, I would look at Playwright as it seems implementing the CDP natively.

kazurayam · October 17, 2023, 12:38am

@Brandon_Hein told us that we can utilize the MutationObserver in JavaScript to monitor a given HTML element. You can do it using JavascriptExecutor.executScript(string) which is available in Selenium 3.

You can try this approach in Katalon Studio.

However, you can not design your code in this approach as Event-driven. Your code in Katalon Studio will never be able to “listen” to the changes of HTML elements in browser. All your Test Case in Katalon Studio can do is to request Browser to execute a javascript snippet to retrieve the current DOM snapshot and respond it back. A Test Case would be able to repeat snapping and detect the changes in the DOM, but the code will be hardly readable.

In Playwright, you code will be designed natively in Event-driven manner, which is suitable to trace the changes of HTML elements.

kevin.jackey · October 17, 2023, 11:19am

It looks like there’s a Selenium 4 alpha for Katalon, may try that as well

kazurayam · October 17, 2023, 1:24pm

O’Reilly book Hands-On Selenium WebDriver with Java by Boni Garcia, Chapter 5 contains quite good introduction how to use Selenium 4 with JUnit5 + Gradle for utilizing the Chrome DevTools Protocol.

For example, the following sample code shows how to listen to the message stream of the Console in the Chrome DevTools.

github.com

bonigarcia/selenium-webdriver-java/blob/master/selenium-webdriver-junit5/src/test/java/io/github/bonigarcia/webdriver/jupiter/ch05/cdp/ConsoleListenerJupiterTest.java

/*
 * (C) Copyright 2021 Boni Garcia (https://bonigarcia.github.io/)
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
package io.github.bonigarcia.webdriver.jupiter.ch05.cdp;

import static java.lang.invoke.MethodHandles.lookup;
import static org.slf4j.LoggerFactory.getLogger;

This file has been truncated. show original

I would recommend you to start with it.

ralphvanderhorst · October 20, 2023, 4:19pm

[quote=“kazurayam, post:6, topic:99475”]
I created a lot of wrappers in javascript, but for Katalon I think it is also possible to create nice keywords to listen to devtools Example is this one, listening to the xhrs

package com.devtools

import org.openqa.selenium.WebDriver
import org.openqa.selenium.chrome.ChromeDriver
import org.openqa.selenium.devtools.DevTools
import org.openqa.selenium.devtools.v118.network.Network
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

class DevToolsNetworkMonitor {

    @Keyword
    def monitorXHR() {
        WebDriver driver = DriverFactory.getWebDriver()

        if (!(driver instanceof ChromeDriver)) {
            throw new UnsupportedOperationException("This method supports only ChromeDriver")
        }

        DevTools devTools = ((ChromeDriver) driver).getDevTools()
        devTools.createSession()

        // Enable network tracking
        devTools.send(Network.enable(null, null, null))

        // Add a listener for when a response is received
        devTools.addListener(Network.responseReceived()) { response ->
            if (response.getType() == Network.ResourceType.XHR) {
                println("XHR URL: " + response.getResponse().getUrl())
                println("XHR Status: " + response.getResponse().getStatus())
               
            }
        }

       
        WebUI.navigateToUrl('https://example.com')

        // xhrwaiter implementation to wait for the response in a website

        // Cleanup (optional)
        devTools.send(Network.disable())
    }
}

Why this can be handy. To do a validation sanity check on a website if the apis calls of the website after deploy have still 200 responses. Will do a blog post with a working example regarding this later.

kevin.jackey · October 20, 2023, 4:42pm

Interesting, will give this a try!

ralphvanderhorst · October 21, 2023, 12:40am

ralphvanderhorst:

    def monitorXHR() {
        WebDriver driver = DriverFactory.getWebDriver()

        if (!(driver instanceof ChromeDriver)) {
            throw new UnsupportedOperationException("This method supports only ChromeDriver")
        }

        DevTools devTools = ((ChromeDriver) driver).getDevTools()
        devTools.createSession()

        // Enable network tracking
        devTools.send(Network.enable(null, null, null))

        // Add a listener for when a response is received
        devTools.addListener(Network.responseReceived()) { response ->
            if (response.getType() == Network.ResourceType.XHR) {
                println("XHR URL: " + response.getResponse().getUrl())
                println("XHR Status: " + response.getResponse().getStatus())
               
            }
        }

       
        WebUI.navigateToUrl('https://example.com')

        // xhrwaiter implementation to wait for the response in a website

        // Cleanup (optional)
        devTools.send(Network.disable())
    }
}

I was not aware, due to the fact i did not use the katalon product for a while that it is underlying architecture is still selenium 3. Then this custom keyword wrapper which I build will not work when starting a chromebrowser. maybe it is possible to setup selenium 4 grid, but then still the api calls to use the grid are selenium 3 configured in Ks. We need to or use a customlib or wait for a selenium 4 version of katalon studio

kazurayam · October 21, 2023, 12:47am

This single line is quite problematic even for Katalon Studio v8.2.1-alpha

kazurayam · October 21, 2023, 12:59am

I guess @ralphvanderhorst needed a jar to resolve the import statement for the org.openqa.selenium.devtools.v118.network.Network package.

That is it: https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-devtools-v118

@ralphvanderhorst somehow found the URL of this page, downloaded the jar and deployed it into the classpath of hist project.

@kevin.jackey needs to do the same.

kazurayam · October 21, 2023, 1:12am

I would warn you.

As you are well aware, Chrome browser continues evolving very fast. Chrome will be upgraded to v119, v120, soon … as Chrome for Testing availability shows these beta versions are already there. And when Chrome browser is upgraded, the Selenium4 project will add more new Maven Repositories in future

selenium-devtools-v119
selenium-devtools-v120
…

This means that @ralphvanderhorst and @kevin.jackey have to change the jar in the project’s classpath as soon as Chrome is upgraded and a new selenium-devtools-vXXX jar is released. They have to continue manual management of the selenium-devtools’ jar. It’s just troublesome.

kazurayam · October 21, 2023, 1:15am

This process of dependency management is very annoying. Katalon Studio is not capable of managing the external dependecy like this.

I personally hate that the way the Selenium4 project took : continue adding new selenium-devtools-vXXX repositories as Chrme browser upgrades. This way makes it impossible for the clients (UI testers) to automate managing the external dependencies.

Therefore I do not like to use Selenium4 to utilize the Chrome DevTools Protocol. I would rather take other test tools that supports CDP in JavaScript/TypeScript. Playwright does not annoy me in external dependencies management as Selenium4 does.

kazurayam · October 21, 2023, 3:21am

Chrome for Testing Chrome for Testing: reliable downloads for browser automation - Chrome for Developers could be a clue to work around the difficulty of dependency management for the selenium-devtools-xxx.jar

You should stop using the Chrome browser with autoupdate=yes, and you should start using the Chrome for Testing with the fixed version (for example, v118). Then you can stay with a fixed version of selenium-devtools-v118 jar, you would not be annoyed by the upgrades of Chrome for browsing.

ralphvanderhorst · October 21, 2023, 4:29am

Agree, you need to repackage it, but like I also mentioned, devtools works seemless with selenium 4, not with the current version which is supported in Katalon studio. I thought yesterday night I easily get it to work, but was not aware that it supports still selenium 3.x. I had problems recognizing the browser chrome. I got stuck on this, and highly like due to the version deviation!

function call

import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.testobject.ObjectRepository.findWindowsObject
import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testng.keyword.TestNGBuiltinKeywords as TestNGKW
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.windows.keyword.WindowsBuiltinKeywords as Windows
import internal.GlobalVariable as GlobalVariable
import org.openqa.selenium.Keys as Keys
import devtools.monitordevtools
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI


WebUI.openBrowser('https://Auction.com') // Replace with your actual URL


def monitorTool = new monitordevtools()

// Assuming you want to start monitoring right after the page loads
monitorTool.monitorXHR()

custom keyword

package devtools

import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.webui.driver.DriverFactory
import org.openqa.selenium.WebDriver
import org.openqa.selenium.chrome.ChromeDriver
import org.openqa.selenium.remote.RemoteWebDriver
import org.openqa.selenium.devtools.DevTools
import org.openqa.selenium.devtools.v118.network.Network

public class monitordevtools {

	@Keyword
	def monitorXHR() {
		WebDriver driver = DriverFactory.getWebDriver()
		ChromeDriver chromeDriver = null

		println("Driver class: " + driver.getClass().getName())
		
		if (driver instanceof com.kms.katalon.core.webui.driver.SmartWaitWebDriver) {
			WebDriver wrappedDriver = ((com.kms.katalon.core.webui.driver.SmartWaitWebDriver) driver).getWrappedDriver()
			if (wrappedDriver instanceof ChromeDriver) {
				chromeDriver = (ChromeDriver) wrappedDriver
			} else if (wrappedDriver instanceof RemoteWebDriver && "chrome".equals(((RemoteWebDriver) wrappedDriver).getCapabilities().getBrowserName())) {
				throw new UnsupportedOperationException("Monitoring XHR is not supported when running tests remotely with Chrome on Selenium Grid")
			}
		} else if (driver instanceof ChromeDriver) {
			chromeDriver = (ChromeDriver) driver
		} else {
			throw new UnsupportedOperationException("This method supports only ChromeDriver")
		}

		if (chromeDriver == null) {
			throw new IllegalStateException("ChromeDriver instance is null. This shouldn't happen.")
		}

		// Get the current URL
		String currentUrl = chromeDriver.getCurrentUrl()

		DevTools devTools = chromeDriver.getDevTools()
		devTools.createSession()

		// Enable network monitoring
		devTools.send(Network.enable())

		// Set up a request listener to monitor XHR based on the current URL
		devTools.addListener(Network.requestWillBeSent()) { request ->
			if (request.getRequest().getUrl().contains(currentUrl) && request.getRequest().getMethod().equals("GET")) { // Adjust depending on the condition you're looking for
				println("Detected an XHR request for the current URL: " + request.getRequest().getUrl())
			}
		}
	}
}

=============== ROOT CAUSE =====================

For trouble shooting, please visit: https://docs.katalon.com/katalon-studio/docs/troubleshooting.html

================================================

10-21-2023 06:28:22 AM Test Cases/testje

Elapsed time: 11.695s
Error…

Test Cases/testje FAILED.

Reason:

groovy.lang.MissingMethodException: No signature of method: com.kms.katalon.selenium.driver.CChromeDriver.getDevTools() is applicable for argument types: () values:

at devtools.monitordevtools.monitorXHR(monitordevtools.groovy:40)

at devtools.monitordevtools$monitorXHR.call(Unknown Source)

at testje.run(testje:29)

at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)

at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)

at

kazurayam · October 21, 2023, 4:50am

Will Katalon Studio become operational on top of Selenium 4 in future? — I am negative.

One more factor : Selenium 4 deprecated the concept of “Desired Capability”

7. Deprecation of Desired Capabilities
Desired Capabilities were primarily used in the test scripts to define the test environment (browser name, version, operating system) for execution on the Selenium Grid.
In Selenium 4, capabilities objects are replaced with Options. This means testers now need to create an Options object, set test requirements, and pass the object to the Driver constructor.
Listed below are the Options objects to be used going forward for defining browser-specific capabilities:

Firefox – FirefoxOptions

Chrome – ChromeOptions

Internet Explorer (IE) – InternetExplorerOptions

Microsoft Edge – EdgeOptions

Safari – SafariOptions

I guess, the deprecation of Desired Capability has significant impacts to the Katalon Studio’s code base internally. Katalon Studio has implemented quote a lot of features for “Desired Capability”, for example:

https://docs.katalon.com/docs/create-tests/manage-projects/project-settings/desired-capabilities/set-up-desired-capabilities-for-webui-testing-in-katalon-studio

I think, Katalon Stuido is so much dependent on Selenium3’s Desired Capability that they would not be able to move to Selenium4.

I doubt if the projects created by users on Selenium3 (current Katalon Studio) can be migrated to be operational on Selenium4.