Scrolling with Puppeteer/Playwright not working for SAPUI5 app

Question

I am currently trying to run automation testing on a sample SAPUI5 application using Playwright(Similar to Puppeteer). I am trying to scroll to the bottom of the page. However, the function works on other websites except SAPUI5 applications.

My code is displayed below:

const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium']) {
    const browser = await playwright[browserType].launch({
        headless: false
    });
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto("https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/orderbrowser/webapp/test/mockServer.html?sap-ui-theme=sap_fiori_3");

    await page.setViewport({
        width: 1200,
        height: 500
    });

    await page.waitFor(5000);

    await page.waitForSelector("#__item0-__clone9-content");


    await scrollOnElement(page,"#__item0-__clone9-content",0,300);
  }
})();

async function scrollOnElement(page,selector,x,y) {
    await page.evaluate(([selector, x, y]) => {
      const element = document.querySelector(selector);
      console.log(element);
      element.scroll(x, y);
    }, [selector, x, y]);
}

Is this because SAP provides it's own scroll instead of utilising the browser window's scroll? If so, is there any way that I can disable it?

Answer 1

Element.scroll() somehow does also not work in the Chrome DevTools. Does Element.scrollIntoView() also work for your use case?

Then it would end up in something like this:

// @ts-check
const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext({
    viewport: {
      width: 1200,
      height: 500
    }
  });
  const page = await context.newPage();
  await page.goto("https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/orderbrowser/webapp/test/mockServer.html?sap-ui-theme=sap_fiori_3#");

  await page.waitForSelector("#__item0-__clone9-content");

  await scrollOnElement(page, "#__item0-__clone9-content");
  await page.screenshot({ path: "screenshot.png" })
})();

async function scrollOnElement(page, selector) {
  await page.$eval(selector, (element) => {
    element.scrollIntoView();
  });
}

Interactive: https://try.playwright.tech/?s=jp8ng