代码之家  ›  专栏  ›  技术社区  ›  demouser123

从下拉列表中选择一个选项,该选项不是使用Select using puppeter实现的

  •  0
  • demouser123  · 技术社区  · 7 年前

    React AntD设计有一个下拉实现,它不使用 Select 标记以实现下拉列表。一个例子是 here . 我在我们的一个项目中也有类似的实现。

    AntD Drop Down

    下拉列表中的选项使用 ul li 如图所示的标记-

    Selection implementation

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

    为了 选择 ,我们可以使用 page.select() 方法如所述 this 所以讨论。我试过了,但这个下拉选择不起作用。

    我尝试了另一种方法 page.keyboard.type('ArrowDown') page.keyboard.type('Enter') 单击并使用键转到选项,但执行此操作将返回 TypeError: (intermediate value) is not a function 错误。

    2 回复  |  直到 7 年前
        1
  •  0
  •   Raul Rueda    7 年前

    最好的方法是点击 page.click ,在你的情况下,我会写 page.click('div.ant-dropdown.ant-dropdown-placement-bottomleft') 对不起,选档杆太大了,请出示身份证。

        2
  •  0
  •   Grant Miller    6 年前

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