Хобрук: Ваш путь к мастерству в программировании

QuerySelector не удалось выполнить для элемента или не удалось найти соответствующий селектор

Я пытаюсь получить URL-адрес каждого изображения в «класс фигурки> img src». Веб-страница содержит список списков, и у каждого списка есть изображение.

Проблема заключается в том, что класс URL-адреса изображения переключается между 'class=" lazyloaded"' (*Обратите внимание на пробел перед именем) и 'class="is-higher-height lazyloaded"'.

Я думаю о запросе по строкам либо «ленивая загрузка», либо «is-higher-height.lazyloaded». Ничего не работает.

Как ни странно, я проверил в песочнице и нашел оба элемента. Ссылка ниже.

http://pagedemos.com/awr78g4nfehh/3

Ценим любую помощь! Спасибо.


html-структура

<div class="items-box-content">

   <!-- each section represents a single listing --> 
   <section class="items-box">
      <a href="http:url">

         <figure class="items-box-photo">
            <img data-src="imageurl.jpg" class=" lazyloaded" src="imageurl.jpg">

            <!-- sometimes class=" is-higher-height lazyloaded" -->
         </figure>

      </a>
   </section>

   <!--  many other listings --> 
   <section></section>...

</div>

Основные линии Кукловода


await page.evaluate(() => { 
  document.querySelector('section[class*="items-box"]');
});

let elements = await page.$$('section[class*="items-box"]');

let listImg    = await element.$eval('img.lazyloaded', img => img.getAttribute('src'));

Попробовал ниже для $eval, ничего не работает


//CSS versions
img.lazyloaded //captures 1 listing on debugger;
.lazyloaded                 
is-higher-height.lazyloaded //doesnt capture even 1
.is-higher-height.lazyloaded //doesnt capture even 1
img.lazyloaded.is-higher-height.lazyloaded //multiple classes

//XPath versions
'img[class*="lazyloaded"]'   // includes name 
'img.[class$="lazyloaded"]'  // ends with name 
'img.[class^="lazyloaded"]'  // starts with name 
'//img[class^="lazyloaded"]' //not valid selector


  • Как насчет .items-box img? 04.05.2019
  • на самом деле вы не используете querySelector afaict. это собственная реализация библиотеки. 04.05.2019
  • Я думаю, что это должно быть const srcs = await page.$$eval('.items-box img', img => img.src); (или просто const imgs = await page.$$eval('.items-box img');, чтобы получить все элементы изображения) 04.05.2019
  • Это мой запрос к полному коду stackoverflow.com/questions/55887523. Теперь ошибка results (массив) не определена. Ошибка от console.log(results) 04.05.2019
  • Одна проблема с этим кодом заключается в том, что вы возвращаете results из async в первой итерации цикла элемента. И селекторы слишком длинные и сложные. Например, чтобы получить h3s, вам нужно всего лишь .items-box h3 04.05.2019
  • Спасибо @ChrisG, где должны быть результаты? Моя ошибка остается, даже если я поставлю return results и console.log вне for (const search of searches) { и try 04.05.2019

Новые материалы

Разработчики — Избегайте сложностей глупо
Сложность управляется, а не побеждается «Простота — великая добродетель, но для ее достижения требуется тяжелая работа и образование, чтобы оценить ее. И что еще хуже: сложность продается..

Как сделать HTML динамическим с помощью JavaScript
Код JavaScript выполняется внутри страниц сайта. Таким образом, страница вашего сайта содержит метки HTML, а также пояснения (скрипты), составленные с использованием диалекта сценариев, такого как..

Деревья классификации и регрессии
Это мой второй пост об алгоритмах машинного обучения. Мой первый пост посвящен искусственным нейронным сетям, вы можете найти его ниже. Нейронные сети — базовое..

HMTL - Многозадачное обучение для решения задач НЛП
Достижение результатов SOTA путем передачи знаний между задачами Область обработки естественного языка включает в себя десятки задач, среди которых машинный перевод, распознавание именованных..

Решения DBA Metrix
DBA Metrix Solutions предоставляет удаленного администратора базы данных (DBA), который несет ответственность за внедрение, обслуживание, настройку, восстановление базы данных, а также другие..

Начало работы с Блум
Обзор и Codelab для генерации текста с помощью Bloom Оглавление Что такое Блум? Некоторые предостережения Настройка среды Скачивание предварительно обученного токенизатора и модели..

Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..