cypress-testing-library icon indicating copy to clipboard operation
cypress-testing-library copied to clipboard

Feature Request: respect `includeShadowDom` cypress option

Open TLadd opened this issue 4 years ago • 2 comments

  • cypress-testing-library version: 7.0.0
  • node version: v12.16.2
  • npm (or yarn) version: yarn 1.22.5

Problem description:

Cypress recently released shadow DOM support and it is no longer experimental. They also recently let you specify an includeShadowDom option on describe and it blocks. This is very convenient if your entire test operates within the shadow DOM. Ideally, cypress-testing-library would respect this option and this would work even when something is inside a shadow DOM:

it ("works", { includeShadowDOM: true }, () => {
  cy.findByLabelText(<label>)
  cy.findByTestId(<testId>)
});

At the moment, it is necessary to get inside the shadow DOM first and then use cypress-testing-library functions, so you are forced to do something like this instead:

cy.get("#root-of-shadow-dom").shadow().findByLabelText(<label>)
cy.get("#root-of-shadow-dom").shadow().findByTestId(<testId>)

Suggested solution: After reading through https://github.com/testing-library/dom-testing-library/issues/413, it looks like the current recommendation for testing within a shadow DOM with testing library is to use this package that wraps around dom-testing-library and replaces querySelectorAll with a version that traverses shadow DOMs. So in theory, a cypress package could be created that wraps around test-library__dom, but that wouldn't quite work since it needs to either include the shadow DOM or not based on the includeShadowDom option from Cypress.

So to me, it feels like the best solution would be to add a similar includeShadowDom option to the dom-testing-library functions the same as cypress did and pass it on through. Obviously shadow DOM support was proposed once before and it was decided not to build it in, but perhaps that should be reconsidered as shadow DOM becomes more common and testing frameworks like cypress add official support for it. if we want to go this route, assume I should open an issue in dom-testing-library but wanted to open an issue here first since it relates specifically to Cypress.

TLadd avatar Sep 16 '20 18:09 TLadd

Hi @TLadd,

If you can add support for shadow DOM without making this codebase really complicated then I would consider merging that. Otherwise a fork would be more appropriate.

kentcdodds avatar Sep 16 '20 20:09 kentcdodds

I guess resolving https://github.com/testing-library/dom-testing-library/issues/413 would resolve this issue as well.

harunurhan avatar Nov 16 '22 16:11 harunurhan