How to Test Scroll Behavior When Scrollbar Doesn't Exist with Playwright?

Question

I'm currently working on automated tests with the page object using Playwright, and I have a function scrollDownAndUpOnboarding that's designed to scroll down and then up on a web page. However, I've noticed that this function appears to scroll down even when a scrollbar doesn't exist on the page.

Here's my function for reference:

  async scrollDownAndUpOnboarding() {
    const initialScrollY = await this.page.evaluate(() => {
      return window.scrollY;
    });
    await this.page.evaluate(() => {
      window.scrollTo(15, document.body.scrollHeight);
    });
    await this.page.waitForTimeout(1000); 
    const isVisibleAfterScrollDown = await this.membershipLabel.isVisible();
    if (isVisibleAfterScrollDown) {
      console.log('Membership label is visible after scrolling down.');
    } else {
      console.log('Membership label is not visible after scrolling down.');
    }
    await this.page.evaluate(() => {
      window.scrollTo(0, 40);
    });
    await this.page.waitForTimeout(1000); 
  }

I've added assertions within the function, but they pass even when there's no scrollbar present on the page. My goal is to evaluate whether the scrolling actually occurs when there's no scrollbar.

I call this function within a Page Object and then use it in my test script, but it doesn't seem to detect the absence of a scrollbar. How can I modify my code or approach to test this scenario effectively?

Any insights or suggestions would be greatly appreciated.

Environment Details:

Playwright version: 1.37 with javascript Operating system: Windows 11

What I Tried: Implemented scroll function in Playwright.

Expected Outcome: Scroll only if scrollbar present. Issue: Scrolls without scrollbar.

Answer 1

window.scrollTo(0, 40); will scroll the content if the scrollbar is hidden or not. The only thing that prevents it from scrolling is the content being shorter than the window height. Hiding the scrollbar is purely for aesthetics.

Here's an example to prove it https://jsfiddle.net/moefinley/p9j4ab36/17/

As an aside, you shouldn't be using toBeVisible() to test if the element is visible within the browser window. You should be using toBeInViewport(). toBeVisible() just checks the element exists in the DOM and is not display: none or similar. It doesn't check the elements position relative to the viewport.

https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-in-viewport