In this blog, we are working on how to perform scrolling operations on browsers using different methods. 

As a pre-requisite we have to check whether the following dependencies or installed or not:

1. Project setup.
2. Run pip list in PyCharm terminal to check whether playwright is installed or not. 

As shown in the above picture playwright should be installed in the project. 

If the playwright is not installed refer to Web Automation Testing using Playwright.

What is Scrolling:

Scrolling is the action of sliding the text, images, or any other content to make it visible properly according to the screen resolution. It is known as scrolling. There are two types of scrolling such as horizontal and vertical scrolling.  

Different methods to achieve scrolling in Playwright:

(A) Vertical Scrolling:

• Using .scroll_into_view_if_needed() :

This method waits for a complete actionable check I.e an element should exist on the page, then tries to scroll an element into view, unless the element is completely visible. We can provide timeout as an optional parameter. The .scroll_into_view_if_needed() scroll to the locator of the element. 

• Using .mouse.wheel() :

This method acts like a mouse wheel, which dispatches a wheel event of the mouse. wheel() method is available in .mouse() method. It accepts 2 parameters as  

delta_x : float 
    Pixels to scroll horizontally. 
    delta_y : float 
        Pixels to scroll vertically. 

• Using .keyboard() :

We can perform scrolling using the keyboard and press() method 

(B) Horizontal Scrolling:

In playwright, we can achieve Horizontal scrolling by using only 1 method i.e. .scroll_into_view_if_needed(). This method waits for a complete actionable check I.e the element should exist on the page, then tries to scroll an element into view, unless the element is completely visible. We can provide timeout as an optional parameter. The .scroll_into_view_if_needed() scroll to the locator of an element. 

(a) Sync API Test Case:

(I) Test Case for Vertical Scrolling:

Step 1: – Launch the Browser. 

Step 2: – Navigate to https://the-internet.herokuapp.com/ 

Step 3: – Perform scrolling operation on an element using different methods. 

Step 4: – Close the Browser 

from playwright.sync_api import sync_playwright 
with sync_playwright() as page: 
    browser = page.chromium.launch(headless=False,slow_mo=1000) 
    page = browser.new_page() 
    page.goto("https://the-internet.herokuapp.com/") 
 
    #Using scroll_into_view_if_needed() 
    test = page.locator("text=Typos") 
    test.scroll_into_view_if_needed() 
 
    #Using wheel() 
    page.mouse.wheel(delta_x=0, delta_y=200) 
 
    # Using keyboard 
    page.keyboard.press("PageDown") 
    page.keyboard.press("PageUp") 
 
    page.wait_for_timeout(6000) 
    page.close() 
    browser.close() 

In the above code snippet,  

1. The statements from 3 to 5 are used to launch the browser. 
2. In the statement at line no. 10 and 11, we have used the scroll_into_view_if_needed() method. This method accepts 1 parameter, which is the locator. In the statement in line no. 10, we have stored a locator in the variable named as element and by using Dot (.) Operator, we are calling the .scroll_into_view_if_needed() method. This method scrolls till the element is visible which has passed in the locator. 
3. In the Statement in line no. 14, we are using the .wheel() method of mouse. In wheel() method we have to pass 2 parameters. X and Y Coordinates of Window. 
4. The statement in line no. 17 we are performing scrolling using .press() method of keyboard. The .press() method accepts the key name as a parameter. 

(II) Test Case for Horizontal Scrolling:

Step 1: – Launch the Browser. 

Step 2: – Navigate to https://the-internet.herokuapp.com/ 

Step 3: – Perform scrolling operation on an element using different methods. 

Step 4: – Close the Browser 

from playwright.sync_api import sync_playwright 
with sync_playwright() as page: 
    browser = page.chromium.launch(headless=False,slow_mo=1000) 
    page = browser.new_page() 
    page.goto("https://demo.guru99.com/test/guru99home/scrolling.html") 
    horizontal = page.locator("text=VBScript") 
    horizontal.scroll_into_view_if_needed() 
    page.wait_for_timeout(6000) 
    page.close() 
    browser.close() 

In the Statement in line no. 11 and 12, we have used the scroll_into_view_if_needed() method. This method accepts 1 parameter, which is the locator. In the statement in line no. 11, we have stored a locator in the variable named as horizontal and by using Dot (.) Operator, we are calling the .scroll_into_view_if_needed() method. This method scrolls till the element is visible which has passed in the locator.

(b) Async API Test Case:

(I) Test Case for Vertical Scrolling:

Step 1: – Launch the Browser. 

Step 2: – Navigate to https://the-internet.herokuapp.com/ 

Step 3: – Perform scrolling operation on an element using different methods. 

Step 4: – Close the Browser 

import asyncio 
from playwright.async_api import async_playwright 
async def vertical_scroll(): 
    async with async_playwright() as page: 
        browser = await page.chromium.launch(headless=False, slow_mo=1000) 
        page = await browser.new_page() 
        await page.goto("https://the-internet.herokuapp.com/") 
 
        #Using scroll_into_view_if_needed() 
        test = page.locator("text=Typos") 
        await test.scroll_into_view_if_needed() 
 
        #Using wheel() 
        await page.mouse.wheel(delta_x=0, delta_y=200) 
        await page.wait_for_timeout(6000) 
 
        #Using keyboard 
        await page.keyboard.press("PageDown") 
        await page.keyboard.press("PageUp") 
         
       await page.close() 
        await browser.close() 
 
asyncio.run(vertical_scroll()) 

As shown in the above code snippet,   

1. The statements from 5 to 7 are used to Launch the browser. 
2. The statement from 11 to 12 we have achieved the scrolling using the built-In method of the playwright i.e. .scroll_into_view_if_needed(). In this method first, we have identified the locator and stored in the variable named test, later on using the variable name we are calling the scroll method. 
3. In the statement in line no. 15, we have achieved scrolling using the mouse.wheel() method. In this method, we have to pass the delta_x and delta_y parameters. 
4. In the statements in line no. 19, we have achieved the scrolling using the keyboard.press() method. In this method we have to pass the keyboard key name, such as PageDown is used to perform a scroll-down operation.  
5. In the statements in line no. 20, we have achieved the scrolling using the keyboard.press() method. In this method we have to pass the keyboard key name, such as PageUp is used to perform a scroll-down operation. 
6. The statement from line no. 22 to 23 is used to close the page and browser. 

(II) Test Case for Horizontal Scrolling:

Step 1: – Launch the Browser. 

Step 2: – Navigate to https://the-internet.herokuapp.com/ 

Step 3: – Perform scrolling operation on an element using different methods. 

Step 4: – Close the Browser 

import asyncio 
from playwright.async_api import async_playwright 
async def vertical_scroll(): 
    async with async_playwright() as page: 
        browser = await page.chromium.launch(headless=False, slow_mo=1000) 
        page = await browser.new_page() 
 
        await page.goto("https://demo.guru99.com/test/guru99home/scrolling.html") 
        horizontal = page.locator("text=VBScript") 
        await horizontal.scroll_into_view_if_needed() 
        await page.wait_for_timeout(6000) 
 
        await page.close() 
        await browser.close() 
 
asyncio.run(vertical_scroll())

As shown in the above code snippet, 

1. The statements from 5 to 9 are used to Launch the browser. 
2. In the statement from lines no. 10 to 11, we have achieved the scrolling using the .scroll_into_view_if_needed() method. 
3. In this method first, we have identified the locator and stored it in the variable named horizontal, later on using the variable name we have called the .scroll_into_view_if_needed() method. 

Read the next Playwright blog Here.