Expand my Community achievements bar.

Hobbes tests are unable to scroll to a position

Avatar

Level 2

We have a test that relies on a user scrolling to a certain position - using scrollTop doesn't seem to work within the iframe window - is there a recommend approach to achieve scrolling using hobbes?

4 Replies

Avatar

Employee

Hi

I asked the developer to test your use case and he succeeded to scroll.
He made a little test case:

new hobs.TestCase("Test Scroll") // Page with enough content to activate scroll .navigateTo("/libs/cq/workflow/admin/console/content/models.html/etc/workflow/models") // Use jQuery to scroll and download more content .execSyncFct(function() { var $elementToScroll = hobs.find(".foundation-content .foundation-collection-container.foundation-layout-util-maximized.card"); var scrollAmount = $elementToScroll.find("div").height(); $elementToScroll.scrollTop(scrollAmount); })

You should be able to do it on your instance (OOTB).

It uses

1. hobs.find to find DOM element to scroll in the iframe
2. jQuery.height() to get the height of the element ro know how long it should scroll 
3. jQuery.scrollTop() to do the action of scrolling

He also told me that they will consider adding a scrolling test action directly into Hobbes in future versions.

Avatar

Level 2

Hi,

Thanks for you test case but it doesn't quite match mine I believe - It would seem that that is scrolling an element within the iframe (fixed height with overflow scroll), which does prove that scrollTo works within the iframe - but I am trying to scroll the entire window (html, body). You might normally do this like so:

$("html, body").scrollTop($(element).offset().top);

but trying to do the same in hobs:

var $elementToScroll = hobs.find('html, body'), scrollAmount = hobs.find('.scrollToMe').offset().top; $elementToScroll.scrollTop(scrollAmount);

Doesn't seem to scroll the window at all.

Any ideas? Thanks!

Avatar

Employee

Hi

When Hobbes is loaded in AEM authoring, scroll of the page loaded in the iframe is handled outside of the iframe.
So try this:

new hobs.TestCase("Test Scroll") // Page with enough content to activate scroll .navigateTo("/libs/cq/workflow/admin/console/content/models.html/etc/workflow/models") // Use jQuery to scroll and download more content .execSyncFct(function() { var $elementToScroll = $(".editor-panel-content.editor-panel-content-with-header”) // Note that the scroll of the page itself is handled outside of the iframe, so we don’t target the element with hobs.find but directly via $. var scrollAmount = $elementToScroll.find("div").height(); $elementToScroll.scrollTop(scrollAmount); })

Hope that helps