从下拉列表中选择未使用 Select using Puppeteer 实现的选项答案

【问题标题】：Selecting an option from drop down which is not implemented using Select using Puppeteer从下拉列表中选择未使用 Select using Puppeteer 实现的选项
【发布时间】：2019-03-03 10:12:30
【问题描述】：

React AntD 设计有一个下拉实现，它不使用Select 标签来实现下拉。一个例子是here。我在我们的一个项目中有一个类似的实现。

下拉列表中的选项使用ul 和li 标签填充，如图所示-

如何通过此下拉列表中的索引处理或选择任何选项？

对于Select，我们可以使用this SO讨论中提到的page.select()方法。我试过了，但这个下拉选择不起作用。

我尝试了另一种方法，我使用 page.keyboard.type('ArrowDown') 和 page.keyboard.type('Enter') 单击并使用键转到选项，但这样做会返回 TypeError: (intermediate value) is not a function 错误。

【问题讨论】：

标签： javascript drop-down-menu puppeteer

【解决方案1】：

使用您提供的example link，首先，您必须单击下拉链接以生成下拉列表。

之后，您可以按索引点击下拉菜单项链接：

await page.evaluate(() => {
  const dropdown_link = document.querySelector('#components-dropdown-demo-trigger .ant-dropdown-link');

  dropdown_link.click();

  const dropdown_menu_item_links = document.querySelectorAll('.ant-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-item > a');

  dropdown_menu_item_links[0].click(); // Select Menu Item Link by Index
});

【讨论】：

我很困惑是否接受这个解决方案。我对我拥有的平台进行了同样的尝试，它从下拉列表中选择了选项。但是，在此之后的其他步骤（如page.type）不会执行。有什么理由会发生这种情况？
@demouser123 由于 Puppeteer 正在导航到不同的页面（单击下拉菜单中的链接），您应该可以在之后放置 await page.waitForNavigation();，然后您应该可以使用 page.type()在新页面上。
对不起。我应该更清楚。我实施的解决方案是用于内部 Web 平台，具有相同的下拉菜单。就我而言，没有导航到其他网站。
@demouser123 在这种情况下，您应该能够使用 document.querySelectorAll( '.ant-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-item' )[0].click() 按索引从下拉菜单中单击项目（无需重定向到任何关联的链接）。然后，您可以在同一页面上继续使用page.type()。如果这不起作用，则可能在您引用的页面上的 mousedown 或 mouseup 上触发了某些事件，导致意外结果。

【解决方案2】：

最好的方法是点击page.click，在你的情况下，我会写page.click('div.ant-dropdown.ant-dropdown-placement-bottomleft') 对不起大选择器； ID 可能会有所帮助。

【讨论】：

我在try-puppeteer.appspot.com 中使用点击测试了一个示例，如果您需要代码，请告诉我。
这会点击元素对吗？如何进行选择？
是的，现在你为元素实现了一个新的点击，类似于这个 page.click('div.ant-dropdown.ant-dropdown-placement-bottomleft > ul > li:nth-child(3 )');