在 Cypress 中使用 Each/for

Question

我有一张包含更多信息的卡片，其中包含下一个 html 代码。我想要每张卡，除了第一张卡（因此以某种方式从一开始就从 1 开始增加），按下“编辑位置”按钮，然后为其写入代码和其他操作，然后移动到下一张卡片。

我怎样才能在赛普拉斯中写这个？

我在 Cypress 中使用了这段代码，但没有执行循环，它只在第一张卡上运行一次，然后停止。

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

HTML 代码：

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

Answer 1

Cypress 有一个 .each() 函数，可以生成生成的元素以及索引（以及整个列表，如果需要）。您可以轻松地使用它来跳过第一张卡，然后继续。根据您给定的 HTML，我对您想要的确切元素有点困惑，但根据我的最佳猜测（每个 .field-name 都是您想要的），类似以下内容可以工作。

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

即使我的元素不正确，这个概念仍然存在——使用 .each() 生成元素列表，并使用 index 参数排除第一张卡。

注意：您必须使用cy.wrap()将生成的元素（上例中的$el）插入回Cypress链。

cy.wrap($el)...