How to compare two DOM elements using Cypress?

Question

I'm trying to check if a contenteditable element is focused (it has the blinking caret), but this doesn't work:

cy.get('span[contenteditable]').then($span => {
    cy.focused().then($focused => {
        expect($focused).to.eql($span)
    }
}

What should I do instead?

Answer 1

Using .then() will give you an element wrapped by jQuery. The wrappers are not equal, but the elements are:

cy.get('span[contenteditable]').should($span => {
    cy.focused().should($focused => {
        expect($focused[0]).to.eql($span[0]);
    }
}

I also replaced .then() with .should(). .should() is similar to .then(), except it will retry any contained assertions until they succeed or time out.

The code above is adapted from this jQuery answer.

Answer 2

I think this will do what you want. If you want to assert anything else about it you can add an .and() after the .should() to chain assertions.

  cy.focused().should('have.attr', 'contenteditable', 'true');