Estoy tratando de usar titiritero para seleccionar y hacer clic en una opción en un menú desplegable en una barra de navegación.
ya busqué. Siempre hay un page.select con la ID del menú desplegable, pero la cuestión es que no hay ninguna opción de valor.
¿Cómo puedo, por ejemplo, hacer que el titiritero haga clic en el elemento desplegable Tools2 ?
O, en el caso de un menú desplegable con opciones que cambian si eres un usuario diferente, ¿cómo puedo hacer que el titiritero siempre haga clic en la segunda opción de un menú desplegable? ¿Puedo usar CSS para hacer que esto funcione?
Aquí está el menú desplegable:
<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>Si los elementos desplegables ya están en el DOM, puede usar la pseudoclase CSS de nth-child para seleccionar uno específico:
await page.click('ul > li:nth-child(2) > div > a:nth-child(2)')li:nth-child(2) => el menú "Herramientas" (1 sería "Inicio", mientras que 3 sería el elemento de navegación "Usuario")a:nth-child(2) => el segundo elemento <a> dentro del menú desplegable, "Tools2"En caso de que estos elementos de la lista se generen dinámicamente, primero debe abrir el menú desplegable:
await page.click('ul > li:nth-child(2)') Luego proceda con la selección del segundo elemento <a> .
Si el contenido del texto es más confiable que la (segunda) posición dentro del menú desplegable, también puede usar la función contains() de XPath para detectar el elemento, devolverlo como un identificador de elemento y luego hacer clic en él:
const [item] = await page.$x('//a[contains(text(), "Tools2")]') await item.click() Nota: $x devuelve una matriz de elementos coincidentes, por lo tanto, debe usar un índice del elemento o usar la desestructuración ES6 como en mi ejemplo.
También puede usar page.$$eval para hacer clic en el elemento según su índice ( [1] será el segundo elemento dentro de la matriz de elementos desplegables):
await page.$$eval('ul > li:nth-child(2) > div > a', (elems) => elems[1].click())