feat(screenshot): implement lazy load

source/plugins/community/screenshot/index.mjs

@@ -7,7 +7,7 @@
       return null
 
     //Load inputs
-    let {url, selector, title, background, viewport, wait, mode} = imports.metadata.plugins.screenshot.inputs({data, account, q})
+    let {url, selector, title, background, viewport, lazyload, wait, mode} = imports.metadata.plugins.screenshot.inputs({data, account, q})
     if (!url)
       throw {error: {message: "URL is not set"}}
 
@@ -19,19 +19,57 @@
     await page.setViewport(viewport)
     console.debug(`metrics/compute/${login}/plugins > screenshot > loading ${url}`)
     await page.goto(url, {waitUntil: ["domcontentloaded", "networkidle2"]})
+
+    await page.waitForSelector(selector)
+    if (lazyload) {
+      await page.evaluate(async sel => {
+        const element = document.querySelector(sel)
+        if (!element)
+          return
+
+        //Progressive scroll
+        await new Promise(resolve => {
+          const timer = setInterval(() => {
+            const rect = element.getBoundingClientRect()
+            if (rect.bottom <= window.innerHeight || window.scrollY + window.innerHeight >= document.body.scrollHeight) {
+              clearInterval(timer)
+              resolve()
+            }
+            else {
+              window.scrollBy(0, 300)
+            }
+          }, 100)
+        })
+
+        await Promise.all([...element.querySelectorAll("img")].map(img =>
+          new Promise(solve => {
+            if (img.complete)
+              solve()
+            else {
+              img.addEventListener("load", solve)
+              img.addEventListener("error", solve)
+            }
+          })
+        ))
+      }, selector)
+    }
     if (wait)
       await new Promise(solve => setTimeout(solve, wait))
 
     //Screenshot
     let content = null
     let image = null
     const metadata = {height: null, width: null}
-    await page.waitForSelector(selector)
     switch (mode) {
       case "image": {
         const clip = await page.evaluate(selector => {
           const {x, y, width, height} = document.querySelector(selector).getBoundingClientRect()
-          return {x, y, width, height}
+          return {
+            x: x + window.scrollX,
+            y: y + window.scrollY,
+            width,
+            height,
+          }
         }, selector)
         console.debug(`metrics/compute/${login}/plugins > screenshot > coordinates ${JSON.stringify(clip)}`)
         const [buffer] = await imports.record({page, ...clip, frames: 1, background})

source/plugins/community/screenshot/metadata.yml

@@ -65,6 +65,14 @@
         "height": 1280
       }
 
+  plugin_screenshot_lazyload:
+    description: |
+      Progressively scroll to the selected element and wait for images to load before taking the screenshot
+
+      When combined with `plugin_screenshot_wait`, wait will happen after lazy loading is complete
+    type: boolean
+    default: no
+
   plugin_screenshot_wait:
     description: |
       Wait time before taking screenshot (ms)