Cypress 断言 - 元素是可操作的/未被覆盖

Question

我想扩展这个问题，因为我有类似的问题：

我想要，cy.get('#lead_name').type('foo')但在加载表单时它被不透明度 0.9 的元素覆盖：

<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 665px; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.9; cursor: wait; position: absolute;"></div>

当我开始断言时

cy.get('#lead_name').should('be.visible)

它通过了断言（也许是因为不透明度？），但是当我尝试在字段中输入时，我收到了该元素被覆盖的错误消息。

当我尝试断言覆盖层不再存在并添加

cy.get('.blockUI blockOverlay').should('not.exist')

即使该元素确实存在，Cypress 也会通过断言并覆盖其他元素并cy.get('#lead_name').type('foo')失败。

有什么办法可以解决这个问题吗

//This does not work it's just a sample to explain what I want to do
//test if the element I want to get is not covered
cy.get('#lead_name').should('not.be.covered')
//or test if the element is actionable
cy.get('#lead_name').should('be.actionable')

确保它等到表单加载？

{编辑}这是我从赛普拉斯收到的错误消息：

Timed out retrying after 4000ms: cy.type() failed because this element:

<input name="CrmLead[first_name]" id="CrmLead_first_name" type="text" maxlength="255">

is being covered by another element:

<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 665px; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.9; cursor: wait; position: absolute;"></div>

{编辑2}这是我使用的代码，压缩为相关部分：

Timed out retrying after 4000ms: cy.type() failed because this element:

<input name="CrmLead[first_name]" id="CrmLead_first_name" type="text" maxlength="255">

is being covered by another element:

<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 665px; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.9; cursor: wait; position: absolute;"></div>

{编辑 3} 我测试可能的解决方案越多，我就越确信问题不是覆盖层，而是赛普拉斯代码本身的某些问题。

当我手动打开表单时，加载微调器消失的时间不会超过一秒，通常只需 0.1-0.2 秒。

然而，当 Cypress 打开表单时，表单无法正确加载，因为加载旋转器无限期地停留在那里。

Answer 1

覆盖层的检查应分两步完成。

cy.get('.blockUI.blockOverlay')
  .should('exist')
  .then($overlay => $overlay.remove()) 
cy.get('.blockUI.blockOverlay').should('not.exist')

cy.get('#lead_name', {timeout: 10000})
.should(($el) => {                    // should will cause retry
  return Cypress.dom.isFocusable($el) // instead of visible, more relevent to actionability
})

如果您只执行第二步，赛普拉斯可能会在覆盖层出现之前传递该命令。

这与检查加载旋转器的原理相同，之前已经在 SO 上解决过这个问题。

顺便说一句，您正在选择一个具有两个分类的元素（根据错误消息），因此.选择器中需要两个。

也许这是您唯一需要的改变！

我在上面添加了另一项可能有帮助的检查。Cypress.dom.isFocusable。

来自文档是可聚焦的

Cypress 在内部到处都使用此方法来确定元素是否隐藏，主要是为了可操作性。

如果您真的遇到困难，请观看 Gleb Bahmutov 的演练视频，调试 Cypress 中的元素可见性问题

还有一个想法 - 您可以尝试在测试中删除覆盖层 - 在上面的示例中添加一行。