Soy muy nuevo en java script y en la automatización web de Cypress. He estado intentando automatizar un sitio de práctica y estoy atascado en encontrar el localizador de elementos para el botón de abajo en la página web. ¿Puede alguien ayudarme? ¿Cómo puedo crear un cssSelector para el siguiente elemento web? Adjunto el html. Hay 2 botones de inicio de sesión en la página. Me gustaría identificar de forma única el primer botón de inicio de sesión. Pegado debajo de la muestra html:
<div _ngcontent-oxt-c19="" class="offset-sm-3 col-sm-9"><button _ngcontent-oxt-c19="" nbbutton="" status="primary" type="submit" _nghost-oxt-c16="" ng-reflect-status="primary" class="appearance-filled size-medium status-primary shape-rectangle transitions" aria-disabled="false" tabindex="0" css="1">Sign in</button></div> <button _ngcontent-oxt-c19="" nbbutton="" status="primary" type="submit" _nghost-oxt-c16="" ng-reflect-status="primary" class="appearance-filled size-medium status-primary shape-rectangle transitions" aria-disabled="false" tabindex="0" css="1">Sign in</button>Usar:
cy.contains("Sign in");esto buscará en el documento actual un elemento con el texto "Iniciar sesión". otra práctica recomendada es hablar con sus desarrolladores para que siempre intenten agregar data-testid="uniqueId" para probar elementos especiales y este patrón de agregar data-testid ayudará a mantener dicho elementoLocator sin eliminar (porque todos sabrán que este atributo es para solo probadores)
De sus ejemplos, puedo ver que ambos buttons son idénticos, excepto que uno es un elemento secundario del elemento div . Puede especificar eso en su selector:
cy.get('div button')
O si necesita algo más específico, también puede agregar nombres de clase:
cy.get('div.offset-sm-3 button')
No es necesario que sea un padre directo, puede ir más arriba en el árbol para encontrar una propiedad única adecuada para seleccionar.