Как нажать на элемент из списка выбора с кукловодом

Question

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

Все, что я узнал об этом после некоторого поиска в Google, - это выбрать элемент, но только когда список находится внутри элемента "select". Моя проблема в том, что HTML, который я пытаюсь автоматизировать, находится внутри div:

<div class="dropdown open dropdown--gray">
  <div class="dropdown__header">
     <div class="dropdown__field">other</div>
     <div class="dropdown__opener">
        <span class="icon icon-chevron-down"></span>
     </div>
  </div>
  <div class="dropdown__list">
    <div class="dropdown__list-item selected">other</div>
    <div class="dropdown__list-item">.org</div>
    <div class="dropdown__list-item">.co.uk</div>
    <div class="dropdown__list-item">.net</div>
    <div class="dropdown__list-item">.gov</div>
    <div class="dropdown__list-item">.de</div>
    <div class="dropdown__list-item">.fr</div>
    <div class="dropdown__list-item">.nl</div>
    <div class="dropdown__list-item">.com</div>
    <div class="dropdown__list-item">.be</div>
    <div class="dropdown__list-item">.jpg</div>
  </div>
</div>

Я пробовал это:

await page.click('div.dropdown__field');
const elementHandle4=await page.$$("div.dropdown__list-item");
await elementHandle4[8].click();

но на самом деле это не клик по элементу. Когда я открываю список вручную после запуска этого кода, я вижу, что он прокручивается вниз по прокрутке списка, но не нажимается на элемент.

Спасибо

Answer 1

Я думаю, вам нужно увидеть этот элемент, чтобы вызвать событие клика.Сначала вы должны прокрутить до позиции элемента, чтобы увидеть элемент, а затем вызвать событие щелчка.

---

Это работает для меня

const ListItemIndex = 10, ListItem = document.querySelector(`.dropdown__list > div:nth-child(${ListItemIndex})`);
document.querySelector(".dropdown__list").scroll({ behavior: 'smooth', top: ListItem.offsetTop });
ListItem.click()

Answer 2

Попробуйте что-то вроде этого:

await page.click('.dropdown__field');
await page.click('.dropdown__list > div:nth-child(8)');

UPDATE:

Это похоже на проблему в окне просмотра, потому что она работает правильно и выбирает опцию '.nl' без прокрутки с помощью следующего скрипта:

(async () =>  {
    const browser = await puppeteer.launch({ 
        headless: false,
        defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://userinyerface.com/game.html');
    await page.click('.dropdown__field');
    await page.click('.dropdown__list > div:nth-child(8)');
})();

Но это не будет работать, если я удалю defaultViewport: null свойство