Убедитесь, что элемент находится в области просмотра с Cypress - PullRequest
Новая
       14

Убедитесь, что элемент находится в области просмотра с Cypress

1 голос
/ 05 ноября 2019

Средство сопоставления visible Cypress рассматривает элемент как видимый на основе множества факторов, однако не учитывает область просмотра, поэтому прокручиваемый вне экрана элемент по-прежнему обрабатывается как видимый.

Мне нужно проверить, что ссылка на якорь на странице работает правильно. Как только ссылка нажата, страница прокручивается до элемента с идентификатором, определенным в href ссылки (example/#some-id).

Как проверить, что элемент находится в области просмотра?

1 Ответ

1 голос
/ 05 ноября 2019

Я собрал воедино следующие команды, которые работают до сих пор, но поражен тем, что нет готового решения: 

Cypress.Commands.add(`topIsInWithinViewport`, { prevSubject: true }, subject => {
  const windowInnerWidth = Cypress.config(`viewportWidth`)

  const bounding = subject[0].getBoundingClientRect()

  const rightBoundOfWindow = windowInnerWidth

  expect(bounding.top).to.be.at.least(0)
  expect(bounding.left).to.be.at.least(0)
  expect(bounding.right).to.be.lessThan(rightBoundOfWindow)

  return subject
})

Cypress.Commands.add(`isWithinViewport`, { prevSubject: true }, subject => {
  const windowInnerWidth = Cypress.config(`viewportWidth`)
  const windowInnerHeight = Cypress.config(`viewportHeight`)

  const bounding = subject[0].getBoundingClientRect()

  const rightBoundOfWindow = windowInnerWidth
  const bottomBoundOfWindow = windowInnerHeight

  expect(bounding.top).to.be.at.least(0)
  expect(bounding.left).to.be.at.least(0)
  expect(bounding.right).to.be.lessThan(rightBoundOfWindow)
  expect(bounding.bottom).to.be.lessThan(bottomBoundOfWindow)

  return subject
})
...