使用CypressAssertVuetify v-text-field值

1bqhqjot 于 2023-10-23 发布在 Vue.js

关注(0)|答案(1)|浏览(121)

我正在为我的Vue+Vuetify前端编写一个使用Cypress的E2 E测试套件。我想评估只读v-text-field的值，因为它的值是基于先前用户输入的计算属性。所以我的v-text-field看起来像：

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

在我的Cypress测试中，我有这样的Assert：

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

此Assert意外失败，因为它在选定的DOM树中找不到文本。然而，当我手动搜索整个DOM时，预期的文本无处可寻，而文本实际上显示在我的屏幕上。
1.为什么屏幕上显示的东西在HTML DOM中找不到？
1.更重要的是，如何使用CypressAssertv-text-field的值？

vue.js

来源：https://stackoverflow.com/questions/77300814/asserting-vuetify-v-text-field-value-using-cypress

1条答案

按热度按时间

acruukt91#

如前所述，v-text-field使用<input>将文本作为.value属性保存。
您发布的Vuetify代码在运行时的DOM中可能看起来像这样

<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中Assert文本使用

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')

赞(0）回复(0）举报 2023-10-23

我来回答

使用CypressAssertVuetify v-text-field值

1条答案

相关问题

热门标签

最新问答