Using each/for in Cypress

Question

I have a card with more information that has the next html code. I want each card, except for the first one (so somehow to increase from 1 with the start), to press the "Edit location" button, then to write in the code and other actions for it, and then to move to the next card.

How can I write this in Cypress?

I used this code in Cypress, but no loop is executed, it runs only once on the first card and then stops.

cy.get(".card-locations").each(($el, index) => {
  if (index > 0) {
    cy.wrap($el).contains("Edit location").click({ force: true });
    //another code
  }
});

HTML code:

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 card no-select card-locations">

            <!-- card header -->
            

            <div class="card-top-gradient card-top-gradient-noactions animated fadeInDown card-top-gradient-default">

                <!-- card content -->
                <div class="card-content">
                    <div class="card-right-content">
                        <div class="card-name">
                            Location Craiova
                        </div>
                        <div class="card-clinic-name">
                               Bucharest  <br>
                            -- 020202 Romania
                            </div>

                        <ul class="card-details card-details-verbose">

                            <li>
                                <span class="field-name">Timezone</span>
                                <span class="field-value">(UTC+02:00) Athens, Bucharest</span>
                            </li>
                            <li>
                                <span class="field-name">Facility code</span>
                                <span class="field-value">11 Office</span>
                            </li>
                            <li>
                                <span class="field-name">Phone number</span>
                                <span class="field-value"></span>
                            </li>
                            <li>
                                <span class="field-name">Email address</span>
                                <span class="field-value"><a href="mailto:test@clinic.test">test@clinic.test</a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- card footer -->
            

            <div class="card-footer" style="background-color: #186b65;">
                <div class="button-placeholder">
                    <div class="card-button card-properties footer-left-button">
                        <span data-action="edit" class="edit" entity-detail="editEntity" title="Edit Location" onclick="$.cmtBhv().getJson({ url: '/...' }).toggleEntityDetailsFor({ target: this });">Edit location</span>
                    </div>

                    <div class="card-button card-properties footer-right-button">
                        <span data-action="edit" class="edit" entity-detail="editEntity" onclick="$.cmtBhv().getJson({ url: '/...' }).toggleEntityDetailsFor({ target: this });">Rooms</span>
                    </div>
                </div>
            </div>

        </div>

Answer 1

Cypress has a .each() function that can yield the yielded element, as well as the index (and entire list, if needed). You can easily use this to skip the first card, and continue on. Based on your given HTML, I'm a little confused about which exact elements you want, but based on my best guess (that each .field-name is what you want), something like the following could work.

cy.get('.field-name').each(($el, index) => {
  if (index > 0) {
    // code to execute if not the first
  }
});

The concept carries over even if I have the elements incorrect -- use .each() to yield a list of elements, and use the index parameter to exclude the first card.

Note: you will have to use cy.wrap() to insert the yielded element ($el in the above example) back into the Cypress chain.

cy.wrap($el)...