Используя Cypress, как бы я написал простой тест, чтобы проверить, существует ли изображение логотипа на странице

Question

В частности, я хотел бы проверить, что логотип появляется на главной странице приложения. Наверное, я не уверен, что мне следует использовать для поиска изображения.

Я пытался

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

вместо cy.get Я также пытался просто использовать

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

но тоже не получается.

Я не был уверен, какой элемент мне следует использовать или нужно ли использовать get, но это не помогло. Когда я смотрю на исходный код веб-страницы, логотип спрятан в javascript (приложение nodeJS, vueJS и expressJS), и я заметил, что javascript добавляет последовательность цифр и букв к изображению при переходе к страница изображения, хотя там нет имени изображения в папке ресурсов. My-Logo.d63b7f9.png.

Answer 1

Я разобрался с решением самостоятельно.

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

Я проверил элемент и нашел. Я мог сделать cy.get ('form') и передать, но не мог сделать cy.get ('img') для передачи. И тогда я связал их вместе, и это прошло. Я не уверен, почему я не могу просто добавить второе утверждение must, но оно не удалось, когда я попытался просто запустить:

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

Я не совсем уверен, почему, но для этого нужно было первое утверждение "должен". Я обошел VUE, добавив последовательность цифр и букв, просто спросив имя файла без расширения. Я надеюсь, что это может помочь кому-то еще, так как документация, кажется, не покрывает это.