如何在 cypress 测试中获取 Web 组件插槽的内容？

Question

使用简单的模板

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

和测试

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

这失败了，因为文本实际上并不存在于范围内，它在检查器中显示为“#text reveal”。

我如何确认模板和 Web 组件实际上设置正确并且文本呈现在正确的位置？

Answer 1

您需要使用

.shadow()

访问影子根：

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

这就是您访问unslotted内容的方式。

由于开槽内容 没有移动到阴影 DOM（它只是 反射 在那里用于显示目的），这不适用于您使用插槽的示例。

这应该适用于轻型 DOM 中的文本：

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

您还可以与

assignedNodes

一起工作：

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

还要考虑如何在测试 Web 组件时使用 Cypress 进行查询。

Answer 2

添加到@connexo 已经添加的内容，你也可以这样做。在您的

cypress.json

中添加

includeShadowDom: true

然后您不必明确使用

.shadow()

命令。

所以你的命令现在可以是：

//For partial text match
cy.get('qa-text[variant=body1]').find('span').should('include.text', 'some text')

//For partial text match
cy.get('qa-text[variant=body1]').find('span').should('have.text', 'some text')

Answer 3

如果插槽喜欢添加模板

你可以使用

cy.get('div[slot="heading"]').should('be.visible');