Is it possible validated blocked fields with cypress?

user_15864845 0
Viewed 2812

I wanna validate a field that doesent allow inputs of values (it is blocked with a determinete status). I have search many asserts, but I did not have luck with find that specific demand.

Here is my field before block:

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

Here is my field after block:

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

I have implemented the following code, but I am not sure that is the best and safe solution:

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

Any others solutions?

cypress assertion javascript
2 Answers

When your element is disabled I see there is an attribute and value readonly="readonly" that is being added to your element, you can assert the presence of that -

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

Actually, the readonly attribute does not prevent the control from being used.

It is the style="pointer-events: none; that makes the select disabled.

For example, with readonly set

<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!

but with 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"

So your best test is

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