Selecting attributes that will vary from page to page

I am attempting to grab text values on a results page where some attributes will be available but others will not. At the moment I am unable to fix values against some kind of id (although it appears that it is possible). For example, 1 page will display 6 key facts like price, bedrooms, bathrooms, plot, etc but another page will only display price and plot. These items are fixed on the node level and I've tried to set attribute values that have exact text match but it does not work. Here is an output of the div that i would like to map against the id values somehow:

<div class="ev-exposee-content ev-key-facts"> <div class="ev-key-fact hide-none-phone show-phone show-tablet"> <img class="ev-key-fact-icon" src="/webinnovation-frontend-resources/images/Icon_Price.svg" title="Price" alt="Price-Icon"> <div class="ev-key-fact-value"> 65.000.000 EUR </div> <div class="ev-key-fact-title"> Price </div> </div> <div class="ev-key-fact"> <img class="ev-key-fact-icon" src="/webinnovation-frontend-resources/images/Icon_Bedrooms.svg" title="Bedrooms" alt="Bedrooms-Icon"> <div class="ev-key-fact-value"> 7 </div> <div class="ev-key-fact-title">Bedrooms</div> </div> <div class="ev-key-fact"> <img class="ev-key-fact-icon" src="/webinnovation-frontend-resources/images/Icon_Bathrooms.svg" title="Bathrooms" alt="Bathrooms-Icon"> <div class="ev-key-fact-value"> 6 </div> <div class="ev-key-fact-title">Bathrooms</div> </div> <div class="ev-key-fact"> <img class="ev-key-fact-icon" src="/webinnovation-frontend-resources/images/Icon_LivingSpace.svg" title="Living area approx." alt="Living area approx.-Icon"> <div class="ev-key-fact-value"> 2,300 m² </div> <div class="ev-key-fact-title">Living area approx.</div> </div> <div class="ev-key-fact"> <img class="ev-key-fact-icon" src="/webinnovation-frontend-resources/images/Icon_PropertyArea.svg" title="Plot surface approx." alt="Plot surface approx.-Icon"> <div class="ev-key-fact-value"> 4,250 m² </div> <div class="ev-key-fact-title">Plot surface approx.</div> </div> <div class="ev-key-fact hide-phone hide-tablet" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> <link itemprop="availability" href="http://schema.org/InStock"> <img class="ev-key-fact-icon" src="/webinnovation-frontend-resources/images/Icon_Price.svg" title="Price" alt="Price-Icon"> <div class="ev-key-fact-value"> <span itemprop="price" content="65000000"> 65.000.000 </span> <span itemprop="priceCurrency" content="EUR"> EUR </span> </div> <div class="ev-key-fact-title"> Price </div> </div> </div>

would appreciate any assistance with this one. Thanks

@dommydee Hello, are you able to provide the targeted website?
Have you already checked this video?

@ViestursWS - thanks for offering the link to the learning resource and yes i did attempt this but unfortunately was unsuccessful but it could be that i was not using the correct attribute values. Here is a link to the targeted website: Your Search Results for Residential, Commercial Properties and Yachts - Engel & Völkers

You will notice when clicking on the property description pages how the attribute results will vary depending on the property type.

Thanks

@dommydee Hello, you should be able to use the icon sources as the identifiers.

Example:

{"_id":"engelvoelkers-com-test","startUrl":["https://www.engelvoelkers.com/en/search/?q=&startIndex=1834&businessArea=residential&sortOrder=DESC&sortField=sortPrice&pageSize=18&facets=bsnssr%3Aresidential%3Bcntry%3Aspain%3Brgn%3Amajorca%3Btyp%3Abuy%3B"],"selectors":[{"id":"wrapper","multiple":true,"parentSelectors":["_root"],"selector":"div.ev-search-results > div:has(a)","type":"SelectorElement"},{"id":"bedroom-count","multiple":false,"parentSelectors":["wrapper"],"regex":"","selector":"img[title=\"Bedrooms\"] + span","type":"SelectorText"},{"id":"bathroom-count","multiple":false,"parentSelectors":["wrapper"],"regex":"","selector":"img[title=\"Bathrooms\"] + span","type":"SelectorText"},{"id":"lot-size","multiple":false,"parentSelectors":["wrapper"],"regex":"","selector":"img[title=\"Lot Size\"] + span","type":"SelectorText"}]}

@ViestursWS Genius! I applied similar logic to the expose pages as i required other data from this page but now i'm only scraping required data knowing that this is the correct attribute like follows:

wrapper (element): div.ev-key-facts:has(img) Then required values as Text with img[title="Bedrooms"]+ div (for example).

Works like a charm! Many thanks