Uno, sintaxis avanzada de posicionamiento xpath
xpath utiliza expresiones de ruta para seleccionar nodos o conjuntos de nodos en documentos xml o documentos html Hay dos expresiones: ruta absoluta y ruta relativa respectivamente.
Desventajas: webdriver escanea todos los elementos de toda la página para localizar los elementos que necesitamos. Si se utiliza una gran cantidad de xpath en el script para el posicionamiento de elementos, la velocidad de ejecución del script será más lenta
| expresión | descripción |
|---|---|
| . | Seleccionar nodo actual |
| .. | Seleccione el nodo padre del nodo actual |
| / | Seleccione desde el nodo raíz, el nodo actual es html por defecto |
| // | Seleccione nodos en el documento del nodo actual de la selección coincidente, independientemente de su ubicación |
| nombre del nodo | Seleccione todos los nodos secundarios de este nodo, similar al selector de etiquetas en css |
| @ | Seleccionar atributo |
Posicionamiento absoluto de la ruta :
comenzando con "/", comenzando desde el html superior y mirando hacia abajo, la ruta completa escrita como una carpeta
Desventaja: una vez que se cambia la estructura de la página, la ruta también dejará de ser válida y deberá reposicionarse
Posicionamiento relativo de la ruta : comience
con "//", puede usar cualquier nivel de elemento como punto de partida
Posicionamiento del índice:
// entrada [2] significa hacer coincidir la segunda etiqueta de entrada en cualquier nodo
Posicionamiento de la propiedad:
| expresión | sentido |
|---|---|
| /*[@clase] | Medios para hacer coincidir cualquier etiqueta con atributos de clase en el siguiente nivel |
| // div [@ id = 'abc' y @ class = 'abc'] | Significa hacer coincidir cualquier etiqueta div con id abc y class abc |
| // div [empieza con (@ id, 'kw')] | Significa hacer coincidir cualquier etiqueta div cuya identificación comience con kw en cualquier nodo |
| // div [contiene (@ id, 'kw')] | Indica que coincide con cualquier nodo, la etiqueta div cuya identificación contiene kw |
En segundo lugar, la sintaxis avanzada de posicionamiento css
| Selector | Ejemplo de expresión | Explicación |
|---|---|---|
| selector de id (id está representado por #) | #a B C | Haga coincidir la etiqueta con id abc |
| selector de clase (la clase está representada por.) | .a B C | Coincide con la etiqueta cuya clase es abc |
| Selector de etiquetas | pag | Coincidir con la etiqueta p |
| Selector de grupo | a, lapso | Coincidir con una etiqueta y una etiqueta de extensión |
| Selector de atributos: especificar valor | [clase = "li"] | Haga coincidir las etiquetas con la clase li |
| Selector de atributos: no especifique un valor | [título] | Hacer coincidir las etiquetas con el atributo de título |
| Selector de atributos: especificar etiqueta | un título] | Haga coincidir la etiqueta a con el atributo de título |
| Límites de palabras de coincidencia de selector de atributos | un [título ~ = "hola"] | Coincide con la etiqueta a cuyo título contiene hola |
| Selector descendiente (indicado por espacios), que puede seleccionar cualquier elemento de nivel debajo del nivel actual | #ab p | Haga coincidir la etiqueta p siguiente / multinivel con id ab |
| Selector de elementos secundarios (> significa), solo puede seleccionar elementos en el siguiente nivel | #ab> p | Haga coincidir la etiqueta p en el siguiente nivel con id ab |
| Selector de hermanos adyacentes (+ significa), solo puede seleccionar el siguiente elemento del mismo nivel | # ab + .ab | Haga coincidir el siguiente elemento del mismo nivel con id ab y la clase del elemento es ab para que coincida |
| Selector de hermanos subsiguiente (~ significa), seleccione todos los elementos especificados del mismo nivel después del elemento especificado | .ab ~ li | Haga coincidir todas las etiquetas li del mismo nivel después de la etiqueta con la clase ab |
Pseudoclase
| expresión | descripción |
|---|---|
| enésimo hijo (n) | Coincidir con el enésimo elemento hijo |
| enésimo último hijo (n) | Coincide con el enésimo elemento hijo de la parte inferior |
| enésimo de tipo (n) | Coincidir con la etiqueta n-ésima del tipo especificado |
| primer hijo | Coincidir con la primera etiqueta |
| último niño | Coincidir con la última etiqueta |
Puntos a tener en cuenta para posicionar elementos:
- Encuentre el atributo único del elemento a posicionar
- Si el elemento no tiene un atributo único, primero busque el elemento principal / elemento secundario / elemento adyacente que se pueda ubicar de manera única y luego use ">", "", "+", etc. para el posicionamiento auxiliar
- No utilice el posicionamiento aleatorio de atributos únicos
- Lo más importante es comunicarse más con I + D, intentar agregar ID o nombre a elementos clave y reducir elementos de página irrazonables, como ID duplicado, es mejor que no suceda.
Comparación de tres, css y xpath
1、css是配合html来工作，原理是匹配对象；而xpath是配合xml工作的，原理是遍历，故css性能更优秀
2、css语言比xpath更简洁明了
3、前段开发主要是使用css，不使用xpath，所以在技术上面，我们可以获得帮助的机会非常多