赛普拉斯 - 依赖子元素的服务员答案

【问题标题】：Cypress - waiters for dependent sub elelemnts赛普拉斯 - 依赖子元素的服务员
【发布时间】：2022-11-24 03:46:17
【问题描述】：

我在赛普拉斯遇到了问题有动态DOM：

<div class="Table">
  <div class="Item">
    <div class="Name"> Name1 </div>
    <div class="Color"> Color1 </div>
    <div class="Add"> Add </div>
  </div>
  <div class="Item">
    <div class="Name"> Name2 </div>
    <div class="Color"> Color2 </div>
    <div class="Add"> Add </div>
  </div>
</div>

元素.Item动态出现我怎么能等到“项目”

 <div class="Name"> Name3 </div>
 <div class="Color"> Color3 </div>

出现在这个列表中并通过 Cypress 获得.Item

之前的DOM 前

<div class="Table">
  <div class="Item">
    <div class="Name"> Name1 </div>
    <div class="Color"> Color1 </div>
    <div class="Add"> Add </div>
  </div>
</div>

后

<div class="Table">
  <div class="Item">
    <div class="Name"> Name1 </div>
    <div class="Color"> Color1 </div>
    <div class="Add"> Add </div>
  </div>
  <div class="Item">
    <div class="Name"> Name1 </div>
    <div class="Color"> Color2 </div>
    <div class="Add"> Add </div>
  </div>
</div>

或者

<div class="Table">
  <div class="Item">
    <div class="Name"> Name1 </div>
    <div class="Color"> Color1 </div>
    <div class="Add"> Add </div>
  </div>
  <div class="Item">
    <div class="Name"> Name2 </div>
    <div class="Color"> Color2 </div>
    <div class="Add"> Add </div>
  </div>
</div>

或者它可能是

<div class="Table">
  <div class="Item">
    <div class="Name"> Name1 </div>
    <div class="Color"> Color1 </div>
    <div class="Add"> Add </div>
  </div>
  <div class="Item">
    <div class="Name"> Name2 </div>
    <div class="Color"> Color2 </div>
    <div class="Add"> Add </div>
  </div>
</div>

需要等待第二行出现名称和颜色

【问题讨论】：

你能用像 cy-data="blah" 这样的动态属性值来装饰你的 DOM 来帮助测试吗......然后你可以等待属性选择器

标签： javascript cypress cypress-testing-library

【解决方案1】：

由于 class="Item" 是公因数，因此请使用 cy.get() 并重试它的计数。

cy.get('.Item').should('have.length', 2)

【讨论】：

【解决方案2】：

在 npm 上有一个名为 cypress-wait-until 的包应该可以正常工作

安装

npm i -D cypress-wait-until

进口

import 'cypress-wait-until';

用法

参考the official npm site

【讨论】：