Get native HTML element in Cypress

Question

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 1

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
})