How can I get the HTML of a hidden element in Cypress?

Question

I have a hidden div on a page I'd like to get a reference to in Cypress so I can get its text and assert on it. As far as I can tell from the API docs I don't see any way to do this. You can use the { force : true } option to force Cypress to click on something it doesn't think it can, but there's no option for that to force Cypress to look for elements that are not visible to the user, but are in the dom.

The element is hidden on the dom by a display: none style. This is just one of the many reasons Cypress will consider an element "hidden" and not find it. https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Visibility

I have read through the API docs and mostly tried cypress.get()

Answer 1

I have created a hidden div in my html, the below test run successfully in Cypress. The display property for that div in css #hiddenDiv1{ display:none; }

describe('Hidden text', function() {
  it.only('Test for the hidden text', function() {
   cy.visit('url goes here')
   cy.get('#hiddenDiv1').invoke('text')
      .then((text)=>{
        const divTxt = text;
        expect(divTxt).to.contain('Life is Beautiful!');
      })

  })
})

Answer 2

When I am searching for something that is hidden, I always just add .should('not.be.visible') to the search, and it picks it up.

Not sure if that's right for you, but hope that helps.