使用 data-cy 屬性作為選擇器的 Cypress 中的條件測試

Question

我看到一些關於這個確切主題的帖子，但沒有一個像我一樣使用數據類作為選擇器，所以這使得這個條件測試更難編寫。

這個想法是我有一個帶有分頁的表格。 我的想法是檢查[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

您可以使用頁面指示器來拆分測試邏輯

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')
     }
  })

更妙的是，控制測試數據以便只存在一個頁面，然后在已知條件下運行兩個測試並消除不穩定的條件測試。

Answer 2

我認為您誤解了屈服和回調的工作原理。 .then( .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 3

你可以這樣做。 您可以使用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
  }
})