在 Cypress 中，如何测试一个属性是否等于多个值之一？

Question

我们正在对赛普拉斯的一个网站进行一些测试。在 Windows 上的 Chrome 中，测试全部通过。但是，在 Mac 上，某些元素的宽度比在 Windows 上宽 2px。我知道这不应该是这种情况，我们将单独调查，但我想知道的是，您如何测试测试的值应该落在某个值范围内？

这是在 Windows 中通过的测试：

it('checks Headline container, width & horizontal spacing', () => {
  cy.get('[data-cy=headline]')
    .should('have.css', 'width', '569px')
})

这个是在 Mac 上通过的。唯一的变化是宽度为571px 而不是569px。

it('checks Headline container, width & horizontal spacing', () => {
  cy.get('[data-cy=headline]')
    .should('have.css', 'width', '571px')
})

鉴于实际的should() 测试是针对一个字符串的，那么您将如何测试宽度是否是两个字符串之一呢？还是实际的值范围？

Answer 1

您可以为此使用closeTo。它看起来像这样：

it('checks Headline container, width & horizontal spacing', () => {
  cy.get('[data-cy=headline]')
    .then($element => {
    expect($element.width())
      .closeTo(569, 2)
    })
})

closeTo的第一个数字是希望的数字，第二个数字是边距。例如：如果您有.closeTo(600, 150)，则实际数字应该在 450 到 750 之间。所以这不是一个非常具体的检查。

Answer 2

我想我已经为我的特定用例找到了更好的答案，尽管我真的很喜欢有一个可用的 closeTo() 方法。

这就是我解决问题的方法：

  it('checks Headline container, width & horizontal spacing', () => {
    cy.get('[data-cy=headline]')
      .should('have.css', 'width').and('match', /^(569|571)px/)
  })

我使用正则表达式来匹配字符串569px 和571px。

这使我们可以继续使用should() 进行测试，同时确保该值与我们期望的两个特定大小之一匹配。