如何在Playwright(TypeScript)中验证页面滚至顶部及元素可见

一、验证页面已滚动至顶部 #

通过page.evaluate()获取浏览器的滚动偏移量，断言其为0即可确认页面处于顶部位置：

// 检查页面是否滚动到顶部
const isAtTop = await page.evaluate(() => {
  // 优先使用document.scrollingElement.scrollTop，兼容性更好
  return document.scrollingElement?.scrollTop === 0 || window.pageYOffset === 0;
});
expect(isAtTop).toBe(true);

二、验证元素在屏幕上可见 #

注意**toBeFocused()是验证元素是否获得焦点，并非可见性**，Playwright提供了更贴合需求的内置断言：

方法1：验证元素本身可见（不强制要求在视口内） #

const targetHeading = page.getByRole('heading', { name: 'Some Name' });
await expect(targetHeading).toBeVisible();

方法2：验证元素在当前视口内可见（完全匹配“在屏幕上可见”的需求） #

const targetHeading = page.getByRole('heading', { name: 'Some Name' });
await expect(targetHeading).toBeInViewport();
// 可选：指定可见比例，比如要求元素至少50%在视口内
await expect(targetHeading).toBeInViewport({ ratio: 0.5 });

完整示例 #

import { test, expect } from '@playwright/test';

test('验证页面滚动至顶部且元素可见', async ({ page }) => {
  await page.goto('你的目标页面URL');

  // 验证页面滚动到顶部
  const isAtTop = await page.evaluate(() => {
    return document.scrollingElement?.scrollTop === 0;
  });
  expect(isAtTop).toBe(true);

  // 验证目标元素在视口内可见
  const targetHeading = page.getByRole('heading', { name: 'Some Name' });
  await expect(targetHeading).toBeInViewport();
});

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