How to get the CSSValue for Background-position of an element when hovered

Product Forums Katalon Studio
,
1

I am trying to get the cssvalue for an element when the state is mouse-hover. when I print the value of that CSS I am not getting what I was expecting. Please find the image and some source code

Before hovering the element the data in style looks as below [![Before hovering]

image
image1920×848 575 KB

.link-button, .content-card-teaser a:not(.button), button.link-button,
.button.link-button, .content-card-teaser a.button:not(.button) {
background-position: right bottom;

After hovering the element the data in style looks as below [![After hovering]

image
image1920×848 514 KB

.link-button:hover, .content-card-teaser a:hover:not(.button),
.link-button:active, .content-card-teaser a:active:not(.button),
button.link-button:hover, button.link-button:active, .button.link
button:hover, .content-card-teaser a.button:hover:not(.button),
.button.link-button:active, .content-card-teaser
a.button:active:not(.button) {
background-position: left bottom;

if you notice in the style I have highlighted the Background-position value. I need to get that value after the element has hovered to verify the text changed to “left” or not

this is the code I have in my script

WebElement object = driver.findElement(By.xpath("//*[normalize-space() = ‘Advance Your Career’]/…//a))
Actions action = new Actions(driver);
action.moveToElement(object).perform();
WebUI.delay(0.5)
String sectionLinkNHeaderCrown = object.getCssValue(“background-position”)
println(sectionLinkNHeaderCrown)

it is returning the value as 0% 100%. I am assuming this would be the x and y positions from the Computed section.

Thanks in advance

2

I think you’ll find that’s normal among browsers. The “left”, “bottom” etc. values are convenience values.

More here:

3

@Russ_Thomas Thanks for the document, I saw it but this is something like how to build an image with these properties. But how do I use that with my situation. I want to find that position and as its giving me 0% and 100% it is not correct position I think.

Thanks

4

Try this in the DevTools console:

var elem = document.querySelector("your-selector");
var styl = window.getComputedStyle(elem);
styl.backgroundPosition

If that returns the same values under the same conditions, I’d trust it as correct.

5

this is what I am getting when I run in console

before hover state
var elem = document.querySelector(‘.hero-search-container a’);
var styl = window.getComputedStyle(elem);
styl.backgroundPosition
“100% 100%”

after hover state
var elem = document.querySelector(‘.hero-search-container a’);
var styl = window.getComputedStyle(elem);
styl.backgroundPosition
“0% 100%”

then what are those 0% refer to

6

From the MDN link:

2-value syntax: one value defines X and the other defines Y. Each value may be:

  • One of the keyword values top , left , bottom , right . If left or right are given here, then this defines X and the other given value defines Y. If top or bottom are given, then this defines Y and the other value defines X.
  • A <length> or <percentage> . If the other value is left or right , then this value defines Y, relative to the top edge. If the other value is top or bottom , then this value defines X, relative to the left edge. If both values are <length> or <percentage> values, then the first defines X and the second Y.
  • Note that: If one value is top or bottom , then the other value may not be top or bottom . If one value is left or right , then the other value may not be left or right . This means, e.g., that top top and left right are not valid.
  • The default value is top left or 0% 0% .

If I’m following that correctly - more importantly, following YOU correctly -

      0% 100%

translates to

      left bottom

That’s zero on X, 100% on Y.

So you have the left you were looking for but it is displayed as 0%.

1 Like
7

Thanks for the long explanation. I should then look for 0% after the hover state.