How to scroll a Ionic-Page via JavaScript Test-code

Question

I'm working on an Ionic 6 Webapp based on Angular 13. The client's QA-department want's to perform regression-testing via Selenium test-automatization. For other project's they used window.scrollBy(0, window.innerHeight) to systematically scroll over the page and take screenshots to find regression issues. But this is not possible on Ionic pages, since the HTML body is not scrollable, only the content of the ion-content element. Is there any way to trigger scrolling within the ion-content element via simple JavaScript? I created a Stackblitz where you can see the basic structure of my ionic-page. So far I tried different things but none worked:

document.getElementsByTagName("ion-content")[0].scrollTo(0, 300);

document.getElementsByTagName("ion-content")[0].scrollToBottom();

document.getElementsByTagName("ion-content")[0].shadowRoot.childNodes[1].scrollTo(0, 300); //tried to access the inner-scroll div

document.getElementsByTagName("ion-content")[0].shadowRoot.childNodes[1].scrollToBottom(); //tried to access the inner-scroll div

Answer 1

why do you want JavaScript to scroll when ionic and angular have a better way to scroll. please check the stackblitz link I have done some code in it.

HTML

<ion-app>
  <ion-header>Demo Header</ion-header>
  <ion-content>
    <div class="large-content-div"></div>
    <p id="scrollMe">Scroll to find me</p>
  </ion-content>
  <ion-footer>Demo footer</ion-footer>
</ion-app>

TS File

export class AppComponent {
  name = 'Ionic 6 Angular ' + VERSION.major;

  constructor() {
    setTimeout(() => {
      this.scrollToBottom();
    }, 5000);
  }

  scrollToBottom(): void {
    try {
      document.querySelector('#scrollMe').scrollIntoView({
        behavior: 'smooth',
      });
    } catch (err) {}
  }
}

Here, I have given both the solution if you want to scroll to the bottom scrollToBottom() method or you want to scrollTo some division points scrollTo() method, use it as per the requirement.

This is the best way to call scroll Event in Ionic/Angular