How do I validate that a particular element or text is visible on the monitor in Robot Framework or Python Selenium

Question

I need to test that once I click on a link, a particular section of the webpage is visible on the monitor . Consider this following code for Wikipedia:

Open Browser    https://en.wikipedia.org/wiki/Selenium_(software)    Chrome
Page should contain    Selenium Remote Control
Click Element    //*[@href="#Selenium_Remote_Control"]
Sleep    3s
Close All Browsers

As expected, when the element is clicked, I can visually see that the section "Selenium Remote Control" from the Wikipedia page is appearing on my monitor screen. I can validate that the section or text is available on the page and it is expected that html codes should be able to handle the "Jump to href" part . But to be sure that it is working on our app and on different browser instances, we like to have a automated method that can actually validate that the portion "Selenium Remote Control" is actually visible on the Monitor screen after the link is clicked .

Have you tried using [Element should be visible](http://robotframework.org/Selenium2Library/Selenium2Library.html#Element%20Should%20Be%20Visible)? — Bryan Oakley, Jan 14 '18 at 17:29
Yes Bryan, I have tested them all. Actually my problem is to test that the href is actually working and the Monitor screen is showing that particular section from the large webpage once the link is clicked. Currently we are manually testing it as I could not find any solution to it. The reason I need to test it because for some browser instance we found that our href link fails to jump to some of the elements. — nhrcpt, Jan 14 '18 at 17:59
So, what happened when you used it? Did you also use [wait until page contains element](http://robotframework.org/Selenium2Library/Selenium2Library.html#Wait%20Until%20Page%20Contains%20Element) to make sure the element is there before checking that it is visible? What happened when you tried that? Is the "Selenium Remote Control" actually part of your app, or is that just example text, or are you waiting for a notice displayed by some browsers? You should include all of these details in your question. — Bryan Oakley, Jan 14 '18 at 20:14
Yes, when I tried the usual Selenium commands like elements should be visible or wait until page contains etc. they are functioning exactly as we expected and validates that the section / element is available on the page. Our issue it to ensure that it is actually becomes part of the monitor screen once the link is clicked. A.Kootstra provided me the perfect solution below. — nhrcpt, Jan 15 '18 at 17:54
ok, so you're no so much asking if the element is visible, but that it has been scrolled into view. — Bryan Oakley, Jan 15 '18 at 18:02

score 2 · Accepted Answer · answered Jan 14 '18 at 21:38

Your given example is indeed a long page where the Element in question is loaded in the DOM but is not visible in the browser view port. However, when using the ... should be visible keywords only look at the DOM and from that perspective it is visible. Just not view-able.

There are small javascript functions that can make the assessment if a visible element is indeed view-able. On this Go Make Things article the isInViewPort(elem) function is found.

IsInViewPort.js

/*
 * Obtained from: https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/
 */
var isInViewport = function (elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

In Robot Script we can then proceed to fetch the element and then pass it to this function with the custom keyword: Element Should Be In View which returns a boolean when an element is true and which is not.

Is Element In View.robot

*** Settings ***
Library    Selenium2Library
Library    OperatingSystem    


*** Test Cases ***
Element Should Be in View Test
    [Documentation]
    ...    Test to validate that an element isn't view-able and then is view-able. 
    Open Browser    https://en.wikipedia.org/wiki/Selenium_(software)    Chrome

    ${elem}    Get Webelement    xpath=//*[@id="Selenium_Remote_Control"]
    ${bool}    Element Should Be In View    ${elem}
    Should Not Be True    ${bool}

    Click Element    //*[@href="#Selenium_Remote_Control"]

    ${elem}    Get Webelement    xpath=//*[@id="Selenium_Remote_Control"]
    ${bool}    Element Should Be In View    ${elem}
    Should Be True    ${bool}

    [Teardown]    Close All Browsers

*** Keywords ***
Element Should Be In View
    [Documentation]
    ...    Partially Inspired by: https://stackoverflow.com/a/28709012/6152737
    [Arguments]    ${element}
    ${s2l}=     Get Library Instance    Selenium2Library
    ${js}=      Get File    IsInViewport.js    
    ${visible}=    Call Method    
    ...                ${s2l._current_browser()}    
    ...                execute_script    ${js} return isInViewport(arguments[0]);    ${element}
    [Return]    ${visible}

When the view changed, i.e. because of the clicked link, then the element needs to be retrieved again. Otherwise the old status is not returned.

Thanks a lot. This is exactly what we need. – nhrcpt Jan 15 '18 at 17:50 — nhrcpt, Jan 15 '18 at 17:50

How do I validate that a particular element or text is visible on the monitor in Robot Framework or Python Selenium

1 Answers1