Browser UI Testing with Geb: Scroll element to be visible

Just as a short note regarding browser automation / web testing with geb:

If you want / need to make sre an certain element is visible on the screen so your test find the right UI element to continue, this snippet (that is a example test method) might help:

    void "delete element in list"() {
        given: "delete is triggered by click on the delete icon"
            def jqScrollToVisible = 'jQuery(\'#elementList\').find(\'div:contains(' + elementName + ')\')[0].scrollIntoView();'
            js.exec(jqScrollToVisible)
            waitFor{ $('#elementList').find('div', text: elementName).displayed }
            $('#elementList').find('div', text: elementName).parent().find("div", class: "icon-delete").click()

        when: "delete dialog is shown and confirmed"
            waitFor { deleteDialog.displayed == true }
            deleteDialogYesButton.click();

        then: "Message is shown and disappears"
            waitFor { blockUiMessage.displayed }
            waitFor { blockUiMessage.displayed == false }
    }

Note: blockUiMessage, deleteDialogYesButton and deleteDialog are page elements defined in the page (see Book of Geb for details)

Happy testing