@yashwant.dharmdas/elementor-mcp 3.2.7 → 3.2.8

package/dist/index.js

@@ -1092,15 +1092,16 @@ function createMcpServer(sites) {
                 await page.goto(pageUrl, { waitUntil: "networkidle2", timeout: 45_000 });
                 // ── Auto-scroll with multi-pass stabilization ────────────────────
                 // Many Elementor pages lazy-load content on scroll (images, Swiper
-                // carousels, reveal animations). A single scroll pass is not enough —
-                // the page can grow as content loads. We keep scrolling until the
-                // total page height stops increasing between passes.
+                // carousels, reveal animations). We scroll slowly so IntersectionObservers
+                // have time to fire, then wait at the bottom for content to settle, and
+                // repeat passes until the total page height stops increasing.
                 if (auto_scroll !== false) {
                     await page.evaluate(async () => {
                         const getHeight = () => Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight);
                         const scrollOnce = () => new Promise((resolve) => {
                             let y = 0;
-                            const step = 300;
+                            const step = 180; // smaller step
+                            const delay = 110; // slower interval — gives observers time to fire
                             const timer = setInterval(() => {
                                 const h = getHeight();
                                 window.scrollBy(0, step);
@@ -1109,89 +1110,166 @@ function createMcpServer(sites) {
                                     clearInterval(timer);
                                     resolve();
                                 }
-                            }, 60);
+                            }, delay);
                         });
                         // Repeat until height stabilizes (max 4 passes)
                         let lastHeight = 0;
                         for (let i = 0; i < 4; i++) {
                             window.scrollTo(0, 0);
-                            await new Promise(r => setTimeout(r, 150));
+                            await new Promise(r => setTimeout(r, 200));
                             await scrollOnce();
-                            // Wait at the bottom for lazy content to trigger
-                            await new Promise(r => setTimeout(r, 800));
+                            // Long wait at the bottom — bg images / Swipers need time
+                            await new Promise(r => setTimeout(r, 1500));
                             const h = getHeight();
-                            if (h === lastHeight)
+                            if (h === lastHeight && i > 0)
                                 break;
                             lastHeight = h;
                         }
+                        // One more slow scroll pass at half speed to nail any stragglers
+                        await new Promise((resolve) => {
+                            window.scrollTo(0, 0);
+                            let y = 0;
+                            const step = 120;
+                            const timer = setInterval(() => {
+                                const h = getHeight();
+                                window.scrollBy(0, step);
+                                y += step;
+                                if (y >= h) {
+                                    clearInterval(timer);
+                                    resolve();
+                                }
+                            }, 130);
+                        });
+                        await new Promise(r => setTimeout(r, 1000));
                         // Back to top for the capture
                         window.scrollTo(0, 0);
                     });
                 }
-                // ── Force-load all <img> tags + Elementor lazy backgrounds ────────
+                // ── Force-load all images, Elementor backgrounds, and reveal sections ─
                 await page.evaluate(async () => {
-                    // 1. Strip loading="lazy" so the browser loads everything eagerly
+                    // 1. Inject CSS that disables animations AND forces opacity:1
+                    //    on Elementor's hidden reveal states. This MUST be first so
+                    //    subsequent layout / render passes don't re-hide content.
+                    const style = document.createElement("style");
+                    style.id = "__mcp_screenshot_overrides__";
+                    style.textContent = `
+							*, *::before, *::after {
+								animation-duration: 0s !important;
+								animation-delay: 0s !important;
+								transition-duration: 0s !important;
+								transition-delay: 0s !important;
+							}
+							.elementor-invisible,
+							.elementor-element[data-settings*="animation"] {
+								opacity: 1 !important;
+								visibility: visible !important;
+								transform: none !important;
+							}
+							/* Defeat any lazy-load opacity tricks */
+							.elementor-element { opacity: 1 !important; }
+						`;
+                    document.head.appendChild(style);
+                    // 2. Strip loading="lazy" on images
                     document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
                         img.setAttribute("loading", "eager");
                     });
-                    // 2. Resolve data-src → src for libraries that defer image loading
+                    // 3. Resolve data-src → src for any deferred-load libraries
                     document.querySelectorAll("img[data-src]").forEach((img) => {
                         const ds = img.getAttribute("data-src");
                         if (ds && !img.getAttribute("src"))
                             img.setAttribute("src", ds);
                     });
