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?

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?

• javascript
• cypress
• assertion

• 2 Hi Lucas. If your solution is working you can keep it by adding an explicit ment about what this assertion does, otherwise at first sigh is hard to understand its purpose. Related to the way you check for enable/disable, you can invoke or assert over readonly attribute: cy.get('selector').should('have.attr', 'readonly', 'true') – Alex Izbas Commented May 7, 2021 at 17:32
• Hi Alex, thanks for the reply! I hadn't noticed this attribute, I will increment that, thank you again! – Lucas Santos Commented May 7, 2021 at 19:04
• Since It changes the class when disabled, I would just look if it has the specific class cy.get('#IdCategoria').should('have.class', 'formBloqueaEdicao'). I prefer this method because It is simple and is according to your app code. If the code logic is changed in the future, you would need to ajust the test any way, – Rosen Mihaylov Commented May 11, 2021 at 16:38

2 Answers 2

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

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