scrollIntoView

Scroll element into viewport for Desktop/Mobile Web AND Mobile Native Apps.

info

Scrolling for Mobile Native Apps is done based on native mobile gestures. It is only supported for the following drivers:

• appium-uiautomator2-driver for Android
• appium-xcuitest-driver for iOS

Usage

$(selector).scrollIntoView({ behavior, block, inline, direction, maxScrolls, scrollableElement })

Parameters

Name	Type	Details
options	object, boolean	options for Element.scrollIntoView(). Default for desktop/mobile web: { block: 'start', inline: 'nearest' } Default for Mobile Native App { maxScrolls: 10, scrollDirection: 'down' }
options.behavior optional	string	See MDN Reference. WEB-ONLY (Desktop/Mobile)
options.block optional	string	See MDN Reference. WEB-ONLY (Desktop/Mobile)
options.inline optional	string	See MDN Reference. WEB-ONLY (Desktop/Mobile)
options.direction optional	string	Can be one of down, up, left or right, default is down. MOBILE-NATIVE-APP-ONLY
options.maxScrolls optional	number	The max amount of scrolls until it will stop searching for the element, default is 10. MOBILE-NATIVE-APP-ONLY
options.scrollableElement optional	Element	Element that is used to scroll within. If no element is provided it will use the following selector for iOS -ios predicate string:type == "XCUIElementTypeApplication" and the following for Android //android.widget.ScrollView'. If more elements match the default selector, then by default it will pick the first matching element. MOBILE-NATIVE-APP-ONLY

Examples

desktop.mobile.web.scrollIntoView.js

it('should demonstrate the desktop/mobile web scrollIntoView command', async () => {
    const elem = await $('#myElement');
    // scroll to specific element
    await elem.scrollIntoView();
    // center element within the viewport
    await elem.scrollIntoView({ block: 'center', inline: 'center' });
});

mobile.native.app.scrollIntoView.js

it('should demonstrate the mobile native app scrollIntoView command', async () => {
    const elem = await $('#myElement');
    // scroll to a specific element in the default scrollable element for Android or iOS for a maximum of 10 scrolls
    await elem.scrollIntoView();
    // Scroll to the left in the scrollable element called '#scrollable' for a maximum of 5 scrolls
    await elem.scrollIntoView({ direction: 'left', maxScrolls: 5, scrollableElement: $('#scrollable') });
});