从下拉列表中选择一个未使用“使用Puppeteer选择”实现的选项

Question

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错误。

Answer 1

最好的方法是单击page.click，在您的情况下，我会为大型选择器写page.click('div.ant-dropdown.ant-dropdown-placement-bottomleft')抱歉；一个ID可能会有帮助。

Answer 2

使用给定的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
});