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

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 似乎添加了一系列数字和字母当我进入图像页面时，即使资产文件夹中的图像名称没有它，我也会看到图像。我的标志.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')

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

Answer 2

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

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

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

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

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

node.js

express

vue.js

cypress