Soy bastante nuevo en el dramaturgo y no puedo encontrar una solución sobre cómo obtener el padre del elemento. Esto es lo que tengo hasta ahora:
const deliveryItems = await page.locator('.js-delivery-container'); //Items const deliveryMethod = deliveryItems.locator('input[value="50"]'); //input in items selected by value const example_parent = await deliveryMethod.closest('.js-delivery-name'); //name what i want to check await expect(example_parent).toHaveText('Osobní odběr'); //check if selected right deliveryPero cuando lo ejecuto... hay un error que aparece en la consola:
TypeError: deliveryMethod.closest is not a function 33 | 34 | const deliveryMethod = deliveryItems.locator('input[value="50"]'); > 35 | const example_parent = await deliveryMethod.closest('.js-delivery-name');¿Alguien puede explicarme esto? Gracias
Mi estructura se ve así:
<div class="select-content-box js-delivery-container"> <div class="select-content delivery-icon-factory"> <div class="extended-title transport-icon js-delivery-name">Osobní odběr</div> <div class="extended-price js-delivery-price"></div> <div class="select-btn"> <label class="label toggle"> <input type="radio" name="radio-delivery" value="50"> <div class="toggle-control"></div> </label> </div> <div class="cleaner"></div> <div class="select-address" style=""></div> </div> </div>El método ElementHandle.closest() que está probando no existe en la API en este momento (o aún no está disponible en la versión de Playwright que usa, solo lo encontré en esta discusión #6015 ). Esa es la razón del error.
Desea encontrar una conexión entre el campo de entrada en función de su valor ( input[value="50"] ) y el elemento .js-delivery-name que no es posible, o al menos cualquier .parentElement?.parentElement?.nextSibling?.nextSibling... La estructura .parentElement?.parentElement?.nextSibling?.nextSibling... sería extremadamente frágil, lo mismo se aplica a los ejes XPath (ni siquiera están en relación hijo-antepasado aquí sino en una especie de relación "segunda sobrina/sobrino-segunda tía/tío" ).
Sugiero lo siguiente. "El dramaturgo puede seleccionar elementos según el diseño de la página . Estos se pueden combinar con CSS normal para obtener mejores resultados".
1-2.) desired name within + delivery items: utilizando el combinador secundario y el selector universal , puede componer patrones que pueden capturar los elementos deseados dentro de un elemento contenedor, por ejemplo: .js-delivery-container > * .js-delivery-name
3.) above this input: cuando tenga el selector exacto, puede agarrarlo encontrando el elemento más cercano que coincida con otra consulta de selector CSS en direcciones específicas con :above() , :below() , :near() , :left-of() métodos :left-of() y :right-of() , por ejemplo, :above(input[value="50"]) . Como dice la documentación: "Coincide con elementos que están por encima de cualquiera de los elementos que coinciden con el selector interno".
// delivery items desired name within above this input // ______________________ __ _______________ ________________________ // | || || || | const parent = page.locator('.js-delivery-container > * .js-delivery-name:above(input[value="50"])') await expect(parent).toHaveText(/Osobní odběr/) Nota: Los selectores de diseño utilizan el cliente delimitador rect para calcular la distancia y la posición relativa de los elementos, por lo que estas direcciones above , below , etc. están estrictamente destinadas a la posición del diseño y no a la ascendencia del DOM.