单击下一步按钮时创建轮播卡片迭代 (CYPRESS)

Question

伙计们，我正在尝试对轮播卡片进行 .each() 迭代。所以我想做的是我登陆页面然后我看到轮播我按下“>”按钮并弹出新卡片（我确认它是可见的）然后我再次按下“>”以查看新的卡弹出等等。我还在学习，所以不知道该为您提供哪些代码。我会在这里留下 CSS 选择器，请帮助我:)

整个轮播内容 - .carousel-content “>”按钮 - .next-btn 弹出的新特定卡片（每张卡片都不同）- .new-card(1)

Answer 1

假设您的轮播不更新现有卡片的总数，我们可以轻松地使用 .each() 来验证存在的每张卡片。

cy.get('.new-card')
  // `.each()` allows us to yield a specific element, the index of the element, and the entire array of elements.
  .each(($el, index, $list) => {
    cy.wrap($el).should('exist'); // validations on the existing card    
    cy.get('.next-btn').then(($btn) => {
      if ($btn.is(":disabled")) {
        return 
      } else {
        cy.wrap($btn).click();
    });
  });

我做了额外的假设，即您会在单击按钮之前验证卡片。如果这是不正确的，只需颠倒我的答案的那些部分。我还假设我们不想在最后一次迭代中单击按钮。

单击下一步按钮时创建轮播卡片迭代 (CYPRESS)

Create an iteration of carousel cards upon clicking on next button (CYPRESS)

each

cypress