Question

我正在尝试使用puppeteer在某些网站上创建自动化程序，当我尝试单击选择列表中的元素时，遇到了麻烦。

在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

尝试这样的事情：

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属性，它将无法正常工作

Answer 2

我想您需要查看该元素才能触发点击事件。首先，必须滚动到元素的位置才能看到该元素，然后触发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()

如何使用木偶

2 个答案: