[Sharing is learning] [Get rewards] Join Us Now to Become Katalon Champions. Learn more
Jonathan Tzeng
Katalon Apprentice
07/11/2018

How to verify CSS attribute in Katalon Recorder?

Is it possible to verify a CSS attribute like text color in Katalon recorder?
Upvote
Quote

Comments

  • Cybes
    Katalon Apprentice
    07/11/2018
    Hi Jonathan

    Using this very post to create an example script with, I put together the following line of code that will do what you have said:

    Command: assertEval
    Target: window.document.defaultView.getComputedStyle(window.document.getElementsByClassName('title_header_detail_discussion')[0]).getPropertyValue('color')
    Value: rgb(105, 105, 105)

    In this case, as the CSS colour attribute is not being applied directly to the element (the post header/title in this case), the attribute is an inherited one, so it is important that we work out what value the browser has calculated for the font colour CSS attribute (which is what the browser calls the "Computed Style"). 

    In this example it is using an RGB colour of "105, 105, 105", so we are telling Katalon this is the colour it needs to verify for (if you want to know what colour the browser is using, use Inspect (Element) for the text and view the Computed Style tab, then look at the RGB value specified for the "color" attribute. 

    We use assertEval as we are comparing values (what value is defined for the DOM element and what is the value we are expecting). 

    The target is asking the browser to return the computed CSS style for the DOM element we want, but via "getPropertyValue('color')", it is narrowing down the value it is looking for to just be the one for the colour of the CSS attribute.

    If you then adapt the above example to what you are using on your site, then it should in theory work.
    Best Answer
    Upvote
    Quote
Sign In or Register to comment.
Not the answer you're looking for? Consider subscribing to Business support.