CODEWITHSUNDEEP
cypress
Romeo Mihalcea
Romeo Mihalcea

Reputation: 10252

Cypress get the element tag name by css selector

Simple question. How do I test (with cypress) that the element I query with a css selector is a h2 for example?

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

Upvotes: 6

Views: 16714

Answers (2)

Richard Matsen
Richard Matsen

Reputation: 23543

@Maccurt's answer works for scenarios where there are no other element with the selected class, but if there is the following the test will report a false positive.

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

See this question How to check an element type with chai.

I think you could use something like

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

Upvotes: 14

Maccurt
Maccurt

Reputation: 13817

Can you show us a fragment of all the HTML?

If I read your questions correct you want to make sure h2 exist. You say needs to be a h2, I think exist would do the same thing. I assume this widget is a h2 and has the class qards-widget-hero. 

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

//If you want the first one

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

Upvotes: 2

Related Questions