node.js - 使用 Cypress ，我将如何编写一个简单的测试来检查页面上是否存在 Logo 图像

Question

具体来说，我想测试 Logo 是否出现在应用程序的主页上。我想我不确定应该使用什么来查找图像。

我试过了

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，但它失败了。当我查看网页的源代码时， Logo 隐藏在 javascript(nodeJS、vueJS 和 expressJS 应用程序)中，当我转到图像页面，即使 Assets 文件夹中的图像名称不在那里。我的标志.d63b7f9.png。

Answer 1

我自己想出了解决方案。

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

我检查了元素并找到了 <img src...行嵌入在 <form> 中.我可以做 cy.get('form')并通过，但无法执行 cy.get('img')通过。所以然后我把它们链接在一起，它就通过了。我不确定为什么我不能简单地添加第二个 should 语句，但是当我尝试运行时它失败了:

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

我不完全确定为什么，但它需要第一个“应该”声明。我通过询问不带扩展名的文件名来解决 VUE 添加数字和字母序列的问题。我希望这可能对其他人有所帮助，因为文档似乎没有涵盖这一点。