0

I'm using PhantomJS to iterate through a web page and get certain values such as the amount of images for a product.

My problem is that the images do not seem to be appearing in the Pagesource and so I am not able to get them.

I think the images only appear if a script is run.

When I inspect the element of the page I can see the following:

<div class="pdp-images accessibility" tabindex="-1">
  <img src="http://kingfisher.scene7.com/is/image/Kingfisher/8007842805253_01c?$PROMO_60_60$" alt="Indesit BIMDS23BIXS Electric Eye Level Double Oven: Image 1">
 <img src="http://kingfisher.scene7.com/is/image/Kingfisher/8007842805253_07c?$PROMO_60_60$" alt="Indesit BIMDS23BIXS Electric Eye Level Double Oven: Image 2">
 <img src="http://kingfisher.scene7.com/is/image/Kingfisher/8007842805253_02c?$PROMO_60_60$" alt="Indesit BIMDS23BIXS Electric Eye Level Double Oven: Image 3">
</div>

However, when I go to PhantomJSDriver and look at the Pagesource they do not exist.

instead there is the following:

   <div class="pdp-viewer" style="position: relative;">
<script id="pdp-viewer" type="text/mustache">  Item  <span id="pdp-viewer-counter-current">{{currItem}}</span> of  <span id="pdp-viewer-counter-total">{{totalItems}}</span>

I then looked at the page source which has the following:

    <div class="pdp-viewer">

        <div class="media-player" data-s7-viewer="s7MixedMediaViewer"
                            data-asset="Kingfisher/8007842805253_01c;;advanced_image;,Kingfisher/8007842805253_07c;;advanced_image;,Kingfisher/8007842805253_02c;;advanced_image;" data-width="" data-height="">

        <div class="pdp-viewer-counter"></div>

                        <div class="pdp-images accessibility" tabindex="-1">
       <img src="http://kingfisher.scene7.com/is/image/Kingfisher/8007842805253_01c?$PROMO_60_60$" alt="Indesit BIMDS23BIXS Electric Eye Level Double Oven" />
       <img src="http://kingfisher.scene7.com/is/image/Kingfisher/8007842805253_07c?$PROMO_60_60$" alt="Indesit BIMDS23BIXS Electric Eye Level Double Oven" />
       <img src="http://kingfisher.scene7.com/is/image/Kingfisher/8007842805253_02c?$PROMO_60_60$" alt="Indesit BIMDS23BIXS Electric Eye Level Double Oven" />
        </div>
    </div>
   <script id="pdp-viewer" type="text/mustache">
                      Item 
           <span id="pdp-viewer-counter-current">{{currItem}}</span>
                      of
                        <span id="pdp-viewer-counter-total">{{totalItems}}</span>
  </script>

I am trying to pick up the images using:

result.ImagesCount = driver.FindElementsByCssSelector("pdp-images.accessibility img").Count;

but as they don't exist in the PhantomJS driver Pagesource this is not possible.

The page I am looking at is the following:

http://www.diy.com/departments/indesit-bimds23bixs-electric-eye-level-double-oven/250650_BQ.prd

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
anna
  • 1,001
  • 6
  • 23
  • 40
  • You probably mean `driver.FindElementsByCssSelector(".pdp-images.accessibility img")`. You forgot the first dot. You probably need to wait for the images to appear if they are loaded dynamically. Btw, you're working with C#, right? – Artjom B. May 27 '15 at 14:22
  • @ArtjomB. hi yes C# sorry my mistake with the . but not the reason I have added in driver.WaitFor(foo => { return driver.FindElementsByCssSelector(".pdp-images.accessibility img").Count > 0; }, TimeSpan.FromSeconds(10)); but still not appearing in the souce I m not sure if I need to wait for longer or if theres a better way to do this – anna May 27 '15 at 14:37
  • Have you checked whether the site delivers a mobile version of the page which may not contain those accessibility elements? Try changing the useragent string to some desktop browser and change the viewport size. – Artjom B. May 27 '15 at 14:44
  • I m using Firefox as a useragent: options.AddAdditionalCapability("phantomjs.page.settings.userAgent", "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:25.0) Gecko/20100101 Firefox/25.0"); would I need to add a viewport in the same way? – anna May 27 '15 at 14:55
  • [Setting screen size in PhantomJS C# being driven by Selenium](http://stackoverflow.com/questions/23840013/setting-screen-size-in-phantomjs-c-sharp-being-driven-by-selenium) – Artjom B. May 27 '15 at 14:57
  • Thanks I tried that but it didn't seem to make a difference but then increased the wait time to 20 and it worked so it seems you were right I just needed to wait longer for the images to load. Thank you! – anna May 27 '15 at 15:09
  • You should use an explicit wait for that. – Artjom B. May 27 '15 at 15:12

0 Answers0