-                    // 3. Force-load Elementor's lazy background images
-                    //    Elementor uses class .elementor-element-bg-lazyload + sets a
-                    //    CSS variable --e-bg-lazyload, OR data-bg / data-background-image
-                    const bgEls = document.querySelectorAll(".elementor-element-bg-lazyload, [data-bg], [data-background-image]");
-                    bgEls.forEach((el) => {
-                        const url = el.getAttribute("data-bg") ||
-                            el.getAttribute("data-background-image") ||
-                            getComputedStyle(el).getPropertyValue("--e-bg-lazyload").trim().replace(/^url\(["']?|["']?\)$/g, "");
-                        if (url && url !== "none" && !el.style.backgroundImage) {
-                            el.style.backgroundImage = `url("${url}")`;
+                    // 4. Resolve <source srcset> inside <picture> (just in case)
+                    document.querySelectorAll("source[data-srcset]").forEach((src) => {
+                        const ds = src.getAttribute("data-srcset");
+                        if (ds && !src.getAttribute("srcset"))
+                            src.setAttribute("srcset", ds);
+                    });
+                    // 5. Force-load Elementor's lazy background images.
+                    //    Elementor uses MULTIPLE patterns over the years:
+                    //      - class .elementor-element-bg-lazyload + CSS var --e-bg-lazyload
+                    //      - data-bg / data-background-image
+                    //      - data-settings JSON containing background_image
+                    //    We try all of them.
+                    document.querySelectorAll(".elementor-element-bg-lazyload, [data-bg], [data-background-image], [data-settings]").forEach((el) => {
+                        let url = el.getAttribute("data-bg") ||
+                            el.getAttribute("data-background-image");
+                        // Try the CSS variable
+                        if (!url) {
+                            const v = getComputedStyle(el).getPropertyValue("--e-bg-lazyload").trim();
+                            if (v && v !== "none") {
+                                url = v.replace(/^url\(["']?|["']?\)$/g, "");
+                            }
+                        }
+                        // Try parsing data-settings JSON
+                        if (!url) {
+                            try {
+                                const ds = el.getAttribute("data-settings");
+                                if (ds) {
+                                    const obj = JSON.parse(ds);
+                                    url = obj?.background_image?.url
+                                        || obj?._background_image?.url
+                                        || obj?.background_overlay_image?.url
+                                        || null;
+                                }
+                            }
+                            catch { /* ignore */ }
+                        }
+                        if (url && url !== "none") {
+                            // Set inline so it overrides any external lazy CSS
+                            el.style.setProperty("background-image", `url("${url}")`, "important");
+                            el.style.setProperty("--e-bg-lazyload", "none");
                         }
                         el.classList.remove("elementor-element-bg-lazyload");
                     });
-                    // 4. Force-show Elementor reveal-animation elements that are still
-                    //    hidden (opacity:0 / .elementor-invisible) waiting for scroll trigger
+                    // 6. Force-show Elementor reveal-animation elements
                     document.querySelectorAll(".elementor-invisible").forEach((el) => {
                         el.classList.remove("elementor-invisible");
                         el.style.opacity = "1";
                         el.style.visibility = "visible";
                         el.style.transform = "none";
                     });
-                    // 5. Disable CSS animations / transitions during capture so nothing
-                    //    is mid-flight when the screenshot fires
-                    const style = document.createElement("style");
-                    style.id = "__mcp_screenshot_overrides__";
-                    style.textContent = `
-							*, *::before, *::after {
-								animation-duration: 0s !important;
-								animation-delay: 0s !important;
-								transition-duration: 0s !important;
-								transition-delay: 0s !important;
-							}
-							.elementor-invisible { opacity: 1 !important; visibility: visible !important; }
-						`;
-                    document.head.appendChild(style);
-                    // 6. Wake up any IntersectionObserver-based loaders one more time
+                    // 7. Re-trigger Elementor frontend lazy-load if available.
+                    //    Elementor exposes the global `elementorFrontend`; calling its
+                    //    elementsHandler reinitialises lazy modules.
+                    try {
+                        const ef = window.elementorFrontend;
+                        if (ef?.elementsHandler?.runReadyTrigger) {
+                            document.querySelectorAll(".elementor-element").forEach((el) => {
+                                try {
+                                    ef.elementsHandler.runReadyTrigger(el);
+                                }
+                                catch { /* ignore */ }
+                            });
+                        }
+                    }
+                    catch { /* ignore */ }
+                    // 8. Dispatch scroll/resize to wake any remaining IntersectionObservers
                     window.dispatchEvent(new Event("scroll"));
                     window.dispatchEvent(new Event("resize"));
-                    // 7. Wait for ALL <img> tags (now eager) to finish loading
+                    document.dispatchEvent(new Event("DOMContentLoaded"));
+                    // 9. Wait for ALL <img> tags (now eager) to finish loading + decode
                     const images = Array.from(document.querySelectorAll("img"));
                     await Promise.all(images.map((img) => {
-                        if (img.complete && img.naturalWidth > 0)
-                            return Promise.resolve();
+                        if (img.complete && img.naturalWidth > 0) {
+                            return img.decode?.().catch(() => { }) ?? Promise.resolve();
+                        }
                         return new Promise((resolve) => {
                             img.addEventListener("load", () => resolve(), { once: true });
                             img.addEventListener("error", () => resolve(), { once: true });
                             setTimeout(() => resolve(), 5000);
                         });
                     }));
+                    // 10. Wait for fonts to be fully ready (avoids FOUT in screenshot)
+                    if (document.fonts?.ready) {
+                        try {
+                            await document.fonts.ready;
+                        }
+                        catch { /* ignore */ }
+                    }
                 });
-                // Extra settle time for fonts, video posters, and bg image decoding
-                await new Promise(resolve => setTimeout(resolve, wait ?? 2500));
+                // Extra settle time — bumped to 3500ms default to handle slow CDNs / videos
+                await new Promise(resolve => setTimeout(resolve, wait ?? 3500));
                 const fmt = format ?? "jpeg";
                 const baseOptions = { type: fmt, fullPage: !max_height && (full_page ?? true) };
                 if (max_height)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yashwant.dharmdas/elementor-mcp",
-  "version": "3.2.7",
+  "version": "3.2.8",
   "description": "MCP server for controlling Elementor via Claude — supports multiple WordPress sites",
   "main": "dist/index.js",
   "type": "module",