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

Question

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

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

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

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

我尝试了另一种方法，我使用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')抱歉大选择器;身份证可以提供帮助。

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
});