0
153
ViewsHow to verify Image is visible/exists on front end using <img src> or <a href> tag
Does anyone know how I can verify if an image exists using its <a href> or <img src>? I can only verify by its class such as:
it('Verifying vertical product', () => {
cy.get('.stage --vertical').should('be.visible')
})
but I want to know how to verify with img src or href tag. thank you
Full HTML:
<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>
·
Juan Pablo Isaza
3 answers
Answer question0
A more explicit test might select href and .find() the img, to avoid the problem of returning multiple images.
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 attribute
·
Juan Pablo Isaza
Report
0
If I understand correctly, you are looking for
cy.get('a[href="..."]')
Similarly
cy.get('img[src="..."]')
where you should add the appropriate text instead of ...
Of course, follow with .should('be.visible').
If you want to use a partial match, you can use
cy.get('img[src$="bottle.png"]') // NOTE src$=
·
Juan Pablo Isaza
Report
0
If you want to assert the image with the image name you can do something like:
cy.get('img').invoke('attr', 'src').should('include', 'bottle.png')
·
Juan Pablo Isaza
Report
Answer question