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:[email protected]">[email protected]</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>

This problem is not reproducible. Did you leave out something? SO prefers a minimal, reproducible example otherwise the question might be closed. — user16695029
– user16695029, Commented Mar 2, 2022 at 20:12
The problem as stated is not reproducible, specifically "no loop is executed" does not happen when we try it out (assuming other identical cards are present). — user16695029
– user16695029, Commented Mar 3, 2022 at 0:06
Why exactly are you checking for 'Edit location' when it's not on the card? — Seeker
– Seeker, Commented Mar 3, 2022 at 0:15
It's included in the card, but because it was in the card's footer by mistake, I didn't post it in the code. I've updated it now, it's my fault — alexcristian150515
– alexcristian150515, Commented Mar 3, 2022 at 8:14

agoff · Accepted Answer · 2022-03-02 17:22:00Z

2

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

answered Mar 2, 2022 at 17:22

agoff

7,1501 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

alexcristian150515 Over a year ago

If you want please look at my question, I updated it with the code I wrote. The loop does not work as I wrote, it runs once on the first card (not on the second) and then stops.

agoff Over a year ago

There is only one card in your HTML, so, in this case, it is behaving as expected -- only one card is yielded, so there is only one iteration. What elements are you looking to loop through?

alexcristian150515 Over a year ago

If I search the console for items with the ".card-locations" class, then I'm shown all the cards I need (except the first one I'd exclude). So in this class I need to operate the rest of the actions. so how do I make iterations for each card, cards that have the same structure as the one shown in the HTML code?

agoff Over a year ago

Given the HTML you posted, I'm not seeing the card having anything containing Edit Location -- is there something missing from the HTML? If you added a: cy.log(Index counter: ${index}); to the each() function before the check for index > 0, do you see the index counter increasing?

alexcristian150515 Over a year ago

I'm sorry, I didn't realize that the code for the card footer was not posted. I have now updated it and you can see the code for "Edit location"

Collectives™ on Stack Overflow

Using each/for in Cypress

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related