Как проверить, что элемент виден пользователю

webdriver
, , ,
#1

Есть длинная страница с вертикальным скролом. По нажатию на кнопку она страница скролится вниз к определённому элементу. Нужно как-то убедиться в работе данной кнопки - проверить, что элемент после нажатия расположен в видимой части страницы.

1 лайк
#2

можно попробовать гетнуть координаты кнопки после первого нажатия и сранить с ожидаемыми координатами

#3

ой, запутал вас немного - “она” это страница, а не кнопка. То есть кнопка мне совсем не нужна после нажатия

#4

Нашёл способ:

  1. получаю начало видимой области через js: minPositionY = “return window.pageYOffset”
  2. получаю координаты проверяемого элемента: elementPositionY = webElement.getLocation().getY()
  3. и проверяю что elementPositionY-minPositionY > 0 && elementPositionY-minPositionY < heightDisplayedArea/2
    , где heightDisplayedArea = ~950 (разрешение xxxx*1080) - эмпирически рассчитанная высота видимой области. Делю на 2 так как элемент должен располагаться вверху видимой части страницы

Замудрил конечно, если кто знает лучшее решение буду рад увидеть

#5

Можно через ExpectedCondition.visibilityOf() или просто element.isDisplayed()

#6

Вопрос не в том, что он “вообще” отображен, а находится именно во viewport страницы.

Самое адекватное это делать через JS.

#7

У некоторых фреймворков есть готовый метод для проверки элемент в viewport, к примеру -
https://webdriver.io/docs/api/element/isDisplayedInViewport.html

Но при желании легко реализовать самому (пример на protractorjs):


const isInViewport = await browser.executeScript(function (elem) {
    const bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}, $('some web element'))

console.log(`Is element in viewport?`, isInViewport)