How test which HTML element I get back in Cypress without using class selectors?

Question

I'm trying to determine if an element selected by cypress is a "p-inputmask" or a "input" it would all be fine if I could use hasClass() but I cannot. Here is my current code:

Cypress.Commands.add('textInputWithLabelTest', (inputId,isDisabled,expectedLabel) => {
    let mask = false;
    cy.get(`[for="${inputId}"]`).should('contain',expectedLabel);
    cy.get(`#${inputId}`).then( ($el) => {
        cy.log($el.find('.ng-pristine'));
        console.log($el.find('p-inputmask')); //TODO fix this

    })
    if(mask) {
        cy.get(`#${inputId}`).siblings('input').should(isDisabled?'be.disabled':'not.be.disabled');
    } else {
        cy.get(`#${inputId}`).should(isDisabled?'be.disabled':'not.be.disabled');
    }
})

I tried JSON.stringify() with includes('p-inputmask') but the object is circular and it cannot be parsed.

I tried Jquery.toString() but jQuery doesn't want to be in the file for some reason even if I import it like : const $ = require( "jquery" )( window );

I tried it with .it('p-inputmask') it didn't work.

I tried it with .find('p-inputmask') and for some reason this returns a value even if the $el doesn't have a p-inputmask.

I tried it with .has(), it didn't work.

I tried all of these with both $el[0] and $el, nothing worked.

Here is what console.log($el[0]); outputs for the two different elements.

There must be a trivial solution to this, but what? Could someone please help?

Answer 1

Try using the tagName property.

Cypress.Commands.add('textInputWithLabelTest', (inputId,isDisabled,expectedLabel) => {
  cy.get(`[for="${inputId}"]`).should('contain',expectedLabel);
  cy.get(`#${inputId}`).then($el => {

    if($el[0].tagName === 'INPUT') {
      cy.get(`#${inputId}`).should(isDisabled ? 'be.disabled' : 'not.be.disabled')
    } else {
      cy.get(`#${inputId}`)
        .siblings('input')
        .should(isDisabled ? 'be.disabled' : 'not.be.disabled')
    }
  })
})

I reversed the order of your if-else because I know an <input> has a tagName of INPUT, but I'm not sure about the other element. You can experiment with what I've shown.