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