scrollIntoView

Overview

Use the scrollIntoView command to scroll to a specified element.

info

Also see Element.scrollIntoView() on MDN.

Usage

await browser.$(selector).scrollIntoView();

or

await browser.$(selector).scrollIntoView(alignToTop);

or

await browser.$(selector).scrollIntoView({ behavior, block, inline });

Command Parameters

Name	Type	Default	Description
alignToTop	Boolean	true	If true, the top of the element will be aligned to the top of the scrollable ancestor's visible area. Corresponds to {block: 'start', inline: 'nearest'}. If false, the bottom of the element will be aligned to the bottom of the scrollable ancestor's visible area. Corresponds to {block: 'end', inline: 'nearest'}.
behavior	String	"auto"	Specifies the scrolling animation: "auto" or "smooth".
block	String	"start"	Specifies vertical alignment: "start", "center", "end", or "nearest".
inline	String	"nearest"	Specifies horizontal alignment: "start", "center", "end", or "nearest".

Usage Examples

it("should demonstrate the scrollIntoView command", async ({ browser }) => {
    const elem = await browser.$("#myElement");

    // scroll the element into view
    await elem.scrollIntoView();

    // scroll the element to the center of the viewport
    await elem.scrollIntoView({ block: "center", inline: "center" });
});

Related Commands

• browser.scroll

References

We'd like to give credit to the original WebdriverIO docs article, from which we drew some information while writing our version.