[BUG] Webkit mouse wheel scrolling not working in headless mode

[ivy-lli]

Context:

• Playwright Version: 1.23
• Operating System: Linux
• Node.js version: 16.15.0
• Browser: WebKit
• Extra: headless

Code Snippet

I've created a small test for this:

test('webkit scroll headless', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    const getStartBtn = page.locator('.getStarted_Sjon');
    await expect(getStartBtn).toBeVisible();
    const bounds = await getStartBtn.boundingBox();
    await page.mouse.wheel(0, 100);
    const scrolledBounds = await getStartBtn.boundingBox();
    expect(bounds!.y).not.toEqual(scrolledBounds!.y);
});

with the config:

let config: PlaywrightTestConfig = {
  use: {
    // headless: false,
    browserName: 'webkit'
  }
};

Describe the bug

The mouse wheel scrolling seems to be defect in the webkit headless mode. If I run the above test with chromium or firefox it works in headful and headless mode. With webkit it only works in the headful mode.

[yury-s]

The test is actually flaky, it fails every second run for me on chromium macos with the error below. Do you have a standalone example where the scroll issue can be reproduced?

   Expected: not 322


       8 |   await page.mouse.wheel(0, 100);
       9 |   const scrolledBounds = await getStartBtn.boundingBox();
    > 10 |   expect(bounds!.y).not.toEqual(scrolledBounds!.y);```

[ivy-lli]

Hm... You're right.
The problem is that my page is a little bit complex. So I tried to reproduce it with a demo project.

It seems the the problem only happens if the event listener is attached to a svg element: https://github.com/ivy-lli/playwright-webkit-headless-wheel-bug/blob/master/src/test.html#L23-L27

If also add a test which checks that the scrolling only gets applied if the mouse is over the svg box: https://github.com/ivy-lli/playwright-webkit-headless-wheel-bug/blob/master/tests/example.spec.ts

If I run this tests, everything is working correctly, except with the headless webkit browser:

I hope this helps.

[aslushnikov]

Speculatively assigning to Yury so that it doesn't fall through the cracks!

[ivy-lli]

Thanks a lot for your work! Playwright is an awesome piece of software 🎉