使用赛普拉斯，我该如何编写一个简单的测试来检查页面上是否存在徽标图像

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

您只能使用一个should语句，例如：

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

的第三个参数是元素属性should的值。match

Answer 2

我自己想出了解决方案。

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

我检查了元素并找到。我可以执行cy.get（'form'）并通过，但是无法执行cy.get（'img'）来传递。因此，我将它们链接在一起，并通过了。我不确定为什么我不能只添加第二个should语句，但是当我尝试运行时它失败了：

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

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