Checking if an element is visible on-screen

4 posts, 1 answers
  1. Darren
    Darren avatar
    2 posts
    Member since:
    Dec 2015

    Posted 07 Dec 2015 Link to this post

    Hello, 

    What's the recommended process for checking if an element is actually visible on-screen rather than just existing somewhere in the browsers DOM? I have an application where elements are scrolled in/out of view using the Bootstrap ScrollSpy tool - http://getbootstrap.com/javascript/#scrollspy , so would like to be able to test this.

     

    Thanks,

     Darren

  2. Answer
    Cody
    Admin
    Cody avatar
    3360 posts

    Posted 07 Dec 2015 Link to this post

    Hi Darren,

    I'm not sure we can meet this particular need. We do have the ability to verify an element is set to be visible as shown in the attached screenshot however that verification is only verifying the visibility property of the element. If an element is marked visible but scrolled off the current window the verification will still pass but it's not actually visible on the current screen or inside the scroll window.

    Using some complicated code we might be able to calculate if an element is visible or not. It would require asking the browser for the current screen coordinates of the view window whether that's a scroll window or the browser window. Then we have to ask the browser for the current screen coordinates of the target element you want to verify. Then calculate whether or not both rectangles intersect. If the two rectangles intersect then the element is visible. If they do not intersect then the element is not visible. But that is some advanced coding that may not be worth it.

    One final comment would be make sure that you're not just testing the control. Generally it's not worth your time to automate something that is built into a third-party control. You or your developers have no control over the code of a third-party control so don't waste your time testing the functionality of third-party code. Even if you find a bug all you could do is report it to the third-party vendor and wait for them to fix it for you.

    You're far more productive spending time automating and verifying code that you and your developers have control over. Manually test third-party controls just once or twice to make sure that they work as expected. From then on you just assume that they are working properly. They turn into a very very low risk of containing a bug in the final released product.


    Regards,
    Cody
    Telerik
     
    The New Release of Telerik Test Studio Is Here! Download, install,
    and send us your feedback!
  3. Darren
    Darren avatar
    2 posts
    Member since:
    Dec 2015

    Posted 08 Dec 2015 in reply to Cody Link to this post

    Thanks Cody. I guess I'm more interested in testing that I don't make a silly mistake and somehow associate a menu item with the wrong element,  so it scrolls to the wrong part of the page rather than testing the bootstrap tool itself.
  4. Cody
    Admin
    Cody avatar
    3360 posts

    Posted 08 Dec 2015 Link to this post

    Hello Darren,

    I'm glad I could help.

    Regards,
    Cody
    Telerik
     
    The New Release of Telerik Test Studio Is Here! Download, install,
    and send us your feedback!
Back to Top