无涯教程网

Javascript 使用Cypress断言Vuetify vtextfield值

发布于10月17日

我正在使用Cypress为我的Vue+Vutify前端编写一个E2E测试套件.我想判断只读v文本字段的值，因为它的值是基于先前用户输入的计算(computed)属性. 因此，我的v-文本字段看起来就像:

<v-text-field
    data-cy="npa-display"
    :readonly="true"
    :model-value="this.npa"
    class="mt-4"
></v-text-field>

然后，在我的 cypress 测试中，我有这样的断言:

cy.get("[data-cy='npa-display']").contains("Test-Team");

此断言意外失败，因为它在选定的DOM树中找不到文本.然而，当我手动搜索整个DOM时，没有找到预期的文本，而文本实际上显示在我的屏幕上.

屏幕上显示的内容怎么会在HTMLDOM中找不到呢？
而且，更重要的是，我如何使用Cypress断言v-文本字段的值？

推荐答案

如前所述，v-text-field使用<input>将文本作为.value属性保存.

您在运行时在DOM中发布的Vutify代码可能如下所示

<div class="v-text-field" data-cy="npa-display">
  <div class="v-input__control">
     ... // more vuetify feature divs here
     <input class="v-field__input">

在Cypress中使用断言文本

cy.get('data-cy="npa-display"]')      // data-cy will be on top-level div
  .find('input')                      // drill down to input
  .should('have.value', 'Test-Team')

Javascript相关问答推荐

使用NgDeliverentOutlet和动态内容投影的Angular 渲染组件

事件错误：类型错误：无法读取未定义的属性(读取stopPropagation)

如何在加载的元数据上使用juserc和await中获得同步负载？

通过实现regex逻辑自定义数据表搜索

为什么我达到了时间限制！？LeetCode链接列表循环(已解决，但需要解释！)

docx.js：如何在客户端使用文档修补程序

在服务器上放置了Create Reaction App Build之后的空白页面

无法从NextJS组件传递函数作为参数'

Angular 订阅部分相互依赖并返回数组多个异步Http调用

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

按下单键和多值

无法避免UV：flat的插值：非法使用保留字"

OnClick更改Json数组JSX中的图像源

如何根据查询结果重新排列日期

如何通过Axios在GraphQL查询中发送数组

顶点图使用组标签更新列之间的条宽

每隔3个项目交替显示，然后每1个项目交替显示

如何使用puppeteer操作所有选项

使用Perl Selify：：Remote：：Driver执行Java脚本时出错

React数组查找不读取变量

实用课程推荐

相关教程推荐