Tengo el siguiente código
<div class="editor-options"> <div class="editor-item"> <label>Name</label> <input type="text" name="name"> </div> </div> <div class="editor-item"> <label>Data Source</label> <div class="react-select-component css-2b097c-container"></div> </div> <div class="editor-item" > <label>Attribute</label> <div class="react-select-component css-2b097c-container"></div> </div> <div class="editor-item"> <label>Type</label> <div class="type-select css-2b097c-container"></div> </div> </div>Necesito encontrar y seleccionar los dos nodos 'reaccionar-seleccionar-componente' de forma independiente por xpath (fuente de datos y atributo)
Estas son listas desplegables de reacción creadas dinámicamente y tienen nombres de clase y contenido únicos basados en los valores de la base de datos.
Cuando trato de usar:
$x("//div[contains(@class, 'react-select-component')]/ancestor::div[@class='editor-item']//label[contains(text(), 'Data Source ')]")
La //etiqueta no se devuelve //div[class='react-select-component'] que es lo que espero. Mi comprensión de Xpath/antepasado es:
Devolver el nodo:
//div[contiene(@clase, 'reaccionar-seleccionar-componente')]
Con el Ancestro:
/ancestor::div[@class='editor-item']//label[contains(text(), 'Data Source')]
¿Lo tengo al revés?
Se devuelve el último elemento de la expresión.
1) //div[contains(@class, 'react-select-component')] 2) ancestor::div[@class='chart-editor-item'] 3) label[contains(text(), 'Data Source')] Es por eso que se devuelve el elemento de label .
Este xpath devuelve el elemento esperado
//div[contains(@class,'editor-item') and child::label[contains(text(), 'Data Source')]]/div[contains(@class, 'react-select-component')] Eso dice: "obtenga un div con @class que contenga el elemento del editor y una label secundaria con el valor 'Fuente de datos'"
//div[contains(@class,'editor-item') and child::label[contains(text(), 'Data Source')]]dado ese div, obtenga un div secundario con @class que contenga react-select-component
div[contains(@class, 'react-select-component')]Usando xml2xpath.sh para verificar xpaths relevantes
xml2xpath.sh -s '//div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]]' -t -l test.html Namespaces: xml http://www.w3.org/XML/1998/namespace XML tree: div label div Found XPath: //div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]] //div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]] //div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]]/label //div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]]/divDado que la salida contiene la label dentro del div que especificó, puede usar el eje del following-sibling para ubicar los nodos relativos a ese nodo en este árbol específico. Lo que quiero decir:
//div[contains(@class, 'react-select-component')]/ancestor::div[@class='editor-item']//label[contains(text(), 'Data Source')]/following-sibling::div
En caso de que desee ser más específico o desee evitar obtener el div incorrecto (considerando la existencia de más de uno), agregue más restricciones a ese hermano.
Ejemplo de trabajo.