在 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 之间。所以它不是一个非常具体的检查。

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()用于测试，同时确保该值与我们期望的两个特定大小之一匹配。