是否有可能用柏树验证阻塞字段？答案

【问题标题】：Is it possible validated blocked fields with cypress?是否有可能用柏树验证阻塞字段？
【发布时间】：2021-07-29 22:56:00
【问题描述】：

我想验证一个不允许输入值的字段（它被一个确定的状态阻止）。我搜索了很多断言，但没有找到特定需求。

这是我在块之前的字段：

<select class="form-control form-controle valid" data-val="true" data-val-number="O campo IdCategoria deve ser um número." data-val-required="The IdCategoria field is required." id="IdCategoria" name="IdCategoria" aria-describedby="IdCategoria-error" aria-invalid="false"><option selected="selected" value="0">Selecione uma categoria</option> </select>

这是我在块后的字段：

<select class="form-control form-controle valid formBloqueaEdicao" data-val="true" data-val-number="O campo IdCategoria deve ser um número." data-val-required="The IdCategoria field is required." id="IdCategoria" name="IdCategoria" readonly="readonly" style="pointer-events: none;"><option selected="selected" value="0">Selecione uma categoria</option> </select>

我已经实现了以下代码，但我不确定这是最好和安全的解决方案：

cy.get('#IdCategoria').should('have.class', 'form-control form-controle valid formBloqueaEdicao')

还有其他解决方案吗？

【问题讨论】：

嗨卢卡斯。如果您的解决方案正在运行，您可以通过添加有关此断言的作用的明确注释来保留它，否则乍一看很难理解其目的。与您检查启用/禁用的方式相关，您可以通过readonly 属性调用或断言：cy.get('selector').should('have.attr', 'readonly', 'true')
嗨，亚历克斯，感谢您的回复！我没有注意到这个属性，我会增加它，再次感谢你！
由于它在禁用时会更改类，我只想看看它是否具有特定的类cy.get('#IdCategoria').should('have.class', 'formBloqueaEdicao')。我更喜欢这种方法，因为它很简单并且根据您的应用程序代码。如果将来代码逻辑发生变化，您需要以任何方式调整测试，

标签： javascript cypress assertion

【解决方案1】：

当你的元素被禁用时，我看到有一个属性和值 readonly="readonly" 被添加到你的元素中，你可以断言它的存在 -

cy.get('#IdCategoria').should('have.attr', 'readonly', 'readonly')

【讨论】：

嗨阿拉潘，感谢您的回复！我没有注意到这个属性，我会增加它，再次感谢你！

【解决方案2】：

其实readonly属性并不妨碍控件的使用。

是style="pointer-events: none; 使select 被禁用。

例如，设置readonly

<select 
  class="form-control form-controle valid formBloqueaEdicao" 
  data-val="true" 
  data-val-number="O campo IdCategoria deve ser um número." 
  data-val-required="The IdCategoria field is required." 
  id="IdCategoria" 
  name="IdCategoria" 
  readonly="readonly" 
  
>
  <option selected="selected" value="0">Selecione uma categoria</option> 
  <option value="1">abc</option> 
</select>

cy.get('select')
  .should('have.value', '0')
  .select('abc')              // selects "abc" even when readonly
  .should('have.value', '1')  // value has changed!

但是pointer-events: none

<select 
  class="form-control form-controle valid formBloqueaEdicao" 
  data-val="true" 
  data-val-number="O campo IdCategoria deve ser um número." 
  data-val-required="The IdCategoria field is required." 
  id="IdCategoria" 
  name="IdCategoria" 
  readonly="readonly" 
  style="pointer-events: none;"
>
  <option selected="selected" value="0">Selecione uma categoria</option> 
  <option value="1">abc</option> 
</select>

cy.get('select')
  .select('abc')              // fails to select because of "pointer-events: none"

所以你最好的测试是

cy.get('#IdCategoria')
  .should('have.attr', 'style', 'pointer-events: none;')

【讨论】：