我正在尝试使用 puppeteer 在某些网站上创建自动化,当我尝试单击选择列表内的元素时,我遇到了麻烦。
经过一些谷歌搜索后,我发现只有当列表位于“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();
但实际上它并不是点击该元素。 当我在运行此代码后手动打开列表时,我看到它向下滚动列表的滚动条,但没有单击该元素。
谢谢
最佳答案
尝试这样的事情:
await page.click('.dropdown__field');
await page.click('.dropdown__list > div:nth-child(8)');
更新:
它看起来像视口(viewport)中的问题,因为它工作正常并选择“.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
属性,它将不起作用
关于javascript - 如何使用 puppeteer 单击选择列表中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56901588/