scrollIntoView

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

info

Scrolling for Mobile Native Apps is done based on the mobile swipe command.

Parameters

Name	Type	Details
options optional	object, boolean	options for Element.scrollIntoView(). Default for desktop/mobile web: { block: 'start', inline: 'nearest' } Default for Mobile Native App { maxScrolls: 10, scrollDirection: 'down' }
Desktop/Mobile Web Only
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)
Mobile Native App Only
options.direction optional	string	Can be one of down, up, left or right, default is up. 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.duration optional	number	The duration in milliseconds for the swipe. Default is 1500 ms. The lower the value, the faster the swipe. 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
options.percent optional	number	The percentage of the (default) scrollable element to swipe. This is a value between 0 and 1. Default is 0.95. NEVER swipe from the exact top|bottom|left|right of the screen, you might trigger for example the notification bar or other OS/App features which can lead to unexpected results. 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')
    });
});