Check if an input field is empty or not is not working properly in Cypress tests

Question

I got 2 step definitions in Cypress that check if an input field is empty or not (depends on how I build the sentence I setup with RegEx).

First my problem was, that cypress said the test failed because the input field is empty while it was not.

My defined steps:

/** We check if the input field with the given name is empty */
Given(/^The input field "(.*)" is (not )?empty$/, (inputFieldName, negation) => {
  if (negation === 'not ') {
    CypressTools.getByName(inputFieldName).should('not.be.empty');
  } else {
    CypressTools.getByName(inputFieldName).should('be.empty');
  }
});

/** We check if the input field with the given name is visible and empty */
Given(/^The input field "(.*)" is visible and empty$/, (inputFieldName) => {
  CypressTools.getByName(inputFieldName).should('be.visible').should('be.empty');
});

In my specific test cypress should check a value filled input field and the step is defined like that: The input field "XYZ" is not empty

I can see, that the if-condition is working fine, so no problems on the definition or RegEx site. But the test fails because Cypress say the input field is empty but it's not.

I suspect, that Cypress test the input fields for values between the input tags, but doesn't check for a value attribute in the input tag.

At least, I tried to add an invoke('val') in the step definition:

CypressTools.getByName(inputFieldName).invoke('val').should('not.be.empty');

and it works for the first step definition, but when I do that for the 2nd one aswell, cypress tests fail and tell me this:

Timed out retrying: You attempted to make a chai-jQuery assertion on an object that is neither a DOM object or a jQuery object.
The chai-jQuery assertion you used was:
  > visible
The invalid subject you asserted on was:
  > 
To use chai-jQuery assertions your subject must be valid.
This can sometimes happen if a previous assertion changed the subject.

I don't understand the problem here. Is this method valid with invoke() or is there a better solution to cover all cases?

Thanks a lot for your help.

Answer 1

The problem your error message is pointing to is that the subject being passed along the command chain in not appropriate for the next step,

CypressTools.getByName(inputFieldName)
  .invoke('val')                      // changes subject to the text of the input
                                      // (not a DOM element)
  .should('be.visible')               // needs a DOM element
  .should('not.be.empty');

The surest way around it is to break the testing into two steps

CypressTools.getByName(inputFieldName).should('be.visible');

CypressTools.getByName(inputFieldName)
  .invoke('val')
  .should('not.be.empty');

but I think a simple reordering will also work

CypressTools.getByName(inputFieldName)
  .should('be.visible')              // check the DOM element, passes it on as subject
  .invoke('val')                     // changes subject to the text of the input
  .should('not.be.empty');           // check the text is not empty