Vue.js 使用Cypress，我将如何编写一个简单的测试来判断页面上是否存在徽标图像

发布于05月11日

具体来说，我想测试一下，这个标志是否出现在应用程序的主页上.我想我不确定该用什么来寻找这张照片.

我试过了

it('has a logo', function () {
    cy.visit('http://localhost:3000')
    cy.get('img').should('contains' , 'My-Logo.png')
  })

我也试着用

cy.contains('My-Logo.png')

但它也失败了.

我不确定应该使用什么元素，或者是否应该使用get，但它失败了.当我查看网页的源代码时，该徽标隐藏在javascript(nodeJS、vueJS和expressJS应用程序)中，我注意到当我转到图像页面时，javascript似乎向图像添加了一系列数字和字母，尽管assets文件夹中的图像名上没有.我的标志.d63b7f9.巴布亚新几内亚.

推荐答案

我自己想出了解决办法.

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

我判断了元件，发现<img src...线嵌入了一个<form>中.我可以打cy.get('form')，但不能打cy.get('img').然后我把它们锁在一起，它就过go 了.我不知道为什么我不能简单地添加第二条should语句，但当我try 运行时，它失败了:

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

我不完全确定为什么，但它需要第一个"应该"的声明.我绕过VUE，只需输入文件名，不带扩展名，就可以添加数字和字母序列.我希望这可能对其他人有所帮助，因为文档似乎没有涵盖这一点.

Vue.js 使用Cypress，我将如何编写一个简单的测试来判断页面上是否存在徽标图像

推荐答案

Vue.js相关问答推荐

如何默认打开一个v-list-group？

如何使用 vueJS 上的 ref( ) 函数创建二维数组定义？

在Vue 2中，是否可能在不创建组件的情况下注入代码块？

如何将模板传递给EJS菜单

Vue 3 在一个值更改问题后再次重新渲染每一行

v-on 的 .native 修饰符仅在组件上有效，但在  标签上使用

在 Ajax 函数中访问 Vue.js 组件属性

如何使用 vue 或 javascript 向服务器发送密码？

将 Vue 应用程序挂载到主 Vue 应用程序的容器中

有条件地在 Vue 中添加一个 CSS 类

一个 div 组件中的 Vue.js 2.0 路由链接

Nuxt 打开链接到模态

如何在 Vue3 设置标签中定义组件名称？

在 .vue 文件中使用 Vue.set() 和 Vue.use()

Laravel 和 Vue - handler.call 不是函数

在 Vue JS 组件中使用 Laravel 路由的最佳方法是什么

VueJS错误避免直接改变props

Vue路由在新页面上回到顶部

无法访问函数内的数据属性

mount() 仅在组件 Vue.js 上运行一次