0
237
ViewsCypress ¿Cómo marcar las casillas de verificación sin selectores únicos?
Estoy tratando de seleccionar/marcar casillas de verificación sin selectores obvios pero con un nombre de clase que comparten todas las casillas de verificación de la página.
¿Puede alguien compartir cómo puedo probar estos elementos sin selectores?
Estoy probando un motor de búsqueda.
3 answers
Answer question0
Luego puede usar directamente el texto para encontrar el localizador y hacer clic en él, algo como:
cy.contains('Tool').click()Para el botón de búsqueda, tiene la etiqueta aria-label, puede usarla directamente:
cy.get('input[aria-label*="main-search-box"]').type('text')0
Creo que va en contra de las mejores prácticas de Cypress intentar seleccionar cualquier elemento que no sea el selector data-cy="add-unique-id-here" . Los documentos sugieren que el uso de selectores de estilo CSS es frágil y puede hacer que las pruebas fallen en el futuro cuando actualice su código. Mediante el uso de selectores de data-* , puede garantizar que siempre está seleccionando lo que necesita.
Aquí está el enlace para los documentos de Cypress: https://docs.cypress.io/guides/references/best-practices#Selecting-Elements
En su caso, agregue <span class="ui-lib-checkbox__box" data-cy="descriptive-checkbox-name"> <svg>...</svg> </span> a su html
y cy.get('[data-cy=descriptive-checkbox-name]') a su archivo de prueba de ciprés, debería funcionar.
0
Dado que el texto de las casillas de verificación es único, puede usar cy.contains()
// 'Under 6 min' checkbox cy.contains('span', 'Under 6 min') // 'Tool' checkbox cy.contains('span', 'Tool')En cuanto al cuadro de búsqueda, será un poco más complicado. Si es el único cuadro de búsqueda que está visible en la página, puede hacer lo siguiente.
cy.get('input[type=text][placeholder]') .filter(':visible')