t.me/atinfo_chat Telegram группа по автоматизации тестирования

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

locators
selenium
javascript
webdriver
Теги: #<Tag:0x00007fb307c449a8> #<Tag:0x00007fb307c44840> #<Tag:0x00007fb307c446d8> #<Tag:0x00007fb307c44520>

(Степан K) #1

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


(dyuk) #2

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


(Степан K) #3

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


(Степан K) #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 так как элемент должен располагаться вверху видимой части страницы

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


(Vladislav Sobol) #5

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


(Alexandr D.) #6

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

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


(Oleksandr Khotemskyi) #7

У некоторых фреймворков есть готовый метод для проверки элемент в viewport, к примеру -

Но при желании легко реализовать самому (пример на 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)