How to verify font, font color and font size using Katalon studio

Product Forums Katalon Studio
,
#1

Hello All,

Am trying to validate UX properties for an object and unable to understand on how to verify font, font type and color using Katalon studio. Any leads would be helpful.

Thanks

#2

Have you tried the CSS methods?

https://docs.katalon.com/display/KD/[WebUI]+Get+CSS+Value

#3

Russ Thomas said:

Have you tried the CSS methods?

https://docs.katalon.com/display/KD/[WebUI]+Get+CSS+Value

Thanks Russ for the response, Yeah am able to get the CSS value but unable to print the value and compare it.
But now, I figured out a way to compare the CSS properties using verify match. Thanks again for the response.

#4

Mohan Krishna Nadimpalli said:

Russ Thomas said:

Have you tried the CSS methods?

https://docs.katalon.com/display/KD/[WebUI]+Get+CSS+Value

Thanks Russ for the response, Yeah am able to get the CSS value but unable to print the value and compare it.
But now, I figured out a way to compare the CSS properties using verify match. Thanks again for the response.

Can you show how you did that ?
I am working on something similar

#5

@Mohan Krishna Nadimpalli
You need to assign the value to a variable before you can print it:

def yourVariable = WebUI.getCSSValue(findTestObject('your object'), 'value')
println yourVariable
2 Likes
#6

Here’s what I have done to create a color comparison for an email field and validating the error text is red. 1.) Created a local variable with the expected color, 2.) defined a color variable from the CSS info in the actual object, 3.) then compared.
Steps:
1.) Create a local variable. With your script open, (Click the Variables tab at the bottom of your editing window - next to Manual and Script). Click + Add at the top of that tab then under name create your local variable name. In my case, Error_color_red, Type will be String and Default you’ll set to the color expected for your Expected results, in this case “rgba(224, 9, 20, 1)” You can find the color info. on your web page by clicking on the object and selecting ‘Inspect’ from the right click.
2.) (copy and paste something like this into your Script in Script mode to define field and populate it with the CSS info from your object. This will be your actual result)
def email_error_color = WebUI.getCSSValue(findTestObject(‘Yourobject you want the color from’),‘color’)
3). Copy and paste this after the line above to compare your actual with your expected results
WebUI.verifyEqual(Error_color_red, email_error_color)

2 Likes
#7

Hi @Julie_Mortlock,
Thank you…it works for me.
Here is the script view I wrote from the step I’ve started collecting the css values…

‘Get ‘actual-background-color’ CSS value of ‘Get Started’ button’
def actualbackgroundcolor = WebUI.getCSSValue(findTestObject(‘Validating_UI_1/Page_RightTime Web/button_GET STARTED’), ‘background-color’,
FailureHandling.CONTINUE_ON_FAILURE)

‘Compare the actual result and the expected result’
WebUI.verifyEqual(actualbackgroundcolor, expectedBackgroundColor, FailureHandling.CONTINUE_ON_FAILURE)

‘Get ‘actual-text-color’ CSS value of ‘Get Started’ button’
def actualtextcolor = WebUI.getCSSValue(findTestObject(‘Validating_UI_1/Page_RightTime Web/button_GET STARTED’), ‘color’,
FailureHandling.CONTINUE_ON_FAILURE)

‘Compare the actual result and the expected result’
WebUI.verifyEqual(actualtextcolor, expectedTextColor, FailureHandling.CONTINUE_ON_FAILURE)

‘Get ‘actual-font’ CSS value of ‘Get Started’ button’
def actualfont = WebUI.getCSSValue(findTestObject(‘Validating_UI_1/Page_RightTime Web/button_GET STARTED’), ‘font-family’,
FailureHandling.CONTINUE_ON_FAILURE)

‘Compare the actual result and the expected result’
WebUI.verifyEqual(actualfont, expectedFont, FailureHandling.CONTINUE_ON_FAILURE)

Below the variables I added in the variables tab (the info below has been copied from the variables tab script mode but I added them manually)

<?xml version="1.0" encoding="UTF-8"?> 'Source Sans Pro' ff4d8bed-620b-47e6-ab28-80d2fa443a50 false expectedFont 'rgb(0, 137, 225)' 336e7930-e229-4c00-b5fd-4bb65b8f3ea5 false expectedBackgroundColor 'rgb(255, 255, 255)' 4f5a1dde-6b3d-44f3-bd0a-a15d509cdb44 false expectedTextColor

I hope it can help someone.

#8