所有頁面都存在一個圖標，如何在不使用重復代碼的情況下進行編碼？

Question

我在所有網頁中都顯示了一個小聊天圖標。 如何在賽普拉斯中寫作？

小聊天圖標具有 Widget 類，應該在所有頁面中都可以找到

我可以在下面這樣寫，但我想知道是否還有其他方法可以擺脫重復的should('have','Widget') ，此時我什至不確定使用should('have','Widget')是一種正確的做法，但它有效。

cy.get('.pageA').should('have.value', 'Widget')
cy.get('.pageB').should('have.value', 'Widget')
cy.get('.pageC').should('have.value', 'Widget')
cy.get('.pageD').should('have.value', 'Widget')

我正在使用絲柏和黃瓜，非常感謝

Answer 1

您可以使用自定義命令來避免編寫可重用的代碼。 你可以去cypress/support/commands.js並寫：

Cypress.Commands.add('checkChatIcon', (page) => {
  cy.get(page).should('have.class', 'Widget')
})

在你的測試中，你可以只寫：

cy.checkChatIcon('.pageA') 
cy.checkChatIcon('.pageB')

Answer 2

如果斷言在單個測試中排列，您可以采用數據驅動的方法

['.pageA', '.pageB', '.pageC', '.pageD'].forEach(page => {

  cy.get(page).should('have.value', 'Widget')

})

或者如果你想要單獨的測試

['.pageA', '.pageB', '.pageC', '.pageD'].forEach(page => {

  it(`Page ${page} has the icon`, () => {
    cy.get(page).should('have.value', 'Widget')
  })

});

來自Cypress 教程的一個更具體的例子，

it.only('Handles filter links', () => {
  const filters = [
    {link: 'Active', expectedLength: 3},
    {link: 'Completed', expectedLength: 1},
    {link: 'All', expectedLength: 4}
  ]
  cy.wrap(filters)
    .each(filter => {
      cy.contains(filter.link)
      .click()

      cy.get('.todo-list li')
      .should('have.length', filter.expectedLength)
    })
})

Answer 3

您應該考慮將圖標放在所有頁面上的機制並對其進行測試。

如果您必須為您編寫的每個頁面做一些事情以確保圖標存在，那么您將需要測試每個頁面。

如果你做了一些事情，你寫的每個頁面都會自動有圖標，那么你只需要測試你所做的事情。 在這種情況下，編寫單元測試來測試這個東西可能更容易，因為它可能比渲染單個頁面更高的平台代碼層次結構。

您可以考慮的其他方法是測試每個頁面的替代方法是

• 隨機化頁面選擇，以便每次運行測試隨機頁面
• 創建一個@slow 測試來測試您不經常運行的每個頁面
  • 您可以使用蜘蛛或其他方法獲取此頁面的列表
  • 您可以使用此機制結合其他全局事物的測試

一般來說，測試每個頁面的一塊公共內容是非常糟糕的做法。 它會產生大量的運行時開銷，而且可擴展性極差，而且幾乎沒有什么好處。