Menu
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.
415
How do I get an element's text contents? Cypress commands yield jQuery objects, so you can call methods on them. If the text contains a non-breaking space entity then use the Unicode character \u00a0 instead of . Tip: watch the Confirming the text with non breaking space entity video.
To find elements by data attribute, query using the attribute selector. cy. get() yields a jQuery object, you can get its attribute by invoking the . attr() method.
Cypress can validate the text on an element with the help of jQuery text() method. This method shall help us to fetch the text content on the selected element. We can also put assertions on the text content of the element. cy.
Finding HTML Elements by CSS Selectors If you want to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method. This example returns a list of all <p> elements with class="intro" .
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
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
