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

Posted 2023-02-15

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

【英文标题】：Using Cypress, how would I write a simple test to check that a logo image exists on a page使用赛普拉斯，我将如何编写一个简单的测试来检查页面上是否存在徽标图像

【发布时间】：2018-10-21 08:54:39

【问题描述】：

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

我试过了

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 应用程序）中，我注意到当我转到图像页面，即使资产文件夹中的图像名称在那里没有。我的徽标.d63b7f9.png。

【参考方案1】：

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

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

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

【讨论】：

注意：这不是公认解决方案的完全替代品。 ('include', 'My-Logo') 匹配部分文本，而使用第三个参数需要完全匹配。

【参考方案2】：

我自己想出了解决办法。

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 添加数字和字母的序列。我希望这可能对其他人有所帮助，因为文档似乎没有涵盖这一点。