Cypress - waiters for dependent sub elelemnts

Viewed 61

I'm stuck with problem in cypress there is dynamic 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>

elements .Item appear dynamically how I can wait until "Item" with

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

appear in this list and get .Item via Cypress


DOM before before

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

after

<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>

or

<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>

or it could be

<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>

need to wait second row appear by Name and Color

0 Answers
Related