Get native HTML element in Cypress

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.

Answer

In cypress, first() is a command 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 command, 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
})