Convert Geb selector into DOM element (for scroll-click)

[nick.me...@gmail.com]

I'm testing a complex corporate website with Geb and beginning to test on a wide range of browsers.

The .click() method is starting to fail in some tests because some elements in some browsers are off-screen.

So I'm investigating a scroll method that takes a Geb selector like:

static content = {
    singlesButton(cache: false) { $('#ai-singles') }

    ...

}

and send its position on the screen to a Javascript snippet that scrolls to it, e.g.

// finds the offset of el from the body or html element
        var _x = 0;
        var _y = 0;
        while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
        {
            _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
            _y += el.offsetTop - el.scrollTop + el.clientTop;
            el = el.offsetParent;
        }
        window.scrollTo(_y, _x)
    

My question is: how do I take a Geb page selector and find its DOM object so I can pass that into Javascript?

Thanks,

Nick

[Marcin Erdmann]

Hi Nick,

From my experience I can tell you that element being off screen should not cause you any problems when calling click() because the browser will scroll the element into view before clicking it. Most common issues that cause click() to have no effect are:

- other elements overlying the clicked element

- various animations which cause the click not to happen on the target element because things are moving when the click happens

- interacting with a select whose dropdown overlays the clicked element before clicking it

Some browsers tend to throw exceptions in such cases while others silently continue even though the element has not been clicked. I would therefore suggest reinvestigating the cause of your failures.

Back to your original questions, to pass a DOM element to a js call you need to pass a WebElement instance to a JavascriptInterface.exec() call and then reference it via the arguments array in javascript. There's a couple methods that give you WebElement(s) of a Navigator (look for methods returning WebElement instances in javadocs for Navigator at http://www.gebish.org/manual/current/api/geb/navigator/Navigator.html), singleElement() being one of them. Following is an example of passing a DOM element to a js call in Geb:

js.exec(singlesButton.singleElement, '"""

        var _x = 0;

        var _y = 0;

        var el = arguments[0]

        while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )

        {

            _x += el.offsetLeft - el.scrollLeft + el.clientLeft;

            _y += el.offsetTop - el.scrollTop + el.clientTop;

            el = el.offsetParent;

        }

        window.scrollTo(_y, _x)

""")

Marcin

--
You received this message because you are subscribed to the Google Groups "Geb User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+u...@googlegroups.com.
To post to this group, send email to geb-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geb-user/b1858236-d038-44c6-ade3-22c543a63dc6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.