With lazy loading in place, wraith is unable to capture images and other content

[darshan-dave]

The web pages which are under test have lazy loading implemented recently. Wraith is unable to capture the images and some other content in the screenshots. This used to work previously before the implementation of lazy loading.

Please advise.

---

Reporting a problem? Please describe the issue above, and complete the following checklist so that we can help you more quickly.

Issue checklist:

• I have validated my config file against YAML Validator to make sure it is valid YAML.

• [ ] I have run the wraith info command and pasted the output below:

paste results here

• [ ] I have run the command in verbose mode (by adding verbose: true to my config) and pasted the output below:

paste results here

• I have pasted the contents of my config file below:

#Headless browser option
phantomjs_options: --ssl-protocol=tlsv1
browser:
  phantomjs: "phantomjs"
  # slimerjs: "slimerjs"

#If you want to have multiple snapping files, set the file name here
snap_file: "javascript/snap.js"

# The name of the directory that shots will be stored in
directory: actual
history_dir: expected/brochures

# Add only 2 domains, key will act as a label
domains:
  production: "https://www.toyota.com"

#Type screen widths below, here are a couple of examples
screen_widths:
  - 320
#  - 600
#  - 768
  - 1024

#Type page URL paths below, here are a couple of examples
paths:
  brochures_gm_home: /brochures/

#Amount of fuzz ImageMagick will use
fuzz: '20%'

#Set the number of days to keep the site spider file
spider_days:
  - 10

#Choose how results are displayed, by default alphanumeric. Different screen widths are always grouped.
#alphanumeric - all paths (with, and without, a difference) are shown, sorted by path
#diffs_first - all paths (with, and without, a difference) are shown, sorted by difference size (largest first)
#diffs_only - only paths with a difference are shown, sorted by difference size (largest first)
mode: diffs_first

threshold: 0

[ChrisBAshton]

It depends how the lazy loading is implemented. Is it lazy loaded based on user's scroll position? Phantom/Casper will not scroll until you tell it to, so the content would never get loaded.

It sounds as though you need a before_capture JS file in which you interact with the page a little before you attempt to take any screenshots.

[darshan-dave]

Thank you for your inputs, Chris.

Let me check if this works, will get back to you.

[darshan-dave]

Hey @ChrisBAshton,

I tried interacting with the page (scrolling) by making changes in snap.js. The solution that I tried is provided in the last comment from 'rajee1009' in https://github.com/BBC-News/wraith/issues/118, but to no avail.

Please advise.

Thank you.

[darshan-dave]

@ChrisBAshton and @DaveBlooman,

Could you advise the way out of this? Your help would be highly appreciated.

Thank you.