如何在 Cypress 中获取隐藏元素的 HTML？答案

【问题标题】：How can I get the HTML of a hidden element in Cypress?如何在 Cypress 中获取隐藏元素的 HTML？
【发布时间】：2019-06-11 04:32:50
【问题描述】：

我想在赛普拉斯中获得引用的页面上有一个隐藏的 div，因此我可以获取其文本并在其上断言。据我从 API 文档中可以看出，我没有看到任何方法可以做到这一点。您可以使用{ force : true } 选项强制赛普拉斯点击它认为不能点击的内容，但没有选项可以强制赛普拉斯查找用户不可见但位于 dom 中的元素。

元素通过display: none 样式隐藏在dom 中。这只是赛普拉斯将元素视为“隐藏”而不是找到它的众多原因之一。 https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Visibility

我已通读 API 文档，主要尝试过 cypress.get()

【问题讨论】：

请提供更多信息，包括您尝试过的内容以及隐藏 div 的原因（另一个元素覆盖，不显示，宽度和高度 0）。
根据文档“在赛普拉斯的所有版本中，您都可以与具有不透明度的元素进行交互：0 样式。”

标签： cypress

【解决方案1】：

我在我的 html 中创建了一个隐藏的div，下面的测试在 Cypress 中成功运行。 css #hiddenDiv1{ display:none; } 中该 div 的显示属性

describe('Hidden text', function() {
  it.only('Test for the hidden text', function() {
   cy.visit('url goes here')
   cy.get('#hiddenDiv1').invoke('text')
      .then((text)=>{
        const divTxt = text;
        expect(divTxt).to.contain('Life is Beautiful!');
      })

  })
})

【讨论】：

【解决方案2】：

当我搜索隐藏的东西时，我总是只添加 .should('not.be.visible') 到搜索中，然后它就会把它捡起来。

不确定这是否适合您，但希望对您有所帮助。

【讨论】：

我曾经在版本 4 和 5 中这样做，但如果您升级到版本 6，它将无法正常工作
对于版本 6，您可能需要：docs.cypress.io/guides/references/…

【解决方案3】：

这里有一个简单的解决方案。

cy.get('div[class="class name"]').contains('text').click()

【讨论】：