如何用Cypress编写测试验证应用首页的Logo图片存在？

我明白你遇到的困扰了——打包工具给文件名加了哈希，导致直接匹配完整文件名的测试失败，而且之前的代码还有点小问题，我来一步步帮你搞定！

首先，先说说你之前代码的问题：

• cy.get('img').should('contains' , 'My-Logo.png')里的contains拼写错了，应该是contain，而且这个断言是检查元素的文本内容，不是图片的src属性，所以根本不对。
• cy.contains('My-Logo.png')同样是找页面里的文本内容，不是图片的资源路径，自然也找不到。

接下来给你几个靠谱的解决方案，按推荐程度排序：

方案1：通过alt属性定位（最推荐） #

一般Logo图片都会设置有意义的alt文本，比如<img alt="我的网站Logo" src="My-Logo.d63b7f9.png">，直接通过alt属性定位是最稳定的：

it('has a logo', function () {
  cy.visit('http://localhost:3000')
  // 方式1：直接通过alt属性选择器
  cy.get('img[alt="我的网站Logo"]').should('exist')
  
  // 方式2：先获取元素再断言alt属性
  cy.get('img').should('have.attr', 'alt', '我的网站Logo')
})

方案2：匹配src属性的前缀（适合没有设置alt的情况） #

因为哈希是追加在文件名后面的，所以我们可以只匹配My-Logo这个前缀，不用管后面的哈希：

it('has a logo', function () {
  cy.visit('http://localhost:3000')
  // 检查src属性包含"My-Logo"
  cy.get('img').should('have.attr', 'src').and('include', 'My-Logo')
  
  // 或者用正则匹配完整的哈希格式
  cy.get('img').should('have.attr', 'src', /My-Logo\.[a-f0-9]+\.png/)
})

方案3：添加data-test属性（Vue项目最佳实践） #

在Vue组件里给Logo图片添加一个专门用于测试的属性，比如data-test="site-logo"，这样不管文件名、样式怎么变，测试都不会受影响：

<!-- 在你的Vue组件里 -->
<img data-test="site-logo" :src="require('@/assets/My-Logo.png')" alt="网站Logo">

然后在Cypress测试里直接通过这个属性定位：

it('has a logo', function () {
  cy.visit('http://localhost:3000')
  cy.get('[data-test="site-logo"]').should('exist')
})

这几种方法都能解决你遇到的哈希文件名问题，优先推荐方案1或方案3，稳定性更高！

内容的提问来源于stack exchange，提问作者general