javascript - querySelector 不适用于 puppeteer 中的子元素

Question

我正在尝试使用 puppeteer 抓取此页面:https://jcc.org/park-heights-indoor-pool-registration ，并将数据片段放入一个数组中(事件时间、标题、注册链接等)。

我将我正在抓取的页面的 html 复制到本地 html 文件中，一切正常(使用完全相同的代码!)，但是对于 puppeteer，它返回一个空错误。最重要的是，当我选择单个元素时，收集所有数据时没有错误!

代码:

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 Pool&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>
            &nbsp; | &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>
      &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>

我只是想从 .signUpGXP 类的链接中获取 href 数据，最后一个跨度标签“3 SPOTS LEFT”中的文本，div 中的标题文本.GXPTitle，以及 div.GXPDescription 中第一个链接的 data-date 属性。

如果我将 HTML 复制到本地文件中，这对 jQuery 工作正常，但在 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();


})();

我在这里获得了所有数据，但只有页面上的第一部分。

我将不胜感激。谢谢!

Answer 1

如果我在浏览器中运行评估函数，我会遇到同样的错误。看来问题是取消的事件没有注册链接。