0
153
ViewsCómo verificar que la imagen es visible/existe en el front-end usando la etiqueta <img src> o <a href>
pregunta simple pero aún nueva en cypress, ¿alguien sabe cómo puedo verificar si existe una imagen usando su <a href> o <img src> ? Solo puedo verificar por su clase como:
it('Verifying vertical product', () => { cy.get('.stage --vertical').should('be.visible') })pero quiero saber cómo verificar con la etiqueta img src o href. gracias
HTML completo:
<a href="haigclub.diageoplatform.com/en/our-whisky/haig-club-clubman"> <img style="margin: auto; display: block;" class="stage__image" src="haigclub.diageoplatform.com/user/themes/haig/images/bottle.png"> </a> 
4 answers
Answer question0
Si entiendo bien, usted está buscando
cy.get('a[href="..."]')similar
cy.get('img[src="..."]') donde debe agregar el texto apropiado en lugar de ...
Por supuesto, sigue con .should('be.visible') .
Si desea utilizar una coincidencia parcial, puede utilizar
cy.get('img[src$="bottle.png"]') // NOTE src$=0
Si desea afirmar la imagen con el nombre de la imagen, puede hacer algo como:
cy.get('img').invoke('attr', 'src').should('include', 'bottle.png')0
Una prueba más explícita podría seleccionar href y .find() the img, para evitar el problema de devolver varias imágenes.
cy.get('a[href^="haig-club-clubman"]') .find('img') // find inside previous selector (a[href]) .should('have.attr', 'src') .and('include', 'bottle.png') // explicit test of src attribute0
Otra opción es aplicar un filtro que verifique el atributo.
No es óptimo aquí, pero es útil para escenarios más complicados.
cy.get('img') .filter('[src^="bottle.png"]')