Javascript 如何使用Puppeter从选择列表中单击元素

我正试图在一些网站上用Puppeter创建一个自动化，当我试图点击选择列表中的元素时，我遇到了一个问题

在谷歌搜索之后，我发现的只是选择一个项目，但只有当列表在“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('.dropdown__field');
await page.click('.dropdown__list > div:nth-child(8)');

更新：

它在视口中看起来像是问题，因为它工作正常，并且选择了“.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

属性，它将不起作用

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

更新：

它在视口中看起来像是问题，因为它工作正常，并且选择了“.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

属性

它将不起作用，我想您需要查看该元素才能触发单击事件。首先，必须滚动到元素的位置以查看元素，然后触发单击事件

---

它对我有用

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

---

我想您需要查看该元素才能触发单击事件。首先，必须滚动到元素的位置以查看元素，然后触发单击事件

---

它对我有用

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

---

---

如何在列表视图中向下滚动？当我尝试向下滚动时，它会滚动我的窗口。通知消息@AbdulsametFor scroll，您需要运行并等待一段JavaScript代码，使用求值方法：

document.querySelector（“.dropdown\u field”）。滚动（{behavior:'smooth'，top:250//List item top position}）新的解决方案适合我，所以你们能再次检查答案吗？因为它的傀儡程序应该是异步的，等待等等。所以我尝试你们的解决方案是：
wait page.evaluate（（）=>document.querySelector（.dropdown\u list>div:nth child（8）`）；等待页面。求值（（）=>document.querySelector（“.dropdown\u list”）。滚动（{behavior:'smooth'，top:document.querySelector（
.dropdown\u list>div:nth child（8）`）.offsetTop}）；等待页面。单击（'.下拉列表>第n个子项（8）；'但它不起作用@我可以在列表视图中向下滚动吗？当我尝试向下滚动时，它会滚动我的窗口。通知消息@AbdulsametFor scroll，您需要运行并等待一段JavaScript代码，使用求值方法：
document.querySelector（“.dropdown\u field”）。滚动（{behavior:'smooth'，top:250//List item top position}）新的解决方案适合我，所以你们能再次检查答案吗？因为它的傀儡程序应该是异步的，等待等等。所以我尝试你们的解决方案是：
wait page.evaluate（（）=>document.querySelector（.dropdown\u list>div:nth child（8）`）；等待页面。求值（（）=>document.querySelector（“.dropdown\u list”）。滚动（{behavior:'smooth'，top:document.querySelector（
.dropdown\u list>div:nth child（8）`）.offsetTop}）；等待页面。单击（'.下拉列表>第n个子项（8）；'但它不起作用@阿卜杜勒萨梅蒂已经厌倦了这一切。但它与post.Notify消息中描述的相同@Yevhen@GuyCohen请你提供链接试试好吗？尝试在单击之前滚动到元素<代码>等待页面。$$eval（'.下拉列表>div'，divs=>divs[8]。scrollIntoView（））它可以向下滚动整个网站，但仍然不起作用。链接是：我尝试自动填充字段。问题在于“其他”列表@耶夫赫尼已经厌倦了这一切。但它与post.Notify消息中描述的相同@Yevhen@GuyCohen请你提供链接试试好吗？尝试在单击之前滚动到元素<代码>等待页面。$$eval（'.下拉列表>div'，divs=>divs[8]。scrollIntoView（））它可以向下滚动整个网站，但仍然不起作用。链接是：我尝试自动填充字段。问题在于“其他”列表@叶文