В Cypress, как вы проверяете, что свойство равно одному из нескольких значений?

Question

Мы проводим несколько тестов для веб-сайта на Cypress. В Chrome на Windows все тесты проходят. Однако на Mac ширина некоторых элементов в 2 раза больше, чем в Windows. Я понимаю, что это не должно быть так, и мы исследуем это отдельно, но я хотел бы знать, как вы проверяете, что значение теста должно попадать в диапазон значений?

Это тест, который проходит в 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() для тестов, гарантируя, что значение соответствует одному издва конкретных размера, которые мы ожидали.