如何用Playwright测试无滚动条时的滚动行为？

一、添加滚动条检测逻辑 #

要避免无滚动条时执行滚动，需在函数开头先判断页面是否存在可滚动的垂直空间。通过对比文档总高度与视口高度，再结合元素overflow属性限制，即可准确判断是否存在垂直滚动条。

修改后的函数如下：

async scrollDownAndUpOnboarding() {
  // 检测是否存在垂直滚动条
  const hasVerticalScrollbar = await this.page.evaluate(() => {
    return document.documentElement.scrollHeight > document.documentElement.clientHeight &&
           getComputedStyle(document.body).overflowY !== 'hidden';
  });

  if (!hasVerticalScrollbar) {
    console.log('页面无垂直滚动条，跳过滚动操作');
    return;
  }

  // 原滚动逻辑仅在有滚动条时执行
  const initialScrollY = await this.page.evaluate(() => 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); 
}

二、验证无滚动条场景的测试方法 #

要确认无滚动条时函数是否正确跳过滚动，可从两个维度验证：

• 对比滚动前后的scrollY值，确认未发生滚动
• 检查函数是否触发了"跳过滚动"的逻辑（通过日志或自定义标记）

示例测试用例：

test('无滚动条时跳过滚动操作', async ({ page }) => {
  const onboardingPage = new OnboardingPage(page);
  await onboardingPage.navigateToNoScrollPage(); // 打开无滚动条的目标页面

  // 记录初始滚动位置
  const initialScrollY = await page.evaluate(() => window.scrollY);
  
  // 调用滚动函数
  await onboardingPage.scrollDownAndUpOnboarding();
  
  // 断言滚动位置未变化，说明未执行滚动操作
  const finalScrollY = await page.evaluate(() => window.scrollY);
  expect(finalScrollY).toBe(initialScrollY);
});

三、关于原断言失效的补充说明 #

之前仅通过membershipLabel.isVisible()做断言，无滚动条时该元素可能本来就处于可见状态，导致断言误判。建议调整断言逻辑：

• 有滚动条时：断言滚动后元素可见（或可见性发生预期变化）
• 无滚动条时：断言滚动操作未执行（如scrollY值无变化）

内容的提问来源于stack exchange，提问作者Andres Mitre