How can I get the HTML style value?

Does anyone know how to get the HTML style attribute value?

I’m basically trying for the test to get the following color hash value but whatever i tried, i’m only getting null

1 Like


I have never seen a HTML instance that has the <html> element with a style attribute. This is my first time to see such HTML in any books, in any web pages. This is exceptional! Is it legal or not? I am not sure.

I could see this part:

This proves that the browser is capable to understand the style attribute of the <html> element. Therefore, in theory, selenium tests should be able to retrieve the value of style attribute of the <html> element. But I have never tried it.

I wouldn’t suprised to see anything curious about the style attribute of the <html> element.

1 Like

Hi @ashraf.madina, I used your posting to show you what I have done in the past…
Not sure it’s what your looking for…
You can paste this into a new test case and run, (the test objects are created in memory with CSS).
It will open this posting and check to see what the ‘Class’ and ‘Style’ attributes are…
Once you have the attributes you can work with them anyway you choose.

import org.openqa.selenium.By
import org.openqa.selenium.WebDriver
import com.kms.katalon.core.model.FailureHandling
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI


WebDriver driver = DriverFactory.getWebDriver()

//Uses by.cssSelector
def classCssLocator = '[Class*="desktop-view"]'
TestObject classAttribute = WebUI.convertWebElementToTestObject(driver.findElement(By.cssSelector(classCssLocator)))
def newclassAttribute = WebUI.getAttribute(classAttribute, 'class')
println("newclassAttribute: " + newclassAttribute)

//Uses by.cssSelector
def styleCssLocator = '[Class*="desktop-view"]'
TestObject styleAttribute = WebUI.convertWebElementToTestObject(driver.findElement(By.cssSelector(styleCssLocator)))
def newStyleAttribute = WebUI.getAttribute(styleAttribute, 'style')
println("styleAttribute: " + newStyleAttribute)

if (WebUI.verifyEqual(newStyleAttribute.contains('header'), true, FailureHandling.OPTIONAL)) {
} else if (WebUI.verifyEqual(newStyleAttribute.contains('offset'), true, FailureHandling.OPTIONAL)) {
} else {

May be the following post would help:

You may want to try to get the computed style of <body> element. I guess the result would contain a key-value pair of ['--color-primary': '#27db34']

1 Like

Ya… I think it’s an html template so there’s a config to set different color theme.
I tried same method as getting CSS value or attributes of web elements…but this is something I wasn’t able to figure out

1 Like

@kazurayam There’s no great mystery here. The HTML <html> element supports Global attributes; style is a global attribute.

Here is this forum page:


@ashraf.madina You can use this JavaScript to access the style attribute object and retrieve its properties using its getPropertyValue() method:


And in Groovy:

String js = 'return document.querySelector("html").getPropertyValue("--header-offset");'
String value = WebUI.executeJavaScript(js, null);

Beware, you may get a result in rgb(...) format. If that happens, you may need to convert it to hexadecimal. In actuality, it doesn’t matter – if the value is correct, go with it.

EDIT: fixed the js to have a return statement.

1 Like

Now I learned it. Thank you, @Russ_Thomas

1 Like

ah this will certainly work. i’ll try this

1 Like

so a strange situation… i can’t seem to catch the reason for discrepency… so in the console, the js seems to work fine and returns the hash… but when I run the same script in Katalon, it returns null - same issue I was having before

1 Like

My mistake. Try this:

String js = 'return document.querySelector("html").getPropertyValue("--header-offset");'
String value = WebUI.executeJavaScript(js, null); 

I knew one day I’d forget to add that return. Today is that day :blush:

1 Like

omg duh!

Happens to the best of us… haha. Thanks. This got the job done!