html - 使用 for 循环单击 Cypress 上的元素列表而不使用每个元素

Question

我有一个选项/按钮列表，我需要确保它们都设置为特定值。每个包装器都可以有多个按钮，但第一个按钮始终是我想要在运行测试之前设置的按钮。

因此我需要循环这些包装器并定位每个包装器的第一个子/按钮。

通常情况下，each() 会出现这种情况，但第一次点击后 Cypress 会出错 - DOM 重新呈现，Cypress 无法找到剩余的按钮。

因此我需要一个替代解决方案。其中之一是经典的 for 循环。这是代码:

<div>
  <div class="ab-test-switch__experiment">
    <div class="ab-test-switch__buttons"><button type="button" class="button ab-test-switch__button button--primary button--lg" data-variant="49_a">
      49_a
      </button><button type="button" class="button ab-test-switch__button button--secondary button--lg" data-variant="49_b">
      49_b
      </button>
    </div>
  </div>
  <div class="ab-test-switch__experiment">
    <div class="ab-test-switch__experiment__title">
      <div class="v-popover">
        <div class="trigger" style="display: inline-block;">
          <p data-v-d7151c42="">(detail)</p>
        </div>
      </div>
    </div>
    <div class="ab-test-switch__buttons"><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--secondary button--lg" data-variant="old_business_section" data-v-5c4d7450="">
      old_business_section
      </button><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--primary button--lg" data-variant="new_business_section" data-v-5c4d7450="">
      new_business_section
      </button>
    </div>
  </div>
  <div class="ab-test-switch__experiment">
    <div class="ab-test-switch__experiment__title">
      <h2 data-v-d7151c42="" data-v-5c4d7450="">53_mobile_banner</h2>
      <div data-v-d7151c42="" class="v-popover" data-v-5c4d7450="">
        <div class="trigger" style="display: inline-block;">
          <p data-v-d7151c42="">(detail)</p>
        </div>
      </div>
    </div>
    <div class="ab-test-switch__buttons"><button type="button" class="button ab-test-switch__button button--secondary button--lg" data-variant="none" data-v-5c4d7450="">
      none
      </button><button type="button" class="button ab-test-switch__button button--primary button--lg" data-variant="mobile_banner" data-v-5c4d7450="">
      mobile_banner
      </button>
    </div>
  </div>
  <div class="ab-test-switch__experiment">
    <div class="ab-test-switch__experiment__title">
       <div class="v-popover">
        <div class="trigger" style="display: inline-block;">
          <p>(detail)</p>
        </div>
      </div>
    </div>
    <div class="ab-test-switch__buttons"><button type="button" class="button ab-test-switch__button button--primary button--lg" data-v-5c4d7450="">
      explore_a
      </button><button type="button" class="button ab-test-switch__button button--secondary button--lg">
      explore_b
      </button>
    </div>
  </div>
</div>

  // this fails as the DOM changes after each click
  cy.get('.ab-test-switch__buttons > :nth-child(1)').each(($el) => {
    cy.wrap($el).click()
    cy.wait(1000) // didn't help, there's no race condition here
  })

before(() => {
  cy.visit('/company_profile_frontend/ab-test-switch')
  // cy.get('.ab-test-switch__buttons > :nth-child(1)').click({ multiple: true, force: true }) (this didn't work either)
  const numberOfAbTests = document.getElementsByClassName('ab-test-switch__buttons').length

  for (let i = 1; i <= numberOfAbTests; i += 1) {
    cy.get(`.ab-test-switch__buttons > :nth-child(${i})`).click().pause()
  }
  // cy.get('.ab-test-switch__buttons > :nth-child(1)').each(($el) => {
  //   cy.wrap($el).click().pause()
  //   // eslint-disable-next-line cypress/no-unnecessary-waiting
  //   cy.wait(1000)
  // }) (another failed attempt)
})

还有其他方法吗？

Answer 1

只要在测试开始时知道 numberOfAbTests 并且不是从上一个命令计算或异步获取，for 循环就可以工作。

it('clicks buttons which become detached', () => {

  const numberOfAbTests = 2;
  ...
  for (let i = 1; i <= numberOfAbTests; i += 1) {    // nth-child is 1-based not 0-based
    cy.get(`.ab-test-switch__buttons > :nth-child(${i})`)  
      .click()
  }
})

相当于

it('clicks all the buttons', () => {
  cy.get('.ab-test-switch__buttons > :nth-child(1)').click()
  cy.get('.ab-test-switch__buttons > :nth-child(2)').click()
})

因为 Cypress 运行循环并将按钮单击命令排队，然后如您所说，异步运行。

---

当 numberOfAbTests 不是静态已知时，您需要像@RosenMihaylov 所说的那样使用递归，但他的实现遗漏了一个关键因素 - 您必须在按钮分离的情况下重新查询它们/替换。

it('clicks all the buttons', () => {

  cy.get('.ab-test-switch__buttons')
    .then(buttons => {
      const count = buttons.length;  // button count not known before the test starts

      clickButtonsInSuccession();

      function clickButtonsInSuccession(i = 1) {
        if (buttonIndex <= count) {
          const buttonSelector = `.ab-test-switch__buttons > :nth-child(${i})`;
          cy.get(buttonSelector)                           // re-query required here
            .click()
          clickButtonsInSuccession(i +1);
        }
      }
    })
})

这假设 .ab-test-switch__buttons 是按钮的容器，所以 DOM 的结构类似于这样

<div class=".ab-test-switch__buttons">
  <button>one</button>
  <button>two</button>
</div>

---

查看扩展代码

您需要在 DOM 加载后通过查询来获取测试计数，但是

const numberOfAbTests = document.getElementsByClassName('ab-test-switch__buttons').length;

是同步代码，它在 之前运行任何命令，包括 cy.visit()，因此它返回 0。

将测试分两步运行，第一步运行所有同步代码，然后运行命令。

异常是回调中的同步代码，例如 .then(callbackFn) 有效地将 callbackFn 插入命令队列以在命令之间顺序运行。

您可以使用命令查询 numberOfAbTests 并将值传递到 .then()

cy.get('.ab-test-switch__buttons')
  .its('length')
  .then(numberOfAbTests => {

    for (let i = 1; i <= numberOfAbTests; i += 1) {
      ...
    }
  })

或者在before()中访问并计数，然后在it()中循环，

let numberOfAbTests;

before(() => {
  // All commands here run before it() starts
  cy.visit('../app/ab-test-switch.html').then(() => {
    numberOfAbTests = Cypress.$('.ab-test-switch__buttons').length;
  })
})

it('tests the button', () => {

  for (let i = 1; i <= numberOfAbTests; i += 1) {
    ...
  }
})

或者忘记计算测试，只使用 .each()

cy.get('.ab-test-switch__buttons')
  .each($abTest => {
    cy.wrap($abTest).find('button')
      .each($button => {
        cy.wrap($button).click(); 
      })
  })

选择器

选择器 .ab-test-switch__buttons > :nth-child(${i}) 是有问题的，因为索引 i 指的是 abTest 按钮组，但是您正在尝试使用它来单击各个按钮。

所以使用for循环，

for (let i = 0; i < numberOfAbTests; i += 1) {      // NB :nth() is 0-based
                                                    // in contrast to :nth-child()
                                                    // which is 1-based

  cy.get(`.ab-test-switch__buttons:nth(${i}) > button`)
    .eq(0).click()                                       // click button A

  cy.get(`.ab-test-switch__buttons:nth(${i}) > button`)
    .eq(1).click()                                       // click button B
}