how can I access to insted div in a webpage after I selected parent div with selenium python

Question

I hope you are all doing fine. I am totally new to Selenium and I am trying to save all images, as well as the text description of each image, on each page of the Realself website. This is what I found in the inspect mode of the website:

<div class="fixed-img2">
 <div content="//fi.realself.com/340/2b7d179ededf559f87b06202a9187ee1/0/8/4/Injectable-Fillers-after-3292504-2757399.JPG" alt="Facial Rejuvenation with Injectable Fillers Facial rejuvenation was softly done over a course of 2 years to achieve a very natural and balanced" index="2" hide-icon="true" set-of-images="[&quot;\/\/fi.realself.com\/340\/ff348ae5be9e09ede726574260fa386e\/5\/6\/2\/Injectable-Fillers-before-3292504-2757398.JPG&quot;]" regwall-override="true">
  <div class="Overlay--responsive">
    <div class="Overlay Overlay--explicitVideo Overlay--explicitBlock u-backgroundTransparent ng-hide" data-gtm="{&quot;event&quot;:&quot;safe-mode-block-click&quot;,&quot;safeMode&quot;:false}" ng-click="toggle()" ng-show="vm.blocked" role="button" tabindex="0" aria-hidden="true">
      <div ng-show="!vm.hideIcon" class="Overlay-explicitIcon ng-hide" style="" aria-hidden="true">
        <svg icon-id="nsfw-icon" class="Icon Icon--size56x56"><!----><use ng-if="$ctrl.iconURL" xlink:href="#rs-svg-nsfw-icon"></use><!----></svg>
      </div>
      <div class="Overlay-explicitTextBlock ng-hide" ng-show="vm.textmode" aria-hidden="true">
        <span class="Overlay-text Overlay-explicitTextBlack"> Sensitive content </span>
        <span class="Overlay-text Overlay-explicitTextBlack"> Click for real patient photos </span>
      </div>
    </div>
    
      <img src="//fi.realself.com/340/2b7d179ededf559f87b06202a9187ee1/0/8/4/Injectable-Fillers-after-3292504-2757399.JPG" class=" lazyloaded" data-src="//fi.realself.com/340/2b7d179ededf559f87b06202a9187ee1/0/8/4/Injectable-Fillers-after-3292504-2757399.JPG">
    
  </div>
</div>

I used the command blow to select all element of "fixed-img2"

images = driver.find_elements(By.CLASS_NAME, "fixed-img2")

After selecting all image elements, I need to loop over them. Inside the child div, I need to save the image with the content attribute. Based on the index attribute value, I need to separate them into before and after images, and at the end, save the image description with the alt attribute.

this is the realself website page: https://www.realself.com/photos/dermal-fillers#page=3&tags=&location=2038

is this overally a good way to save the images on each page?

Answer 1

If seems ALT attribute don't change in the after image. SO you can add some string to with ALT value.

Here is the code to get the list of items. Now you can use your code to Save those value.

Before:

listImageCONTENTBefore =[item.get_attribute("content") for item in driver.find_elements(By.CSS_SELECTOR, "div.fixed-img2 >div[content*='before']")
listImageALTBefore =[item.get_attribute("alt") + "_before" for item in driver.find_elements(By.CSS_SELECTOR, "div.fixed-img2 >div[content*='before']")

After:

listImageCONTENTAfter =[item.get_attribute("content") for item in driver.find_elements(By.CSS_SELECTOR,"div.fixed-img2 >div[content*='after']")
listImageALTAfter =[item.get_attribute("alt") + "_after" for item in driver.find_elements(By.CSS_SELECTOR,"div.fixed-img2 >div[content*='after']")