当我向下滚动时，我处于创建新内容的情况。新内容具有特定的类名。
如何继续向下滚动直到所有元素都加载完毕？
换句话说，我想达到这样的阶段：如果我继续向下滚动，则不会加载任何新内容。
我正在使用代码向下滚动，再加上
await page.waitForSelector('.class_name');
这种方法的问题在于，在所有元素都加载后，代码继续向下滚动，没有创建新元素，最终出现超时错误。
这是代码：
await page.evaluate( () => {
window.scrollBy(0, window.innerHeight);
});
await page.waitForSelector('.class_name');
试一试：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto('https://www.yoursite.com');
await page.setViewport({
width: 1200,
height: 800
});
await autoScroll(page);
await page.screenshot({
path: 'yoursite.png',
fullPage: true
});
await browser.close();
})();
async function autoScroll(page){
await page.evaluate(async () => {
await new Promise((resolve, reject) => {
var totalHeight = 0;
var distance = 100;
var timer = setInterval(() => {
var scrollHeight = document.body.scrollHeight;
window.scrollBy(0, distance);
totalHeight += distance;
if(totalHeight >= scrollHeight){
clearInterval(timer);
resolve();
}
}, 100);
});
});
}
向下滚动到页面底部可以通过两种方式完成：
document.querySelectorAll('.class_name').length检查是否生成了更多内容）这是一个在纯 JavaScript 中使用scrollIntoView和选择器（假设.class_name是我们滚动到更多内容的选择器）的实现，我们可以在浏览器中运行它：
方法一：使用 scrollIntoView 和选择器
const delay = 3000;
const wait = (ms) => new Promise(res => setTimeout(res, ms));
const count = async () => document.querySelectorAll('.class_name').length;
const scrollDown = async () => {
document.querySelector('.class_name:last-child')
.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
}
let preCount = 0;
let postCount = 0;
do {
preCount = await count();
await scrollDown();
await wait(delay);
postCount = await count();
} while (postCount > preCount);
await wait(delay);
在此方法中，我们比较.class_name滚动前 ( preCount) 和滚动后 ( postCount)的选择器数量，以检查我们是否位于页面底部：
if (postCount > precount) {
// NOT bottom of page
} else {
// bottom of page
}
这里有两种可能的实现，使用setTimeout或setInterval使用scrollBy纯 JavaScript，我们可以在浏览器控制台中运行：
方法 2a：使用 setTimeout 和 scrollBy
const distance = 100;
const delay = 100;
while (document.scrollingElement.scrollTop + window.innerHeight < document.scrollingElement.scrollHeight) {
document.scrollingElement.scrollBy(0, distance);
await new Promise(resolve => { setTimeout(resolve, delay); });
}
方法 2b：使用 setInterval 和 scrollBy
const distance = 100;
const delay = 100;
const timer = setInterval(() => {
document.scrollingElement.scrollBy(0, distance);
if (document.scrollingElement.scrollTop + window.innerHeight >= document.scrollingElement.scrollHeight) {
clearInterval(timer);
}
}, delay);
在这种方法中，我们是在比较document.scrollingElement.scrollTop + window.innerHeight与document.scrollingElement.scrollHeight检查我们是否在页面的底部：
if (document.scrollingElement.scrollTop + window.innerHeight < document.scrollingElement.scrollHeight) {
// NOT bottom of page
} else {
// bottom of page
}
如果上面的任一 JavaScript 代码将页面一直向下滚动到底部，那么我们就知道它正在工作，我们可以使用 Puppeteer 自动执行此操作。
下面是示例 Puppeteer Node.js 脚本，它们将向下滚动到页面底部并在关闭浏览器之前等待几秒钟。
Puppeteer 方法 1：使用带有选择器 ( .class_name) 的scrollIntoView
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: ['--window-size=800,600']
});
const page = await browser.newPage();
await page.goto('https://example.com');
const delay = 3000;
let preCount = 0;
let postCount = 0;
do {
preCount = await getCount(page);
await scrollDown(page);
await page.waitFor(delay);
postCount = await getCount(page);
} while (postCount > preCount);
await page.waitFor(delay);
await browser.close();
})();
async function getCount(page) {
return await page.$$eval('.class_name', a => a.length);
}
async function scrollDown(page) {
await page.$eval('.class_name:last-child', e => {
e.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
});
}
Puppeteer 方法 2a：使用 setTimeout 和 scrollBy
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: ['--window-size=800,600']
});
const page = await browser.newPage();
await page.goto('https://example.com');
await scrollToBottom(page);
await page.waitFor(3000);
await browser.close();
})();
async function scrollToBottom(page) {
const distance = 100; // should be less than or equal to window.innerHeight
const delay = 100;
while (await page.evaluate(() => document.scrollingElement.scrollTop + window.innerHeight < document.scrollingElement.scrollHeight)) {
await page.evaluate((y) => { document.scrollingElement.scrollBy(0, y); }, distance);
await page.waitFor(delay);
}
}
Puppeteer 方法 2b：使用 setInterval 和 scrollBy
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: ['--window-size=800,600']
});
const page = await browser.newPage();
await page.goto('https://example.com');
await page.evaluate(scrollToBottom);
await page.waitFor(3000);
await browser.close();
})();
async function scrollToBottom() {
await new Promise(resolve => {
const distance = 100; // should be less than or equal to window.innerHeight
const delay = 100;
const timer = setInterval(() => {
document.scrollingElement.scrollBy(0, distance);
if (document.scrollingElement.scrollTop + window.innerHeight >= document.scrollingElement.scrollHeight) {
clearInterval(timer);
resolve();
}
}, delay);
});
}
这里的许多解决方案都假设页面高度是恒定的。即使页面高度发生变化（例如，当用户向下滚动时加载新内容），该实现也能工作。
await page.evaluate(() => new Promise((resolve) => {
var scrollTop = -1;
const interval = setInterval(() => {
window.scrollBy(0, 100);
if(document.documentElement.scrollTop !== scrollTop) {
scrollTop = document.documentElement.scrollTop;
return;
}
clearInterval(interval);
resolve();
}, 10);
}));
基于这个网址的答案
await page.evaluate(() => {
window.scrollBy(0, window.innerHeight);
});
容易得多：
await page.evaluate(async () => {
let scrollPosition = 0
let documentHeight = document.body.scrollHeight
while (documentHeight > scrollPosition) {
window.scrollBy(0, documentHeight)
await new Promise(resolve => {
setTimeout(resolve, 1000)
})
scrollPosition = documentHeight
documentHeight = document.body.scrollHeight
}
})