Кукольник page.click работает, но page.evaluate + document щелчок не работает

Question

Я видел так много сообщений (например, см. здесь и здесь ), в которых говорится, что я могу нажать на что-нибудь с помощью следующего кода,

await page.click('.route-redirect-box');   // via Puppeteer page.click

await page.evaluate((css_selector) => {
  document.querySelector(css_selector).click();  // or via page.evaluate
}, css);

Однако, как я тестировал на некоторых веб-сайтах, похоже, что page.click всегда работает, а page.evaluate - нет, используя режим headless: false.

Например, этот веб-сайт page, я попытался щелкнуть что-нибудь следующим образом:

var css = '#searchPaginationTop > nav > a:nth-child(5)';
await page.evaluate((css_selector) => { document.querySelector(css_selector).click();}, css);

ничего не произошло, но если я использую page.click, это сработало, как и ожидалось.

Я думаю, что элемент, который я хотел щелкнуть, не является обычным интерактивным элементом, поскольку код html для этого элемента выглядит следующим образом:

<a class="svg" data-goto-page="3" data-total-pages="3" data-ga="event" data-ga-category="Brands at allbeauty-Burberry-Pagination" data-ga-action="Brands at allbeauty-Burberry-Pagination-Next-Touch" data-ga-label="Brands at allbeauty-Burberry-Pagination-Next-Link">
    <svg viewBox="0 0 21.9 38.7" alt="Next Page" title="Next Page ">
        <use xlink:href="#icon-ab-arrow-right">
        </use>
    </svg>
</a>

Может быть потому, что этот элемент является некоторым data-ga материал, поэтому page.evaluate не может нажать на него?

Answer 1

Насколько я могу судить, контент, похоже, вводится динамически. Это означает, что, используя waitForSelector из Puppeteer, вы можете подождать, пока это произойдет, прежде чем продолжить. Что-то в этом духе должно быть сделано (не могу воспроизвести это сам, так как я не знаю, как вызвать обновление nav):

await page.click('.route-redirect-box');
const css = '#searchPaginationTop > nav > a:nth-child(5)';
await page.waitForSelector(css);
await page.evaluate((css_selector) => { document.querySelector(css_selector).click();}, css);

Answer 2

Короткий ответ

• page.evaluate(() => document.querySelector('SELECTOR').click()); просто запускает событие click
• page.click('SELECTOR') пытается имитировать c поведение человека при нажатии

Объяснение

Давайте проверим документацию для обоих методов, чтобы действительно понять, что происходит.

page.evaluate(() => document.querySelector('SELECTOR').click());

Давайте посмотрим, что документация MDN говорит:

[...] Он запускает событие щелчка элемента.

Это все, что он делает. Он just запускает событие click, так что вызываются все обработчики, прослушивающие это событие нажатия элемента. Это означает, что ему все равно, находится ли элемент за пределами текущего окна просмотра. Элемент может быть даже скрыт (через CSS), и событие click будет по-прежнему срабатывать.

Давайте сравним это с «пути кукловода»:

page.click

Часть документации кукловода , касающаяся page.click:

Этот метод выбирает элемент с selector, прокручивает его, если необходимо, и затем использует page.mouse, чтобы щелкнуть в центре элемента. [...]

Это означает, что кукловод подражает человеческому поведению здесь. Сначала элемент прокручивается в поле зрения, затем мышь перемещается поверх элемента (вызывая любые другие события, такие как mouseover, mouseenter, et c. В пути). Наконец, кнопка нажата путем симуляции мыши (см. Соответствующий класс Mouse в коде кукловода). Это также вызывает любые связанные события (например, mousedown).

Сложным библиотекам пользовательского интерфейса может не понравиться, когда вы сами запускаете JavaScript события. Имейте в виду, они часто оптимизированы для взаимодействия с человеком, а не для взаимодействия с ботами. Это означает, что библиотека пользовательского интерфейса может прослушивать событие mousedown или mouseenter (в качестве примера) вместо непосредственного прослушивания события click.

"Человекоподобный"

При взаимодействии с неизвестным веб-сайтом лучше всего стараться вести себя как можно более человечно. Даже на страницах, которые не имеют каких-либо определенных c "противоботовых" мер, могут использоваться фреймворки, которые ожидают определенного c потока событий.

Кстати, вы не единственный, кто имеет это проблема. Проверьте эти вопросы на наличие похожих проблем:

• Событие щелчка не запускается в приложении Angular
• Настройка value поля ввода не работает (также Angular)