Невозможно прикрепить новые обработчики событий щелчка к элементу HTML с помощью Puppeteer

Почему событие щелчка по привязке не запускается при нажатии вручную в сеансе отладки из VS Code?

В общем вот моя цель:

  • Перейдите на linkedin.com, используя Puppeteer в headful Chrome.
  • Авторизоваться
  • Перейдите на сайт linkedin.com/jobs.
  • Прикрепите обработчик кликов для всех ссылок на странице.
  • Приостановите выполнение node.js после присоединения обработчиков событий
  • Щелкните ссылки вручную с помощью мыши, чтобы увидеть этот новый обработчик событий в действии.

В коде это то, что я получил

const puppeteer = require('puppeteer')
async function main() {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage();

    await page.goto('https://www.linkedin.com/');
    await login(page);
    await page.goto('https://www.linkedin.com/jobs/');
    await attachLinks(page);
    await page.screenshot({ path: "bla" })
    browser.close();
};

async function attachLinks(page) {
    const bodyHandle = await page.$('body');
    await page.evaluate( (body, numLinks=3) => {
        let anchors = Array.from( body.querySelectorAll("a") ).
            filter( (e, i) => i < numLinks );
        for(let i = 0; i < anchors.length; i++) {
            let a = anchors[i];
            console.log(`Binding for ${a.href}`);

            // This event does not trigger!!!!!
            a.addEventListener("click", e => { 
                console.log("some one clicked the link");
                e.preventDefault(); 
                e.stopPropagation(); 
                return false; 
            });
        };
    }, bodyHandle);
    await bodyHandle.dispose();
}

main();

Затем, используя VS Code и поддержку отладки node.js, я поставил точку останова в строке await page.screenshot({ path: "bla" }) после прикрепления события onclick для тегов <a>. В открывшемся браузере (поскольку для безголового установлено значение false), пока код ожидает возобновления, я щелкнул мышью теги <a> в <body>, ожидая увидеть «кто-то щелкнул ссылку» в головокружительной отладке Chrome. консоль браузера. Но я не вижу журналов ни в браузере, ни в консоли отладки VS Code. Я что-то упустил здесь?


javascript puppeteer
person Nitin    schedule 17.06.2018    source источник
comment
где вы ожидаете, что консоль будет отображаться?   -  person Lafi    schedule 17.06.2018
comment
Чтобы уточнить, вы просматриваете консоль DevTools браузера для этих журналов? Или консоль отладки в VSCode?   -  person tony19    schedule 17.06.2018
comment
Ага, в головной консоли браузера, так как функция attachLinks добавляет к ним обработчик событий onClick. Я также дважды проверил консоль отладки VS Code. Там тоже ничего.   -  person Nitin    schedule 18.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

Это потому, что вы на самом деле не нажимаете тег привязки. Вы прикрепили к нему событие «щелчок» и определили, что произойдет, когда мы щелкнем по нему, но на самом деле вы не щелкаете по нему. Просто добавь a.click() лайк

       // This event will now trigger
        a.addEventListener("click", e => { 
            console.log("some one clicked the link");
            e.preventDefault(); 
            e.stopPropagation(); 
            return false; 
        });

        a.click();

см. имя addEventListener, вы подключаете прослушиватель событий, а не нажимаете на него

person Tripti Rawat    schedule 18.06.2018
comment
Спасибо Трипти. Но моя цель — щелкнуть вручную (а не через код) во время сеанса отладки, как объясняется в вопросе после кода :) - person Nitin; 18.06.2018
comment
@Nitin извини за это. Попробуйте поставить await page.waitFor(2*1000); после строки await page.goto('https://www.linkedin.com/jobs/'); - person Tripti Rawat; 18.06.2018
comment
Вы также можете использовать await page.waitForNavigation(); вместо waitFor(). Вся идея состоит в том, чтобы немного подождать, пока страница загрузится, прежде чем запускать другое событие. - person Tripti Rawat; 18.06.2018
comment
Спасибо за все отличные советы Трипти. Моя проблема в том, что я не могу остановить браузер, и в этом случае помогли бы waitFor варианты. Используя отладчик VS Code, я приостановил работу браузера после прикрепления ссылок, поставив точку останова на await page.screenshot({ path: "bla" }). Пока он ожидает возобновления, я вручную щелкаю ссылки на странице, но не вижу операторов консоли от обработчиков событий кликов, намекающих на то, что они не прикреплены - person Nitin; 19.06.2018
comment
Да, хорошо, но мое предложение остается прежним. Почему я это говорю, так это то, что после goto не используется waitFor, переменная bodyHandle остается нулевой, из-за чего ссылки не прикрепляются. Итак, я просто добавлю последний комментарий: вы использовали waitFor в своем коде, а затем отлаживали его в коде VS? Если да, это все еще дает те же результаты? Если опять да, то остановлюсь на этом, т.к. помочь в этом плане не смогу :) @Nitin - person Tripti Rawat; 19.06.2018
comment
А, я понимаю, о чем вы говорите, я изменил goto на await page.goto('https://www.linkedin.com/jobs/', {waitUntil: 'networkidle2'});, но по-прежнему не вижу журналов консоли при переходе по ссылкам. Спасибо за помощь @tripti - person Nitin; 20.06.2018