How verify that page is scrolled up and how verify text is visible on screen in playwright?

Question

I need an assertion to check if a page has scrolled to the top and an assertion to check if an element is visible on screen. How to do it in playwright with TypeScript?

const isScrolledUp = await page.evaluate(() => {
        return window.pageYOffset === 0;
      });      
      expect(isScrolledUp).toBe(true);

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

Answer 1

You could scroll with the mouse to a very low "sure-to-scroll-to-the-top" y-value and then assure with toBeInViewport()

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

test('Test @00', async ({page}) => {
    
    // Scrolls to the top of the page
    await page.mouse.wheel(0, -100000000)
    const isScrolledUp = await page.evaluate(() => {
        return window.scrollY === 0;
    });
    expect(isScrolledUp).toBe(true);

    // toBeInViewport checks only the current view
    await expect(page.getByRole('heading', {name: 'Some name'})).toBeInViewport()
})