Cypress Studio Shadow DOM Support

[martincarstens]

Current behavior

Cypress Studio seems to be lacking shadow DOM support.

Desired behavior

Cypress Studio records interactions with shadow DOM components.

Test code to reproduce

Video:

https://user-images.githubusercontent.com/1507546/226057047-65399287-6308-43c3-a7eb-e3570321c66b.mov

Code produced by Studio:

describe('template spec', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })

  /* ==== Test Created with Cypress Studio ==== */
  it('shadow-cy', function() {
    /* ==== Generated with Cypress Studio ==== */
    cy.visit('https://martincarstens.github.io/prototypes/shadow-cy.html');
    cy.get(':nth-child(1) > [type="email"]').clear('h');
    cy.get(':nth-child(1) > [type="email"]').type('hello');
    cy.get('[autocomplete="password"]').clear();
    cy.get('[autocomplete="password"]').type('there');
    cy.get('app-input-light[type="email"] > input').clear('he');
    cy.get('app-input-light[type="email"] > input').type('hello');
    cy.get('app-input-light[type="password"] > input').clear();
    cy.get('app-input-light[type="password"] > input').type('there');
    cy.get('body > :nth-child(2) > [type="email"]').click();
    /* ==== End Cypress Studio ==== */
  });
})

Page used to test: https://martincarstens.github.io/prototypes/shadow-cy.html

Cypress Version

Version 12.3.0 (12.3.0.2008582)

Node version

v16.3.0

Operating System

macOS Ventura 13.1

Debug Logs

No response

Other

My config:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  chromeWebSecurity: false,
  videoUploadOnPasses: false,
  viewportWidth: 1920,
  viewportHeight: 1080,
  defaultCommandTimeout: 30000,
  experimentalStudio: true,

  retries: {
    runMode: 1,
    openMode: 0
  },

  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      return require("./cypress/plugins/index.js")(on, config);
    },
    baseUrl: "https://www.locally.test",
    excludeSpecPattern: "**/examples/*.cy.js",
    includeShadowDom: true,
    experimentalRunAllSpecs: true
  },

  component: {
    devServer: {
      framework: "react",
      bundler: "webpack",
    },
  },
});

[schlm3]

I am new to cypress and wanted to evaluate if this could help us writing e2e tests. But our app uses Web-components and therefore makes heavy use of the shadow dom. Would very appreciate if Cypress Studio would also support shadow dom.

[phirschybar]

+1 to support for Shadow DOM. This a major omission.