РЕДАКТИРОВАТЬ: я добавил рабочий фрагмент для конкретного веб-сайта, указанного в вопросе.
Если вы занимаетесь очисткой, иногда вы должны разбить пользовательский опыт на несколько кусочков, чтобы имитироватьреальный пользователь, чтобы получить те фактические данные, которые он получит.
Один из простых способов справиться с бесконечной прокруткой - удалить все текущие элементы и прокручивать, пока каждый раз не появятся еще 10 или 100 новых элементов, илидаже пытаясь скрести все сразу.
Но вы также можете думать по-другому,
- получить первый элемент,
- нажмите, чтобы открыть в новой вкладке,
- парсинг данных,
- закрыть вкладку,
- удалить элемент,
- и перейти к следующему элементу.Прокрутите и дождитесь появления нового элемента.
Проблема с концепцией заключается в том, что вы никогда не узнаете, как запускаются прокрутка и нажатие.Для прокрутки на разных сайтах может быть несколько событий.И предоставленный сайт находится в vueJS.
Фрагмент кода
Селектор для каждого продукта: #__layout > section > main > section > section > div.products > div > div
.
Мы прокрутим селектор, разберемся с ним, а затем удалим его.После этого мы запустим событие прокрутки, чтобы браузер узнал, что что-то изменилось.
window.scrollTo(0, 0);
const selector = `#__layout > section > main > section > section > div.products > div > div`;
const element = document.querySelector(selector)
element.scrollIntoView()
element.remove()
Результат: (анимация gif)
Что круто, нам не нужно переходить к нижней частистраница, чтобы вызвать изменение.Посмотрите, как изменяется полоса прокрутки во время удаления.
Это работает и на таких сайтах, как producthunt. Video Link для лучшего качества просмотра.
const delay = d=>new Promise(r=>setTimeout(r,d))
const scrollAndRemove = async () => {
// scroll to top to trigger the scroll events
window.scrollTo(0, 0);
const selector = `.title_9ddaf`;
const element = document.querySelector(selector);
// stop if there are no elements left
if(element){
element.scrollIntoView();
// do my action
// wait for a moment to reduce load or lazy loading image
await delay(1000);
console.log(element.innerText);
// end of my action
// remove the element to trigger some scroll event somewhere
element.remove();
// return another promise
return scrollAndRemove()
}
}
scrollAndRemove();