1

The React AntD design has a drop down implementation that doesn't use the Select tag to implement a drop down. One example is here . I have a similar implementation in one of our projects.

AntD Drop Down

The options from the drop down are populated using the ul and li tags as shown in the image -

Selection implementation

How to handle or select any option via an index on this drop down?

For Select , we can use page.select() method as mentioned in this SO discussion. I tried this but this drop down selection doesn't work.

I tried another approach where I used the page.keyboard.type('ArrowDown') and page.keyboard.type('Enter') to click and use the keys to go to an option but doing this returns TypeError: (intermediate value) is not a function error.

demouser123
  • 4,108
  • 9
  • 50
  • 82

2 Answers2

1

Using the example link that you have given, first, you must click the dropdown link to generate the dropdown list.

Afterwards, you can click the dropdown menu item link by index:

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
});
Grant Miller
  • 27,532
  • 16
  • 147
  • 165
  • I am confused whether to accept this solution or not. I tried the same with the platform I have and it selects the option from the drop down. However, other steps like `page.type` after this are not executed. Any reason why that would happen? – demouser123 Jul 31 '18 at 11:59
  • @demouser123 Since Puppeteer is navigating to a different page (clicking the link in the dropdown menu), you should be able to place `await page.waitForNavigation();` afterwards, and then you should be able to use `page.type()` on the new page. – Grant Miller Jul 31 '18 at 12:15
  • Sorry. I should have been more clear. The solution I implemented was for an internal web platform, that has the same drop down. In my case, there is no navigation to other website. – demouser123 Jul 31 '18 at 12:23
  • @demouser123 In this case, you should be able to use `document.querySelectorAll( '.ant-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-item' )[0].click()` to click an item from the dropdown menu by index (without redirecting to any associated link). Then, you can continue to use `page.type()` on the same page. If this doesn't work, then there may be some event firing on `mousedown` or `mouseup` on the page you are referencing causing unexpected results. – Grant Miller Jul 31 '18 at 22:09
0

The best method would be click page.click, in your case I will write page.click('div.ant-dropdown.ant-dropdown-placement-bottomleft') sorry for the large selector; an ID could help.

Raul Rueda
  • 650
  • 5
  • 16
  • I tested an example using click in https://try-puppeteer.appspot.com/, if you need the code let me know. – Raul Rueda Jul 30 '18 at 15:48
  • This will click on the element right? How do I make a selection? – demouser123 Jul 30 '18 at 15:54
  • Yes, now you implement a new click for the element something like this page.click('div.ant-dropdown.ant-dropdown-placement-bottomleft > ul > li:nth-child(3)'); – Raul Rueda Jul 30 '18 at 15:57