1

I'm trying to test an image with Selenium. But my problem is that image is background-image and it doesn't have img tag, it have this html code (it is banner from https://openweather.co.uk/products page):

<div class="current-img white-text half-section-right main-section-desktop"></div>

and this CSS styles

Is it possible to get height and width of background-image? Something like arguments[0].width and arguments[0].height?

Also when I try this code:

document.getElementsByClassName('current-img')[0].style.backgroundImage;

I got [] - empty (like my life) result. Despite CSS styles are present (see picture attached).
Same result with:

document.getElementsByClassName('current-img white-text half-section-right main-section-desktop')[0].style.backgroundSize

When I try:

document.getElementsByClassName('current-img white-text half-section-right main-section-desktop')[0].style

I got CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …} with all empty properties.

Why I got empty result?

zaelcovsky
  • 23
  • 4

1 Answers1

2

You could use window.getComputedStyle(yourElement) to get the computed CSS style of the DOM element.

More about this in the MDN docs.

Here is an example:

const element = document.getElementsByClassName('current-img white-text half-section-right main-section-desktop')[0];
const style = window.getComputedStyle(element);
// style.height is a string like this: '12px'
const height = parseInt(style.height, 10);

With this, you can get the backgroundSize property, but if they didn't set it explicitly and it is the default 'auto' value, you can do the following:

Get the image file used as a background, and with the following code determine the size of this image (as this will be used by auto). This is a bit tricky because you have to wait for the image to load.

// Get the element
const element = document.querySelector('.current-img.white-text.half-section-right.main-section-desktop')

// Get the computed style of the element
const style = window.getComputedStyle(element);

// Get the background image property
const backgroundImage = style.getPropertyValue('background-image');

// Extract the URL from the background image property
const imageUrl = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];

// Create an image object to load the background image
const image = new Image();
image.src = imageUrl;

// Get the image's natural width and height
image.onload = function() {
  const imageWidth = this.width;
  const imageHeight = this.height;
  
  // Use the imageWidth and imageHeight as needed
  console.log('Width:', imageWidth, 'Height:', imageHeight);
};
tsgrgo
  • 384
  • 1
  • 4
  • 9
  • something like `window.getComputedStyle(element).getPropertyValue("background-image");` ? Because style is "computed" I got empty properties? – zaelcovsky May 23 '23 at 22:26
  • @zaelcovsky Like this: `const element = document.getElementsByClassName('current-img white-text half-section-right main-section-desktop')[0]; const style = window.getComputedStyle(element);` Then you can get the height property of the style object, which will return the height as a string that you can convert – tsgrgo May 23 '23 at 22:27
  • Thank you! It works, but for me it is `auto` for `.height` and `.width` properties. – zaelcovsky May 23 '23 at 22:41
  • @zaelcovsky I added a code snippet to my answer to help you extract the size of the used image in that case. – tsgrgo May 23 '23 at 22:58
  • And why we need `[1]` at the end of `const imageUrl = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];`? – zaelcovsky May 25 '23 at 07:33
  • Big thanks to you, @tsgrgo ! Explanation is awesome and It works great also! – zaelcovsky May 25 '23 at 09:40