Блог

Я пытаюсь очистить эту страницу с помощью puppeteer: https://jcc.org/park-heights-indoor-pool-registration , и поместить фрагменты данных в массив (время события, название, ссылка для регистрации и т.д.).

Я скопировал html страницы, которую я очищаю, в локальный HTML-файл, и все это работает нормально (с точно таким же кодом!), Но с puppeteer он возвращает ошибку null. Кроме того, когда я выбираю один элемент, при сборе всех данных ошибок нет!

Код:

 const puppeteer = require('puppeteer');

(async () => {

    let jcc_url = 'https://jcc.org/park-heights-indoor-pool-registration';


    let browser = await puppeteer.launch();
    let page = await browser.newPage();

    await page.goto(jcc_url, {waitUntil: 'networkidle0'});

    let data = await page.evaluate(() => {

        let slots_array = [];

        $(".GXPEntry").each(function (index, element) {

           slots_array[index] = {
                index: index,
                cancelled: undefined,
                time: element.querySelector(".GXPTime").textContent,
                title: element.querySelector('.GXPTitle').textContent,
                link: element.querySelector('a.signUpGXP').getAttribute("href"),
                availability: element.querySelector('div.GXPDescription span').textContent,
                dayOfWeek: element.querySelector('a').getAttribute('data-date')
            };

            if (slots_array[index].title === "CANCELED: Lap Swimming - Men's Only"
                ||
                slots_array[index].title === "CANCELED: Lap Swimming - Women's Only") {
                slots_array[index].cancelled = true;
            } else {
                slots_array[index].cancelled = false;
            }
        });

        return slots_array;

    });

    console.log(data);

    await browser.close();

    })();
  

Вот как выглядит HTML-макет страницы, на которую я ориентируюсь:

 <div class="GXPEntry">
        <div class="GXPTime">8:15am-9:00am</div>
        <div class="GXPTitle"><img src="https://groupexpro.com/schedule/logos/custom/logo_53760.jpg"
         style="display: block; max-height: 30px; max-width: 120px; padding: 0px 5px 5px 0px;"
         title="">Lap Swimming - Men's Only<span
         style="position: relative; top: 2px; left: 4px;"><a class="signUpGXP removeIconGXP"
         href="https://groupexpro.com/gxp/reservations/start/index/11814665/10/05/2020?e=1"
         title="This class requires a reservation"><i
         style="background-image: url('https://groupexpro.com/gxp/design/img/glyphicons-halflings.png'); background-position: -96px -72px; background-repeat: no-repeat; display: inline-block; height: 14px; vertical-align: text-top; width: 14px; position: relative; top: 0px; left: -4px; float: left; margin-right:6px; "></i></a></span>
        </div>
        <div class="GXPInstructor">Staff</div>
        <div class="GXPStudio">Indoor Poolamp;nbsp;</div>
        <div class="GXPCategory">Aquatics</div>
        <div class="GXPLocation">Park Heights</div>
        <div class="GXPDescription">
            <a 11814665 alt="11814665" class="descGXP" data-date="10/05/2020" href="javascript://""="">Description</a>
            amp;nbsp; | amp;nbsp;
            <a alt="11814665" class="signUpGXP"
               href="https://groupexpro.com/gxp/reservations/start/index/11814665/10/05/2020?e=1"
               textmsg="3 SPOTS LEFT">
                Sign Up</a>
      amp;nbsp;      <a alt="Add to Calendar" class="addToCalendar" href="#">
                 <img alt="Add to Calendar" border="0" height="14" src="https://groupexpro.com/schedule/embed/images/ics.gif">
             </a>
            <br><br><span>3 SPOTS LEFT</span>
        </div>
  

Я просто пытаюсь получить данные href из ссылки с классом of .signUpGXP , текст в последнем теге span «ОСТАЛОСЬ 3 МЕСТА», текст заголовка из div.GXPTitle , и data-date атрибут из первой ссылки в div.GXPDescription .

Это отлично работает с jQuery, если я копирую HTML в локальный файл, но в pupputeer это не работает и выдает мне эту ошибку:

  (node:22638) UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: Cannot read property 'getAttribute' of null
    at HTMLDivElement.<anonymous> (__puppeteer_evaluation_script__:12:59)
    at Function.each (https://jcc.org/sites/default/files/js/js_POjCvph0DpQRBLbuAoUSghIegyfU_5lXHo4ESl4z0tw.js:2:2975)
    at $.fn.init.each (https://jcc.org/sites/default/files/js/js_POjCvph0DpQRBLbuAoUSghIegyfU_5lXHo4ESl4z0tw.js:2:835)
    at __puppeteer_evaluation_script__:5:24
    at ExecutionContext._evaluateInternal (/Users/moshe/coding-workspace/jcc-ph-pool-register/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217:19)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async ExecutionContext.evaluate (/Users/moshe/coding-workspace/jcc-ph-pool-register/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:106:16)
    at async /Users/moshe/coding-workspace/jcc-ph-pool-register/app.js:13:16
(node:22638) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:22638) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
  

Не совсем уверен, почему он не может найти свойство. Это работает совершенно нормально, если я делаю именно это:

     const puppeteer = require('puppeteer');

(async () => {

    let jcc_url = 'https://jcc.org/park-heights-indoor-pool-registration';

    let browser = await puppeteer.launch();
    let page = await browser.newPage();

    await page.goto(jcc_url, {waitUntil: 'networkidle2'});

    let data = await page.evaluate(() => {
        let time = document.querySelector('.GXPTime').innerText;
        let title = document.querySelector('.GXPTitle').innerText;
        let availability = document.querySelector('.GXPDescription span').innerText;
        let link = document.querySelector('.signUpGXP').href;
        let dayOfWeek = document.querySelector('.GXPDescription a').getAttribute('data-date');

        return {
            time,
            title,
            availability,
            link,
            dayOfWeek
        }

    });

    console.log(data);

    debugger;

    await browser.close();


})();
  

Я получаю все данные здесь, но только первый раздел на странице.

Я был бы признателен за помощь в этом. Спасибо!

У меня такая же ошибка, если я запускаю вычисляемую функцию в браузере. Похоже, проблема в том, что события canseled не имеют ссылок для регистрации.