如何在柏树中停止循环

Question

我有一个循环检查 40 个项目。我想停止我的循环，当我找到第一个元素时，> 0 这是我的代码

var genArr = Array.from({ length: 40 }, (v, k) => k + 1);

cy.wrap(genArr).each((index) => {
    cy.get('.list-item').eq(index - 1).find('.number')
        .invoke('text')
        .then(text => {
            const pendingCount = text;
            cy.get('.list-item').eq(index - 1).click();
            cy.get('.list-table').find('.list-table-list-item')
                .should('have.length', pendingCount);
            if (text > 0) break
         });
    });

});

但我有一个语法错误。请帮帮我，我怎样才能打破我的循环

Answer 1

我认为您不需要使用 来进行测试genArr。

40 个项目的列表本身将给出一个“类似数组”的主题，您可以将其filter()与函数参数一起应用。
Cypress 仅使用 jquery，因此请参阅此处的语法（Cypress.filter()文档中未给出）。

过滤器函数应该返回true以包含该项目，因此我们再次使用 jquery (Cypress.$) 来构造表达式。

由于您想在第一个非零项之后中断，因此我们可以直接链接.eq(0)，

it('clicks first item with content not "0"', () => {

  cy.get('.list-item')
    .filter((i, item) => Cypress.$(item).find('.number').text() !== '0')
    .eq(0)
    .click()          // previous line yields list-item so we can now click it
    .find('.number')  // then go further into DOM to get the actual number
    .invoke('text')
    .then(pendingCount => {
      cy.get('.list-table').find('.list-table-list-item')
       .should('have.length', pendingCount);   // Now test the number of table rows
    })

});

我用这个 html 片段测试了它，它没有onClick()，只有一个静态表。

<ul>
    <li class="list-item">
      <span class="title">Item1</span>
      <span class="number">0</span>
    </li>
    <li class="list-item">
      <span class="title">Item2</span>
      <span class="number">4</span>
    </li>
    <li class="list-item">
      <span class="title">Item3</span>
      <span class="number">0</span>
    </li>
    <li class="list-item">
      <span class="title">Item4</span>
      <span class="number">2</span>
    </li>
  </main>
</ul>
<div class="list-table">
  <div class="list-table-list-item">Pending1</div>
  <div class="list-table-list-item">Pending2</div>
  <div class="list-table-list-item">Pending3</div>
  <div class="list-table-list-item">Pending4</div>
</div>

使用 :not 和 :contains 的替代选择器

您还可以组合 jquery:not和:contains选择器来生成替代表达式。

例如我的测试中的以下工作

cy.get('.list-item')
  .not(':contains("0")')
  .eq(0)
  .click()
  .find('.number')
  ...etc

cy.get('.list-item:not(:contains("0"))')
  .eq(0)
  .click()
  .find('.number')
  ...etc

请注意，Cypress 命令似乎.contains()不能以这种方式使用（排除某些值），尽管这可能只是我缺乏想象力。

更复杂的 jquery 将更难调试，因此尽可能坚持使用链式 Cypress 命令（您可以将鼠标悬停在命令日志中的步骤上）。

我经常.then(x => console.log(x))帮忙测试链测试。

Answer 2

break仅适用于本机for/while循环。

要提前退出.each循环（如评论中所建议的那样），false必须从传递给它的同一个回调中返回，因此false从嵌套then回调中返回不会产生影响。

您甚至无法在then回调中设置标志并在回调中检查它each，因为.each()命令在深处只是一个jQuery.fn.each--- 它是同步的，当您设置标志时，所有迭代都将运行（并排入队列）嵌套命令）。

因此，唯一的选择是不使用.each()，而使用某种递归命令。让我们建立一个。

function walk ( arr, cb, index = 0 ) {
    if ( !arr.length ) return;
    arr = arr.slice();
    const ret = cb(index, arr.shift());
    ((ret && ret.chainerId) ? ret : cy.wrap(ret))
        .then( ret => {
            if ( ret === false ) return;
            return walk(arr, cb, index + 1);
        });
}

/**
 * Your callback should return/yield `false` if the loop is to exit early.
 */
Cypress.Commands.add('eachSeries', { prevSubject: 'optional' }, (subject, arr, cb) => {

    return subject
        // assume `arr` to be `cb`
        ? walk(subject, arr)
        : walk(arr, cb);
});

用法：

describe('test', () => {
    it('test', () => {
        cy.document().then(doc => {
            doc.body.innerHTML = `
                <div class="list-item">0</div>
                <div class="list-item">1</div>
                <div class="list-item">2</div>
                <div class="list-item">3</div>
            `;
        });

        var genArr = Array.from({ length: 40 }, (v, k) => k + 1);

        // the command can be chained on an existing subject
        cy.wrap(genArr).eachSeries((index) => {
            return cy.get('.list-item').eq(index)
                .invoke('text')
                .then(text => {
                    if (text > 1) return false;
                });
        });

        // or it can start the chain (the array is passed as 1st arg)
        cy.eachSeries(genArr, (index) => {
            return cy.get('.list-item').eq(index)
                .invoke('text')
                .then(text => {
                    if (text > 1) return false;
                });
        });

        // you can also return a promise
        cy.eachSeries(['a', 'b', 'c'], (index, value) => {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(value === 'b' ? false : true);
                }, 500);
            });
        });

        // non-thenable callbacks work too
        cy.eachSeries(['a', 'b', 'c'], (index, value) => {
            return value === 'b' ? false : true;
        });
    });
});

在上面的前两个示例中，只有前 3 个项目循环通过，然后循环提前退出。