How to capture the element using srcset attribute?

Question

I'm trying to understand the difference between the data-srcset and srcset attributes.

I need to get a photo by the srcset attribute, but I can only get it using data-srcset.

I don’t really understand what the problem is, if the principle by which I get it should be similar.

Let's say I have the following plan html code - html code.

Scenario #1:

when I try to get by data-srcset attribute like this:

 // class of the whole element
 liElements.forEach(liElement -> {
 
 ...
 // small photo
 Element imgElement = liElement.select("img").first(); // img of element
 String dataSrcElement = imgElement.attr("data-srcset"); // data-srcset for element of img
 //String srcsetElement = imgElement.attr("srcset"); // srcset for element of img

then there is no problem, but when I use the srcset attribute.

Scenario #2:

 // class of the whole element
 liElements.forEach(liElement -> {
 
 ...
 // small photo
 Element imgElement = liElement.select("img").first(); // img of element
 //String dataSrcElement = imgElement.attr("data-srcset"); // data-srcset for element of img
 String srcsetElement = imgElement.attr("srcset"); // srcset for element of img;

I'm attaching the screenshot as a proof below: enter image description here

I see that null. Can anyone suggest what the difference is?

Is it possible to get it somehow by srcset? If yes, how can this be done in your opinion?

enter image description here

(I need to get the photo for the first product in the existing forEach() loop)

Thank you in advance for your help.

Answer 1

Srcset is a new attribute which allows to specify different kind of images for different screen-sizes/orientation/display-types. It allows to define a list of different image resources along with size information, so that browser can pick the most appropriate image based on the actual device’s resolution.

Srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on.

List<WebElementFacade> imageLink = driver.findElements(By.cssSelector("img[srcset]"));
 for (WebElementFacade imageLinks : imageLink) {
 BigMethod.pause(3000);
 if (!imageLinks.isDisplayed()) {
 return false;
 }
 }

Descriptors are just a way to show what kind of image is hidden behind the resource.

There are various kinds of descriptors:

1. Density descriptor:

• srcset="image.jpg, image-2X.jpg 2x" The display density values—the 1x, 2x, etc.—are referred to as display density descriptors.

2. Width descriptor:

• srcset="image-240.jpg 240w, image-640.jpg 640w".

3. Size descriptor:

• srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">.

Test automation services achieve better quality with qasource that build test automation environments rapidly. It helps to capture images with srcset attribute.

Test automation services support image-set() attribute for a background image in CSS.

• invzbl3: Thank you a lot for sharing, I'll play with your snippet and mark it as accepted a bit later. Now I'm giving upvote for your time and detailed explanation. I appreciate it so much.