Cypress Studio just got a major upgrade. You can now interact with and add assertions on elements inside the Shadow DOM.
If your app uses modern web components or frameworks that render elements within shadow roots, Studio can now record those interactions and generate Cypress test code automatically. You can click, type, and assert on Shadow DOM elements directly in the Cypress App without writing commands by hand.
Why this matters
Apps built with frameworks like Lit, Stencil, FAST, or Lightning Web Components rely on the Shadow DOM to encapsulate markup and styles. Until now, Studio could not see or record those interactions. With this update, Cypress Studio can record actions and assertions inside open shadow roots*, giving you full visibility and control during test creation.
You can now:
- Click and type inside Shadow DOM elements
- Right-click to add assertions within shadow roots
*A quick note about closed Shadow DOM: Cypress Studio supports open Shadow DOM. Elements rendered within a closed Shadow DOM are still not accessible for recording or asserting.
How it works
When you start recording in Studio, Cypress automatically detects Shadow DOM boundaries. As you interact with your app, Cypress locates elements inside shadow roots to generate precise, testable selectors.
Studio translates those actions into Cypress commands in real time, producing code like this:
cy.get('[data-cy="card-1"]').shadow().find('[data-cy="increment"]').click();Assertions work the same way. Right-click an element inside a shadow root to add built-in assertions, and Studio will generate the correct selector path for your test.
cy.get('[data-cy="card-1"]').shadow().find('div.counter').should('have.text', '1');Start using Studio with Shadow DOM today
Shadow DOM support is available now in Cypress Studio. Whether your app uses custom elements, encapsulated components, or advanced design systems, you can now build and extend your tests with full support for open shadow roots.
Open the latest version of Cypress and start recording your next test with Studio today.
The next step: AI-powered Studio
We’re also building Studio AI, which brings AI test generation directly into Cypress Studio. Soon, you’ll be able to see intelligent suggestions for assertions as you record, powered by AI that understands your app’s changes in real time.
Studio AI is designed to accelerate authoring while keeping developers in full control of the code Cypress generates. Sign up for early access.