How do I get an underlying native HTMLElement (or Element or Node...) from a Cypress query?

const el = cy.get('.foo').children().first()
//    ^ this is of type Cypress.Chainable<JQuery<HTMLElement>>

I would like to access the native HTMLElement instance in el.
I have tried el[0] but the result is of type any.

How do I get an underlying native HTMLElement (or Element or Node...) from a Cypress query?

const el = cy.get('.foo').children().first()
//    ^ this is of type Cypress.Chainable<JQuery<HTMLElement>>

I would like to access the native HTMLElement instance in el.
I have tried el[0] but the result is of type any.

• javascript
• dom
• cypress

1 Answer 1

In cypress, first() is a mand that will be chained to .get() and retry for that whole selection until timeout. That is why you can't really obtain the native element from it.

You can however yield the mand, and access the element inside .then() by passing a function to it.

For example, from the Cypress documentation on this EXACT question:

cy.get('.foo').then(($el) => {
  const el = $el.get(0) //native DOM element
})