Hi,
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
2 Likes
Interesting!
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
WebUI.openBrowser('https://forum.katalon.com/t/how-can-i-get-the-html-style-value/93831')
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)) {
WebUI.comment('HeaderFound')
println('HeaderFound')
} else if (WebUI.verifyEqual(newStyleAttribute.contains('offset'), true, FailureHandling.OPTIONAL)) {
WebUI.comment('offsetFound')
println('offsetFound')
} else {
WebUI.comment('NoRecordFound')
println('NoRecordFound')
}
2 Likes
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:
document.querySelector("html").getPropertyValue("--header-offset");
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
2 Likes
ah this will certainly work. i’ll try this
2 Likes
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 
1 Like
omg duh!
Happens to the best of us… haha. Thanks. This got the job done!
2 Likes
Pardon my newbie question. I am getting below error,
Caused by: org.openqa.selenium.JavascriptException: javascript error: document.querySelector(…).getPropertyValue is not a function
Do I need to import any packages? or add some plugin? to use document.querySelector kind of things? Please advise
Hi there, 
Thank you very much for your topic! It may take a little while before Katalon team member or others forum members respond to you.
In the meantime, you can double-check your post to see if you can add any extra information i.e. error logs, HTML codes, screenshots, etc. Check out this posting guide to help us help you better!
Thanks! 
Katalon Community team