Selectores
El Protocolo WebDriver proporciona varias estrategias de selección para consultar un elemento. WebdriverIO las simplifica para mantener la selección de elementos simple. Tenga en cuenta que aunque el comando para consultar elementos se llama $ y $$, no tienen nada que ver con jQuery o el Motor de Selección Sizzle.
Aunque hay tantos selectores diferentes disponibles, solo unos pocos de ellos proporcionan una forma resistente de encontrar el elemento correcto. Por ejemplo, dado el siguiente botón:
<button
id="main"
class="btn btn-large"
name="submission"
role="button"
data-testid="submit"
>
Submit
</button>
Recomendamos y no recomendamos los siguientes selectores:
| Selector | Recomendado | Notas |
|---|---|---|
$('button') | 🚨 Nunca | El peor - demasiado genérico, sin contexto. |
$('.btn.btn-large') | 🚨 Nunca | Malo. Acoplado al estilo. Altamente sujeto a cambios. |
$('#main') | ⚠️ Con moderación | Mejor. Pero aún acoplado al estilo o a los escuchadores de eventos JS. |
$(() => document.queryElement('button')) | ⚠️ Con moderación | Consulta efectiva, compleja de escribir. |
$('button[name="submission"]') | ⚠️ Con moderación | Acoplado al atributo name que tiene semántica HTML. |
$('button[data-testid="submit"]') | ✅ Bueno | Requiere atributo adicional, no conectado a a11y. |
$('aria/Submit') o $('button=Submit') | ✅ Siempre | El mejor. Se asemeja a cómo el usuario interactúa con la página. Se recomienda usar los archivos de traducción de su frontend para que sus pruebas nunca fallen cuando se actualizan las traducciones |
Selector de consulta CSS
Si no se indica lo contrario, WebdriverIO consultará elementos utilizando el patrón selector CSS, por ejemplo:
loading...
Texto de enlace
Para obtener un elemento de anclaje con un texto específico, consulte el texto comenzando con un signo igual (=).
Por ejemplo:
loading...
Puede consultar este elemento llamando:
loading...
Texto parcial de enlace
Para encontrar un elemento de anclaje cuyo texto visible coincide parcialmente con su valor de búsqueda,
consúltelo usando *= delante de la cadena de consulta (por ejemplo, *=driver).
Puede consultar el elemento del ejemplo anterior también llamando:
loading...
Nota: No puede mezclar múltiples estrategias de selector en un solo selector. Use múltiples consultas de elementos encadenados para alcanzar el mismo objetivo, por ejemplo:
const elem = await $('header h1*=Welcome') // ¡no funciona!
// use en su lugar
const elem = await $('header').$('*=driver')
Elemento con cierto texto
La misma técnica se puede aplicar a los elementos también. Además, también es posible hacer una coincidencia sin distinción entre mayúsculas y minúsculas usando .= o .*= dentro de la consulta.
Por ejemplo, aquí hay una consulta para un encabezado de nivel 1 con el texto "Welcome to my Page":
loading...
Puede consultar este elemento llamando:
loading...
O usando texto parcial de consulta:
loading...
Lo mismo funciona para nombres de id y class:
loading...
Puede consultar este elemento llamando:
loading...
Nota: No puede mezclar múltiples estrategias de selector en un solo selector. Use múltiples consultas de elementos encadenados para alcanzar el mismo objetivo, por ejemplo:
const elem = await $('header h1*=Welcome') // ¡no funciona!
// use en su lugar
const elem = await $('header').$('h1*=Welcome')
Nombre de etiqueta
Para consultar un elemento con un nombre de etiqueta específico, use <tag> o <tag />.
loading...
Puede consultar este elemento llamando:
loading...
Atributo de nombre
Para consultar elementos con un atributo de nombre específico, puede usar un selector CSS3 normal o la estrategia de nombre proporcionada por el JSONWireProtocol pasando algo como [name="some-name"] como parámetro selector:
loading...
loading...
Nota: Esta estrategia de selector está obsoleta y solo funciona en navegadores antiguos que se ejecutan con el protocolo JSONWireProtocol o usando Appium.
xPath
También es posible consultar elementos a través de un xPath específico.
Un selector xPath tiene un formato como //body/div[6]/div[1]/span[1].
loading...
Puede consultar el segundo párrafo llamando:
loading...
Puede usar xPath para también recorrer hacia arriba y hacia abajo el árbol DOM:
loading...
Selector de nombre de accesibilidad
Consulta elementos por su nombre accesible. El nombre accesible es lo que anuncia un lector de pantalla cuando ese elemento recibe el foco. El valor del nombre accesible puede ser tanto contenido visual como alternativas de texto ocultas.
Puede leer más sobre este selector en nuestra publicación del blog de lanzamiento
Buscar por aria-label
loading...
loading...
Buscar por aria-labelledby
loading...
loading...
Buscar por contenido
loading...
loading...
Buscar por título
loading...
loading...
Buscar por propiedad alt
loading...
loading...
ARIA - Atributo de rol
Para consultar elementos basados en roles ARIA, puede especificar directamente el rol del elemento como [role=button] como parámetro selector:
loading...
loading...
Atributo ID
La estrategia de localizador "id" no es compatible con el protocolo WebDriver, se debe usar estrategias de selector CSS o xPath para encontrar elementos usando ID.
Sin embargo, algunos controladores (por ejemplo, Appium You.i Engine Driver) podrían seguir soportando este selector.
Las sintaxis de selector actualmente soportadas para ID son:
//localizador css
const button = await $('#someid')
//localizador xpath
const button = await $('//*[@id="someid"]')
//estrategia id
// Nota: funciona solo en Appium o frameworks similares que soportan la estrategia de localizador "ID"
const button = await $('id=resource-id/iosname')
Función JS
También puede usar funciones JavaScript para obtener elementos usando APIs nativas web. Por supuesto, solo puede hacer esto dentro de un contexto web (por ejemplo, browser, o contexto web en móvil).
Dada la siguiente estructura HTML:
loading...
Puede consultar el elemento hermano de #elem de la siguiente manera:
loading...
Selectores profundos
A partir de la v9 de WebdriverIO no hay necesidad de este selector especial ya que WebdriverIO automáticamente atraviesa el Shadow DOM por ti. Se recomienda migrar de este selector eliminando el >>> delante de él.
Muchas aplicaciones frontend dependen en gran medida de elementos con shadow DOM. Es técnicamente imposible consultar elementos dentro del shadow DOM sin soluciones alternativas. Los comandos shadow$ y shadow$$ han sido tales soluciones alternativas que tenían sus limitaciones. Con el selector profundo ahora puede consultar todos los
