Geb Programmer : Hidden Content and Mouse over Events

Lets say we have an HTML page with content hidden until we place the mouse over it.

It will look like this:

Screenshot_27_07_16_16_04

And this is the html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="sponsor">
            <img id="ocilogo" src="http://gr8conf.eu/images/eu/sponsors/oci_300.png" alt="OCI"/>
            <p sytle="display: none;">The OCI Grails Team includes Grails co-founders and several other subject matter experts of the global Grails community! Contact us today and gain access to the architects and engineers who developed the framework and have spent their careers supporting and maturing it.</p>
            <p sytle="display: none;">Please visit ociweb.com to learn more about our engineering services, Open Source technologies, and professional software engineering training.</p>
        <script type="text/javascript">
if(document.getElementById("ocilogo")) {
 document.getElementById("ocilogo").onmouseover = function() { showOciDescription() };
}
function showOciDescription() {
   var divNode = document.getElementById("ocilogo").parentNode;
   for(var i = 0; i < divNode.getElementsByTagName("p").length; i++) {
       divNode.getElementsByTagName("p")[i].style.display = "block";
   }
}
        </script>
        </div>
    </body>
</html>

If I try to fetch the content with Geb, it will fail because it is hidden. Next test fails.

when:
def paragraphs = []
Browser browser = new Browser()
browser.drive {
    go 'http://localhost:8888'
    paragraphs = $('.sponsor p').collect { it.text().trim() }
}

then:
!paragraphs.isEmpty()
paragraphs.each {
    assert !it.isEmpty()
}

We have several alternatives:

A. Call a JS method directly from Geb

when:
def paragraphs = []
Browser browser = new Browser()
browser.drive {
    go 'http://localhost:8888'
    js.showOciDescription()
    paragraphs = $('.sponsor p').collect { it.text().trim() }
}

then:
!paragraphs.isEmpty()
paragraphs.each {
    assert !it.isEmpty()
}

We have several alternatives:

B. Move the mouse over the image

when:
def paragraphs = []
Browser browser = new Browser()
browser.drive {
    go 'http://localhost:8888'
    interact {
        moveToElement $('#ocilogo')
    }
    paragraphs = $('.sponsor p').collect { it.text().trim() }
}

then:
!paragraphs.isEmpty()
paragraphs.each {
    assert !it.isEmpty()
}

C. Include a Library

In this example I am going to include Jquery and execute a Jquery method to make the paragraphs visible.

when:
def paragraphs = []
Browser browser = new Browser()
def library = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'
def createScript = "document.createElement('script')"
def st = "document.body.appendChild($createScript).src='$library'"
browser.drive {
    go 'http://localhost:8888'
    js.exec(st)
    js.exec('$(".sponsor p").show()')
    paragraphs = $('.sponsor p').collect { it.text().trim() }
}

then:
!paragraphs.isEmpty()
paragraphs.each {
    assert !it.isEmpty()
}

Do you like to read about Geb development? Yes, then Subscribe to Groovy Calamari a weekly curated email newsletter about the Groovy ecosystem which I write 

Leave a Reply

Your email address will not be published. Required fields are marked *