如何使用赛普拉斯比较两个DOM元素？

Question

我正在尝试检查contenteditable元素是否已聚焦（插入符号闪烁），但这不起作用：

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

我该怎么办？

Answer 1

我认为这可以满足您的需求。如果要声明其他任何内容，可以在.and()之后添加.should()来链接声明。

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

Answer 2

在这种情况下，使用.then()将为您提供一个jQuery元素，因此以下各项应按照this answer起作用：

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

这将直接比较DOM元素，而不是比较jQuery元素。

请注意，将.then()替换为.should()。此行为与.then()相同，除了它将重试所有包含的断言，直到它们通过或超时为止。

Answer 3

您的问题的实质似乎是：“我如何使用赛普拉斯测试某个元件是否聚焦？” （我偶然发现了这个问题，采取了与您相同的方法。）

Cypress added more explicit support for testing focus in 2019.

您现在可以简单地执行以下操作：

cy.get('span[contenteditable]').should('have.focus');