使用 data-cy 属性作为选择器的 Cypress 中的条件测试

Question

我看到一些关于这个确切主题的帖子，但是 none 其中类使用数据类就像我作为选择器一样，所以这使得这个条件测试有点难写。

我的想法是，我有一个带有分页的 table。我的想法是检查 [data-cy-pagination-next] 是否有或没有 disabled 属性，这意味着有不止一页，因此测试可以继续。

我看到的大多数帖子都使用这样的语法：

cy.get('my-button')
  .then($button => {
    if ($button.is(':enabled')) {
      cy.wrap($button).click()
    }
  })

但我没有他们描述的 $button。我点击的是一个按钮，但这真的重要吗？好像不会写

cy.get('[data-cy=pagination-next]')
  .then('[data-cy=pagination-next]' => {
    if ('[data-cy=pagination-next]'.is(':enabled')) {
      cy.wrap('[data-cy=pagination-next]').click()
    }
  })

我怎样才能让这个条件生效？如果不止一页，这个测试效果很好，但在没有第二页的情况下，我只想让测试到此结束。任何提示将不胜感激！

干杯！

这是目前的测试

 it('Data Source has Pagination and test functionality', () => {
    cy.get('[data-cy=pagination]').should('exist')
    // assert that we are at the first page and the start and back button is disabled
    cy.get('[data-cy=pagination-page-list]').contains('Page 1 of')
    // If there are multiple pages then do the following tests
  
    // click next button and assert that the current page is page 2
    cy.get('[data-cy=pagination-next]').click()
    cy.get('[data-cy=pagination-page-list]').contains('Page 2 of')
    // click end button and assert that the end and next buttons are disabled
    cy.get('[data-cy=pagination-end]').click()
    cy.get('[data-cy=pagination-next]').should('be.disabled')
    cy.get('[data-cy=pagination-end]').should('be.disabled')
    // click start button button and assert that the current page is page 1 and next and start buttons are disabled
    cy.get('[data-cy=pagination-start]').click()
    cy.get('[data-cy=pagination-page-list]').contains('Page 1 of')
    cy.get('[data-cy=pagination-start]').should('be.disabled')
    cy.get('[data-cy=pagination-back]').should('be.disabled')
  })

Answer 1

我认为您误解了屈服和回调的工作原理。 .then() 中有 $button 的原因是因为它是由 cy.get() 产生的。它可以被命名为任何东西，只要它是一个有效的名称（注意：字符串文字，就像你试图做的那样，是无效的）。

因此，$button 只是从您的 cy.get('my-button') 中生成的元素。这就是为什么我们可以在其上使用 JQuery 函数和 Chai 断言。

cy.get('[data-cy=pagination-next]')
  .then($el => { // naming the yielded object from `cy.get()` to $el
    if ($el.is(':enabled')) { // using JQuery function `.is` to check if the element is enabled
      cy.wrap($el).click() // Cypress requires the JQuery element to be wrapped before it can click it.
    }
  })

Answer 2

你可以这样做。您可以使用 each 遍历所有分页元素。因此，如果您没有只有 2 个按钮，循环将只检查 2 个按钮，然后终止。

cy.get('[data-cy=pagination-page-list]').should('contain.text', 'Page 1 of')
cy.get('[data-cy=pagination-next]').each(($ele, index) => {
  if ($ele.is(':enabled')) {
    cy.wrap($ele).click()
    cy.wrap($ele).should('contain.text', `Page ${index + 2} of`) //index starts from 0
  }
})

Answer 3

您可以使用页面指示器拆分测试逻辑

it('Data Source has Pagination and test functionality', () => {
    cy.get('[data-cy=pagination]').should('exist')

    cy.get('[data-cy=pagination-page-list]')
    .then($pageList => {

      if ($pageList.text() === 'Page 1 of 1')  

        // single page assertions

        cy.get('[data-cy=pagination-next]').should('be.disabled')
        cy.get('[data-cy=pagination-end]').should('be.disabled')
        cy.get('[data-cy=pagination-start]').should('be.disabled')
        cy.get('[data-cy=pagination-back]').should('be.disabled')

      } else {

        // multi page assertions
  
        cy.get('[data-cy=pagination-next]').click()
        cy.get('[data-cy=pagination-page-list]')
          .should('contain', 'Page 2 of')            // assert on second page

        cy.get('[data-cy=pagination-end]').click()
        cy.get('[data-cy=pagination-next]').should('be.disabled')

        cy.get('[data-cy=pagination-start]').click()
        cy.get('[data-cy=pagination-page-list]').contains('Page 1 of')
        cy.get('[data-cy=pagination-start]').should('be.disabled')
        cy.get('[data-cy=pagination-back]').should('be.disabled')
     }
  })

更好的是，控制测试数据，以便只存在一个页面，然后运行在已知条件下进行两次测试，并消除不稳定的条件测试。

使用 data-cy 属性作为选择器的 Cypress 中的条件测试

Conditional Tests in Cypress using data-cy attributes as selectors

cypress

cypress-conditional-testing