在赛普拉斯中，如何测试一个属性等于多个值之一？

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