CODEWITHSUNDEEP
javascriptdrop-down-menupuppeteer
Renato C.Francisco
Renato C.Francisco

Reputation: 157

Select an specific option from Dropdown Menu without values using Puppeteer

I am trying to use puppeteer to select and click an option in a dropdown menu in a navbar.

I already searched. There is always a page.select with the ID of the dropdown menu, but the thing is, there is no value option.

How can i, for example, make puppeteer click on the Tools2 dropdown item?
Or, in a case of a dropdown menu with options that changes if you are a different user, how can i make puppeteer always click on the second option of a dropdown? Can i use CSS to make this work?

Here is the dropdown menu:

<ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Tools
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Tools1</a>
              <a class="dropdown-item" href="#">Tools2</a>
              <a class="dropdown-item" href="#">Tools3</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              User
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a href="#" class="dropdown-item" data-toggle="modal" data-target="#myModal">Create users</a>
              <a method="get" class="dropdown-item" href="/usuario">Manage users</a>
              <a class="dropdown-item" href="#">Profile</a>
              <a method="get" action="/usuario/logout" class="dropdown-item" href="/">Logout</a>
            </div>
          </li>
        </ul>

Upvotes: 1

Views: 1338

Answers (1)

theDavidBarton
theDavidBarton

Reputation: 8841

CSS selector

If the dropdown items are already in the DOM you can use the nth-child CSS pseudo-class to select a specific one:

await page.click('ul > li:nth-child(2) > div > a:nth-child(2)')
  • li:nth-child(2) => the "Tools" menu (1 would be the "Home", while 3 would be the "User" nav-item)
  • a:nth-child(2) => the second <a> element within the dropdown, "Tools2"

In case these list items are dynamically generated then you first need to open the dropdown:

await page.click('ul > li:nth-child(2)')

Then proceed with selecting the 2nd <a> element.

XPath selector

If the text content is more reliable than the (second) position within the dropdown then you can also use XPath's contains() function to detect the element, return it as an element handle then click it :

const [item] = await page.$x('//a[contains(text(), "Tools2")]')
await item.click()

Note: $x returns an array of matched items, hence you either need to use an index of the item or use ES6 destructuring as in my example.

$$eval approach

You can also use page.$$eval to click the item based on its index ([1] will be the second element within the array of dropdown elements):

await page.$$eval('ul > li:nth-child(2) > div > a', (elems) => elems[1].click())

Upvotes: 2

Related Questions