Playwright page.click scrolls too much

Question

Given I want to record the action being done the page, when clicking on an element Playwright scrolls the page until the element is on top of the page, even though before the action the element is visible in the viewport.

P.S. the option "scroll: false" does nothing

code snippet:

await Promise.all([
    global.page.waitForNavigation(),
    global.page.click(global.identifier, { scroll: false })
]);

L.E.: I want to add some more details about my issue using an example:

So, let's assume I want to do a click action on the "Answer your question" button, and page looks like this:

after the click is performed the page automatically scrolls, putting the button on top of the page, like this:

My expectation is, if the element is in viewpoint, just to perform the action, without scrolling or moving the viewpoint.

user_8835695 · Answer

I also faced this issue so I resolve this by doing scroll into the view function reference

await page.$eval(ele, (element) => {
    element.scrollIntoView();
});

So here's the full code

const playwright = require('playwright');
const moment = require('moment');
(async () => {
  const browser = await playwright.chromium.launch({
    headless: false,
    args: ['--disable-notifications']
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://stackoverflow.com/questions/68127885/playwright-page-click-scrolls-too-much');
  await page.waitForSelector('.js-accept-cookies')
  .then(() => page.click('.js-accept-cookies') );
  let ele = '#submit-button';
  await page.$eval(ele, (element) => {
      element.scrollIntoView();
  });
  await page.click(ele);
  let date = moment();
  await page.screenshot({ path: `example-scroll-${date}.png` });
  await browser.close();
})();

Attaching screenshot for reference:

Playwright page.click scrolls too much

1 Answers