3

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

Nikita Bokarev
  • 41
  • 1
  • 6
  • can you decorate your DOM with dynamic attribute values like cy-data="blah" to assist testing... then you can wait on an attribute selector – vicatcu Dec 14 '21 at 00:44

2 Answers2

2

Since class="Item" is the common factor, use a cy.get() with retry on the count of it.

cy.get('.Item').should('have.length', 2)
Alcock
  • 160
  • 7
-1

on npm there is a package named cypress-wait-until that should work fine

Installation

npm i -D cypress-wait-until

Import

import 'cypress-wait-until';

Usage

Refere to the official npm site

skkrrea
  • 170
  • 9