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

Question

我们正在对 Cypress 的一个网站进行一些测试。在 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 之间。所以这不是一个非常具体的检查。