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
Russ Thomas said:
Have you tried the CSS methods?
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.
Mohan Krishna Nadimpalli said:
Russ Thomas said:
Have you tried the CSS methods?
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
@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
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
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 expectedTextColorI hope it can help someone.