Cypress 通过 css 选择器获取元素标签名称

Question

简单的问题。例如，如何测试（使用 cypress）我使用 css 选择器查询的元素是 h2？

cy.get('.qards-widget-hero').first()// this needs to be a h2

Answer 1

你能给我们看一下所有 HTML 的片段吗？

如果我读到你的问题是正确的，你想确保 h2 存在。你说需要是一个 h2，我认为存在会做同样的事情。我假设这个小部件是一个 h2 并且有 class qards-widget-hero。

cy.get('h2.qards-widget-hero').should('exist')

//如果要第一个

cy.get('h2.qards-widget-hero').first().should('exist')

Answer 2

@Maccurt 的答案适用于所选 class 没有其他元素的情况，但如果有以下内容，测试将报告误报。

<h1 class="qards-widget-hero"></h1>
<h2 class="qards-widget-hero"></h2>

看到这个问题How to check an element type with chai。

我想你可以使用像

这样的东西

cy.get('.qards-widget-hero').first()
  .should('have.prop', 'tagName' ).should('eq', 'H2') // tagName is uppercase

Cypress get the element tag name by css selector