Как сравнить два элемента DOM с помощью Cypress?

Question

Я пытаюсь проверить, сфокусирован ли элемент contenteditable (у него мигает курсор), но это не работает:

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

Что мне делать вместо этого?

Answer 1

Использование .then() в этом случае даст вам элемент jQuery, поэтому в соответствии с этим ответом должно работать следующее :

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

При этом сравниваются элементы DOM напрямую, а не элементы jQuery.

Обратите внимание на замену .then() на .should(). Это действует так же, как .then(), за исключением того, что оно будет повторять любые содержащиеся в нем утверждения до тех пор, пока они не пройдут или не истечет время ожидания.

Answer 2

Я думаю, что это будет делать то, что вы хотите. Если вы хотите утверждать что-либо еще об этом, вы можете добавить .and() после .should() к цепочке утверждений.

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