所有页面都存在一个图标，如何在不使用重复代码的情况下进行编码？

Question

我在所有网页上都显示了一个小聊天图标。如何用 Cypress 书写？

聊天小图标有class个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')

我正在使用 Cypress 和 Cucumber 预处理器。

Answer 1

您可以使用 custom commands 来避免编写可重用的代码。你可以去cypress/support/commands.js写：

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

在你的测试中你可以只写：

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

Answer 2

如果断言在单个测试中排列，您可以采用 data-driven 方法

['.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 tutorial、

的更具体示例

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 测试来测试您运行不经常访问的每个页面
- 您可以使用蜘蛛程序或其他方法获取此页面的列表
- 您可以使用此机制结合其他全局事物的测试

一般来说，针对一段共同内容测试每个页面是非常糟糕的做法。它会产生巨大的 run-time 开销，可扩展性极强并且几乎没有什么好处。

所有页面都存在一个图标，如何在不使用重复代码的情况下进行编码？

An icon exists in all pages, how to code this without using repetitive code?

java

cucumber

cypress

cypress-cucumber-preprocessor