如何使用 Cypress 比较两个 DOM 元素？答案

【问题标题】：How to compare two DOM elements using Cypress?如何使用 Cypress 比较两个 DOM 元素？
【发布时间】：2018-11-07 15:30:25
【问题描述】：

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

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

我应该怎么做？

【问题讨论】：

标签： cypress

【解决方案1】：

使用.then() 会给你一个由jQuery 包裹的元素。包装器不相等，但元素是：

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

我还将.then() 替换为.should()。 .should() 与 .then() 类似，但它会重试任何包含的断言，直到它们成功或超时。

以上代码改编自this jQuery answer。

【讨论】：

【解决方案2】：

我认为这会满足您的需求。如果你想断言任何关于它的东西，你可以在.should() 之后添加一个.and() 来链接断言。

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

【讨论】：

【解决方案3】：

您的问题似乎是：“如何使用 Cypress 测试元素是否聚焦？” （我偶然发现了这个问题，采用了与您相同的方法。）

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

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

【讨论】：