是否可以使用 cypress 验证被阻止的字段？

Question

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

这是块之前我的字段：

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

还有其他解决方案吗？

Answer 1

当您的元素被禁用时，我看到有一个属性和值 readonly="readonly" 正在添加到您的元素中，您可以声明该元素的存在 -

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

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

是否可以使用 cypress 验证被阻止的字段？

Is it possible validated blocked fields with cypress?

javascript

assertion

cypress