iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Scroll-triggered content capture karne ke liye page ko scroll karein, phir kisi aise page-specific signal ka intezar karein jo bataye ki naya section tayyar hai. Uske baad poore page ke liye page.screenshot() ya ek section ke liye ElementHandle.screenshot() use karein. Sirf screenshot call karna ya element ko view mein lana lazy-loaded content ke tayyar hone ki guarantee nahi deta.
Scroll ke baad content load karane ka sahi flow
Puppeteer mein har website ke liye ek universal lazy-load recipe nahi hai. Page ke apne loading behavior ko trigger karein aur phir usi content se juda condition-based wait lagayein—jaise section count badhna, target element dikhna, ya loading indicator hatna. Puppeteer ke page interaction guide aur Page API aise interactions aur waits ke primitives dete hain; sahi selector aur stop condition website par nirbhar hain.
Runnable example: neeche aate sections ka count badhne par wait
Yeh CommonJS script Node.js mein Puppeteer ke saath chalegi. Apne page ke section selector aur readiness condition ko target website ke mutabik badlein. Example count badhne par aage badhta hai, aur page ke aage extend na hone par rukta hai.
Free tools Windows power users keep installed
One-click scans. No signup required.
const puppeteer = require('puppeteer');
(async () => {
const url = 'https://example.com';
const sectionSelector = '.content-section';
const maxScrolls = 30;
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'domcontentloaded' });
let previousCount = await page.evaluate((selector) =>
document.querySelectorAll(selector).length,
sectionSelector
);
let stableAtBottom = 0;
for (let attempt = 0; attempt < maxScrolls; attempt++) {
await page.evaluate(() => {
window.scrollBy(0, Math.floor(window.innerHeight * 0.8));
});
// Give scroll-triggered handlers a chance to run, then test for real growth.
try {
await page.waitForFunction(
(selector, count) =>
document.querySelectorAll(selector).length > count,
{ timeout: 5000 },
sectionSelector,
previousCount
);
} catch (error) {
if (error.name !== 'TimeoutError') throw error;
}
const state = await page.evaluate((selector) => ({
count: document.querySelectorAll(selector).length,
atBottom: window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 2
}), sectionSelector);
if (state.count > previousCount) {
previousCount = state.count;
stableAtBottom = 0;
} else if (state.atBottom) {
stableAtBottom++;
if (stableAtBottom >= 2) break;
}
}
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}
})();Example assumes that each new section matches .content-section. Agar page pehle se saare sections DOM mein rakhta hai aur sirf unhe visible karta hai, count badhne ka wait kaam nahi karega. Us case mein target section ki visibility, uske loaded data, ya spinner ke disappear hone ko check karein. maxScrolls loop ko bound karta hai; apne page ke size aur behavior ke hisaab se ise adjust karein.
#1 Best Overall
Scroll routine ko page ke hisaab se badlein
page.evaluate() ke andar diya gaya function browser page context mein chalta hai. Agar function promise return kare, Puppeteer uske resolve hone ka wait karta hai. Isliye scroll sequence ko async page-side routine mein rakhna mumkin hai, lekin routine ko khud ek meaningful completion condition chahiye. Scroll increment bhi universal nahi hai: kuch pages scroll events par load karte hain, kuch viewport ke paas aane wale elements par.
Alternative ke taur par Puppeteer locators aur page interaction APIs se elements ke saath interact karein. Locator approach tab upyogi hai jab known target element par action karna ho; phir bhi action ke baad content-ready condition alag se verify karein.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Wait condition kaise chunein
Target condition: aam taur par sabse seedha signal
page.waitForFunction() tab tak wait karta hai jab tak diya gaya function truthy na ho. Isme section count, target data attribute, expected text, ya loading state ko check kiya ja sakta hai. Predicate aisa rakhein jo scroll se pehle false ho aur required content aane ke baad true ho; pehle se maujood section ki presence check karna naye content ka saboot nahi hai.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Network idle: sahayak signal, completion ki guarantee nahi
page.waitForNetworkIdle() network activity kam ya idle hone par wait kar sakta hai, lekin network quiet hona yeh nahi batata ki aapka specific section render ho gaya. Yeh signal tabhi use karein jab site ka behavior isse suit karta ho, aur zarurat par target condition se confirm karein. Arbitrary sleep akela bhi reliability ka achha signal nahi: kam wait par content miss ho sakta hai, zyada wait capture ko dheema karta hai.
Rank #3
Poora page ya sirf ek section capture karein
| Capture ka maqsad | Puppeteer API | Dhyan dene layak baat |
|---|---|---|
| Poora document | page.screenshot({ path: 'page.png', fullPage: true }) |
Screenshot se pehle lazy sections ko trigger aur ready verify karein. |
| Ek known element | elementHandle.screenshot({ path: 'section.png' }) |
ElementHandle screenshot default taur par hidden element ko view mein scroll karne ki koshish karta hai; yeh uske lazy content ke ready hone ka proof nahi. |
Puppeteer ka screenshot guide page screenshots ke liye Page.screenshot() batata hai. Element capture ke liye selector se handle hasil karein, uske andar ka content ready hone ka wait karein, phir screenshot lein:
await page.waitForFunction(() => {
const section = document.querySelector('#target-section');
return section && section.querySelector('.loaded-content');
});
const section = await page.$('#target-section');
if (!section) throw new Error('Target section was not found');
await section.screenshot({ path: 'section.png' });Omit hue sections aur infinite scroll ko troubleshoot karein
- Scroll se kuch nahi hota: Dekhein page sahi scroll container use kar raha hai ya nahi. Agar scrolling
windowke bajay kisi nested container mein hoti hai, us container ko scroll karein. Target website ka loading trigger identify karein. - Wait turant pass ho jata hai: Predicate shayad pehle se maujood content ko dekh raha hai. Scroll se pehle count ya state store karein aur baad mein usme change ka intezar karein.
- Wait timeout hota hai: Selector, loading signal, ya data condition verify karein. Page par section maujood ho sakta hai par selector galat ho; ya page ko authentication ya kisi aur prerequisite ki zarurat ho sakti hai.
- Network idle ke baad bhi content missing hai: Network quiet ko target content ki readiness na samjhein. Target-specific condition ka wait karein.
- Infinite scroll loop khatam nahi hota: Maximum attempts rakhein aur no-growth-at-bottom jaise exit rule ka istemal karein. Kuch pages scroll karte hi naye results jodte rahenge, isliye sirf document height badhne tak loop chalana unbounded ho sakta hai.
- Screenshot mein section cut off ya absent hai: Capture se pehle readiness check complete ho raha hai ya nahi dekhein. Sirf element screenshot ka auto-scroll lazy loading ko trigger ya complete karne ki guarantee nahi deta.
Performance aur reliability ke trade-offs
Scrolls ki sankhya, har condition ka timeout, aur page par content ki matra capture ke kul samay ko prabhavit karte hain. Count ya section-specific state par wait karna arbitrary lambi sleep se zyada arthpurn hai, par predicate ko sahi hona chahiye. Bounded scroll loop reliability ke liye zaroori hai: yeh page ke anant content ya repeated loading par process ko be-rok-tok chalne se bachata hai. Full-page screenshot lene se pehle tay karein ki aapko vaastav mein poora document chahiye; known section ka element screenshot zyada focused output deta hai.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Or skip the browser setup:
Agar aapko apna Puppeteer browser, scroll loop aur screenshot handling maintain nahi karna, ScreenshotNeo ek GET request se screenshot ya PDF deta hai. Neeche cURL example hai; API docs mein setup aur options dekhein.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo capture se pehle cookie/consent banners accept aur 60 se zyada known consent platforms, newsletter popups aur chat widgets remove kar sakta hai; har step ko band kiya ja sakta hai. Bot checks, blank pages, timeouts, failed loads aur cache hits par charge nahi hota, aur response mein X-Page-Verdict aur X-Billed headers batate hain ki request ka kya natija hua. Iska MCP server Claude, Cursor aur kisi bhi MCP client ko take_screenshot, get_page_info aur capture_pdf tools deta hai. Free plan mein har mahine 1,000 screenshots bina card ke hain; paid plans $5 mein 3,000 se shuru hote hain.
Free account banayein—1,000 screenshots har mahine, bina card ke.
Frequently Asked Questions
Kya `fullPage: true` khud lazy-loaded sections load karta hai?
Nahi. Pehle page ka scroll-triggered behavior chalayein aur content-ready condition verify karein; phir full-page screenshot lein.
Kya ek hi fixed delay har website ke liye kaafi hai?
Nahi. Loading behavior site-specific hai. Naye section, data change, ya loading state par aadharit condition behtar signal hai.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Kya Puppeteer locators scroll kar sakte hain?
Haan. Puppeteer interactions guide locator scrolling aur pre-action checks samjhati hai; content ready hone ka alag wait phir bhi zaroori ho sakta hai.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
