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

When conducting frontend testing with Cypress, we often encounter scenarios where we need to retrieve or interact with hidden elements. Cypress by default does not allow direct interaction with hidden elements because it aims to simulate real user behavior, and real users cannot interact with hidden elements. However, Cypress provides several methods to handle such cases.

To retrieve the HTML of hidden elements, we can use the .invoke() method to access DOM element properties. Here is an example:

javascript
// Suppose we have a hidden element, such as <div id="hidden-element" style="display:none;">Secret Info</div>

// Using Cypress to retrieve the HTML of this hidden element
 cy.get('#hidden-element', { includeShadowDom: true }) // includeShadowDom option ensures that the element can be retrieved even if it is hidden within the Shadow DOM
  .invoke('prop', 'outerHTML')
  .then(html => {
    console.log(html); // Outputs: <div id="hidden-element" style="display:none;">Secret Info</div>
  });

In this example, we use:

1. cy.get('#hidden-element', { includeShadowDom: true }) to locate the element. The { includeShadowDom: true } option ensures that the element can be retrieved even if it is hidden within the Shadow DOM.
2. .invoke('prop', 'outerHTML') to retrieve the outerHTML property of the element, which represents the HTML of the element itself and its contents.
3. .then(html => {...}) callback function to process the retrieved HTML, such as logging it to the console.

Note that while this method allows access to the HTML of hidden elements, over-reliance on such operations in testing may lead to discrepancies between test behavior and real user experience. Therefore, it is recommended to use this approach cautiously when necessary and to simulate real user interaction paths as much as possible.