Using Cypress, how would I write a simple test to check that a logo image exists on a page

Question

specifically, I would like to test that the logo appears on the home page of the app. I guess I am not sure what I should use to look for the image.

I tried

it('has a logo', function () {
    cy.visit('http://localhost:3000')
    cy.get('img').should('contains' , 'My-Logo.png')
  })

instead of cy.get I also tried to just use

cy.contains('My-Logo.png')

but it also fails.

I wasn't sure what element I should use or if I should be using get, but it fails. When I look at the source code for the web page, the logo is hidden within the javascript (nodeJS, vueJS,and expressJS application) and I noticed the javascript seems to add a sequence of numbers and letters to the image when I go to the image page even though the image name in the assets folder does not have it on there. My-Logo.d63b7f9.png.

Solution 1

I figured out the solution on my own.

cy.get('form').find('img').should('have.attr', 'src').should('include','My-Logo')

I inspected the element and found the <img src... line was embedded within a <form>. I could do a cy.get('form') and pass, but could not do a cy.get('img') to pass. So then I chained them together and it passed. I am not sure why I cannot just simply add the second should statement, but it failed when I tried to just run:

cy.get('form').find('img').should('include','My-Logo')

I am not entirely sure why, but it needed the first "should" statement. I got around VUE adding the sequence of numbers and letters by just asking for the name of the file without the extension. I hope this maybe helps someone else as the documentation did not seem to cover this.

Solution 2

you can use only one should statement like:

cy.get('form').find('img').should('have.attr', 'src', 'My-Logo')

the third arg of should is the value to match with the element attribute.

Comments

[webnoob]

Note: this is not an exact replacement for the accepted solution. ('include', 'My-Logo') matches on part of the text whereas using the third param expects an exact match.