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

我们正在为Cypress中的一个网站运行一些测试。在Chrome on Windows中，所有测试都通过。然而，在Mac上，某些元素的宽度比在Windows上宽2倍。我知道情况不应该如此，我们将分别对此进行调查，但我想知道的是，如何测试一个测试的值应该在一个值的范围内

这是在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（）

测试针对的是一个字符串，那么如何测试宽度是否为两个字符串中的任意一个？或者一个实际的值范围？

您可以使用

接近

。它看起来是这样的：

it（'检查标题容器、宽度和水平间距'，（）=>{
cy.get（“[data cy=headline]”）
。然后（$element=>{
预期（$element.width（））
.接近（569,2）
})
})

---

接近的

的第一个数字是期望的数字，第二个数字是边距。例如：如果您的
.close接近（600150）
实际数字应该在450到750之间。所以这不是一个非常具体的检查。
我认为我已经为我的特定用例找到了一个更好的答案，尽管我真的很喜欢有一个
closeTo（）
方法可用

我就是这样解决这个问题的：

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

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

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

这允许我们继续使用
should（）
进行测试，同时确保值与我们期望的两个特定大小中的一个匹配。
这对我来说是一个黄金答案，尽管适用于不同的场景！我们正在用Cypress测试字体大小，Electron 61和Chrome 77的计算方式不同。Electron将其计算为
bold
，而Chrome将其计算为
700
。我希望这两个值都有效，所以我使用
.should（'have.css'，'font-weight'）和（'match'，/700 | bold/）