Can't read innerHTML from a shadowRoot element in Cypress

Viewed 580

I am trying to read the value (innerHTML/innerText) property of an element using the following but I get an empty string. cy.get('#INGLoanRequests-container').shadow().find(Selectors.postCode).invoke('val').then(value => { console.log("post code is " + value) })

where postCode is just a css selector. Upon checking the console I see enter image description here

which means the element is being found but the value is not read. But in firefox dev tools I can access the value of the subject, like so. enter image description here

Kindly if someone can spot what I'm doing wrong here, that'd be great.

2 Answers

Actually you want

  • .invoke('html') to get .innerHTML
  • .invoke('text') to get .innerText
  • .invoke('val') to get the value property of an <input>

To get the innerHTML value you have to use .invoke('text') -

cy.get('#INGLoanRequests-container').shadow().find(Selectors.postCode).invoke('text').then(value => {
    console.log("post code is " + value)
})
Related