scrollIntoView options as parameters in the Scroll Interaction

[jotacoroe2y]

Description

Hi again,

in one of our projects, we usually need to scroll to an element but placing it into the middle of the viewport.
This is needed specially when working with viewports of portable devices, where there's usually both sticky header and footer.
So we usually faced situations where the click was intercepted by another element (these sticky elements in most of the cases), so our tests failed.

The current implementation of the Scroll interaction doesn't support the scrollIntoView options, so we implemented the following to have the chance and choose the most suitable scroll depending on the situation:

import { Answerable, Interaction } from '@serenity-js/core';
import { PageElement, Scroll as SerenityScroll } from '@serenity-js/web';
import { TIME } from 'constants/datetime';

const defaultScrollOptions: ScrollIntoViewOptions = {
  block: 'center',
  inline: 'center',
};

export const Scroll = {
  intoView: (scrollOptions = defaultScrollOptions) => ({
    to: (element: Answerable<PageElement<WebdriverIO.Element>>) =>
      Interaction.where(
        `#actor does a customized scroll to the element ${element.toString()}`,
        async (actor) => {
          const nativeElement = await actor
            .answer(element)
            .then((element) => element.nativeElement());

          await nativeElement.waitForExist({ timeout: TIME.fiveSecsInMs });
          await nativeElement.scrollIntoView(scrollOptions);
          await nativeElement.waitForDisplayed({ timeout: TIME.fiveSecsInMs });
          await browser.pause(TIME.oneSecInMs);
        },
      ),
  }),
  to: (pageElement: Answerable<PageElement>) => SerenityScroll.to(pageElement),
};

When calling the Interaction, it's pretty similar as calling the default Scroll interaction:

Scroll.intoView({
      block: 'center',
      inline: 'center',
      behavior: 'smooth',
    }).to(myElement),

---

Pros ✅

This is currently a valid solution for us because our setup consists basically on this (Serenity-js, Cucumber, WebdriverIO).
Actually, all the methods used comes directly from WebdriverIO (waitForExist, scrollIntoView, waitForDisplayed). As it can be seen, the scrollIntoView method from WebdriverIO support these scrollIntoViewOptions.

Cons ❌

• In the moment that we consider to stop using WebdriverIO, could be more complicated or even impossible to maintain this feature.
• If we want to use this interaction with an element, we cannot use the usually way to define a PageElement:

const myElement = PageElement.located(
    By.css(`.my-element`),
  ).describedAs(`my element`),

But we need to type it as a WebdriverIO element:

const myElement = PageElement.located<WebdriverIO.Element>(
    By.css(`.my-element`),
  ).describedAs(`my element`),

Requesting 🙏

Could be possible to have scrollIntoView options implemented in the default Scroll interaction?

[Himanshu21git]

@jotacoroe2y I faced a similar problem. You may refer this issue.

[jotacoroe2y]

absolutely. Thanks a lot @Himanshu21git , even doing a previous search before opening this issue, I didn't find yours.