0

With a simple template

<span><slot></slot></span>

and a test

mount(<my-component>some text</my-component>);
cy.get('span').contains('some text');

This fails because the text doesn't actually exist within the span, it's shown as "#text reveal" in the inspector. enter image description here

How can I confirm that the template and web component are actually setup correctly and the text is being rendered in the right place?

Tom
  • 1,546
  • 2
  • 20
  • 42

2 Answers2

0

You need to access the shadow root using .shadow():

cy.get('qa-text[variant=body1]').shadow().find('span').contains('some text')

That's how you would access unslotted content.

As slotted content is not moved to the shadow DOM (it's just reflected there for display purposes), this won't work for your example using slots.

This is what should work for the text in light DOM:

cy.get('qa-text[variant=body1]').contains('some text')

You can also work with assignedNodes:

cy.get('qa-text[variant=body1]').shadow().find('slot').assignedNodes()[0].textContent.to.equal('some text')

Also consider How To Query Through <slot> Using Cypress While Testing Web Components.

connexo
  • 53,704
  • 14
  • 91
  • 128
0

If the slot like Add template

you can use

cy.get('div[slot="heading"]').should('be.visible');
Athena Chen
  • 269
  • 2
  • 4