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')

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.

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')