时间戳

首页 > 解决方案 > 如何查询通过在测试 Web 组件时使用 Cypress

cypress - 如何查询通过在测试 Web 组件时使用 Cypress

问题描述

在为端到端测试测试一个全局 DOM 多年后，我发现测试使用插槽的 Web 组件非常困难，甚至不可能。在我解释这个问题之前，我想说我不能改变生成的标记来改进它们。

<wc-1 attributes-etc="">
  <wc-2 attributes-etc="">
    <slot>
      <wc-3 attributes-etc="">
        <slot>
       ...eventually get to an input...
         <input type="text" name="firstName" />

有来自某种表单构建器的大量嵌套 Web 组件，并且还使用了很多插槽。Web 组件具有属性，但插槽从不具有，因此我使用 Web 组件名称进行查询。

document.querSelector('wc-1')
  .shadowRoot.querySelector('wc-2')
  .shadowRoot.querySelector('slot')

// Yields <slot>...</slot>

到目前为止一切都很好，赛普拉斯有一个.shadow()我使用的命令，但我在这里只使用 devtools 进行测试，以查看插槽具有的所有属性。

document.querSelector('wc-1')
  .shadowRoot.querySelector('wc-2')
  .shadowRoot.querySelector('slot')
  .shadowRoot

// Yields "null".
// I don't know how to get to the .lightDOM? of wc-2?

我尝试的任何属性最终都为 null 或返回值中有 0 个元素。使用其他前端工具和全局 DOM，我总是可以cy.get('div[data-testid="the-nested-element-i-want"]').type('important words')在一个命令中完成。

所以我的主要问题是：一旦 Web 组件开始堆积，人们如何测试这些东西？或者不这样做，只在隔离/单元测试中测试 Web 组件，因为查询嵌套的影子 DOM 非常困难？

主要目标是最终获得一个表单输入cy.get('input[name"firstName"]').type('John')。在我的示例中，有人可以给我链接docuement.querySelector()命令吗？<wc-3>

标签： cypressweb-component

解决方案

答案涉及assignedNodes()：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes

HTMLSlotElement 接口的assignedNodes() 属性返回分配给此插槽的节点序列...

使用 that vs. 对我来说没有任何区别assignedElements()。因此，您所要做的就是在查询到所需的插槽后使用该方法。对于我的例子，答案是：

const wc-3 = document.querySelector('wc-1').shadowRoot
  .querySelector('wc-2').shadowRoot
  .querySelector('slot').assignedNodes()
  .map((el) => el.shadowRoot)[0]

然后你可以继续往下走......我知道我只有一个未命名的插槽，所以这就是我从返回的.map().

这个问答的道具为我指明了正确的方向：Web 组件：如何与孩子一起工作？

推荐阅读