javascriptplaywright

Check if can scroll to end of page


I have several div boxes on a page. I want to check to see if I can scroll to the end of the page. There was a bug yesterday on the website where the user couldn't scroll to the end of the page. How can I check this using playwright?


Solution

  • This is how I would test it. Scroll to the end of the page. Check if the scroll height matches the scroll position combined with the viewport height. If they match it's the end of the page. If it does not match it could be some CSS issues like overflowing content. Here is my code please let me know if it helps you:

    const { test, expect } = require('@playwright/test');
    
    test('Check if the page can scroll to the end', async ({ page }) => {
        await page.goto('https://yourwebsite.com'); // Visit your website
        await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight)); // scroll to bottom
        await page.waitForTimeout(500);   // Wait for any lazy-loaded content to load 
        // if not lazy loaded content you can remove above line
    
        // Calculate if user scrolled to end of page
        const isAtEndOfPage = await page.evaluate(() => {
            const scrollableHeight = document.documentElement.scrollHeight;
            const currentScrollPosition = window.innerHeight + window.scrollY;
            return currentScrollPosition >= scrollableHeight;
        });
    
        // Check if the page scrolls to the end
        expect(isAtEndOfPage).toBe(true);
    });