Scroll in Playwright Python

With the latest automation tools most of the time we do not have to scroll the element to the viewing screen to perform operations on it, the tools themselves will stroll according to the element.

But there are cases where you internationally have to scroll. So in such cases, we have to either depend on the automation tool provided methods or Javascript methods. I hope you have gone through this Javascript executor to have a bit of basic knowledge of how the developer console works on a browser.

Playwright method for scrolling:

Let’s use the function present in the Playwright Python tool to scroll elements onto the viewing screen. scroll_into_view_if_needed() function helps to bring the element onto the screen if the element is not on the screen.

Go to https://demo.testercoder.com/dropdowns.html and scroll down there is going to be a button like the one below. We will try to use the scroll_into_view_if_needed() to that button and get the text from the button.

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
resp = page.goto("https://demo.testercoder.com/dropdowns.html")


page.locator("#scroll-to-me").scroll_into_view_if_needed()
text_extracted = page.locator("#scroll-to-me").text_content()
print(text_extracted)

Now try to get the text without scrolling down to the element.

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
resp = page.goto("https://demo.testercoder.com/dropdowns.html")

text_extracted = page.locator("#scroll-to-me").text_content()
print(text_extracted)

# output 
Scroll to Me

From the output of both programs, you can understand that both ways give the same output with one difference. When we have used the scroll_into_view_if_needed(), the element came into view.

Using Javascript Executor:

If you notice in the above methods, we can bring the element into view but you cannot scroll the way you like, let’s say scroll 100 pixels down or 700 pixels down, like that.

If you want to scroll custom distance then you can use the scroll methods of Javascript. To execute this javascript we have to use the console from developer tools on the browser.

Let’s open the browser and navigate to https://demo.testercoder.com/dropdowns.html then right-click anywhere on the page and Choose Inspect > Console. If you are using the console for the first time might ask you to type “allow-pasting” to enable pasting here.

When we write javascript, we need to understand what is a window and what is a document. The browser is called window and the website displayed on the browser is a document, The URL, title, and document are part of the window. The document only is website.

Now back to scrolling, we can scroll the window but not the document. The scroll bar is part of the window and not part of the document.

We can use the scroll method from the window object. and using which we can scroll by providing x, and y values, which denote how we want to scroll. For example, if we provide only Y then the window will be scrolled vertically, If we provide only X then the window will be horizontally scrolled (if the horizontal scroll is available).

If you notice in the below example, I have formed a javascript window.scroll(0, 100) that scrolls 100px vertically from the top. If I provide 0px, then it takes us to the top.

#scroll method
# window.scroll(0, 100)

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
resp = page.goto("https://demo.testercoder.com/dropdowns.html")

page.evaluate("window.scrollBy(0, 100)")
text_extracted = page.locator("#scroll-to-me").text_content()
print(text_extracted)

But if you notice I executed the same code twice but it does not change its position because it is an absolute position which means, it scroll 100px from the top even if it is scrolled 100px already. So we have to consider absolute value while giving input.

Relative scrolling:

Now if you want to scroll relatively, then you can use a method callscrollBy, which will assume our current location as 0,0 and it will scroll the webpage by given pixels.

# window.scrollBy(0, 100)
# negative values to scroll up
# window.scrollBy(0, -100)

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
resp = page.goto("https://demo.testercoder.com/dropdowns.html")

page.evaluate("window.scrollBy(0, 100)")
text_extracted = page.locator("#scroll-to-me").text_content()
print(text_extracted)

Scroll to the exact location:

We can also scroll to an exact location on the page, this will be useful if you want to verify if an element is present at a distance. We can use the window.scrollTo(x, y) to scroll and to_be_in_viewport() assertion to see element is present at a distance.

Now I have located a button at a distance of 1800 pixels, let’s scroll to it

#window.scrollTo(0, 1800) scroll method


from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
resp = page.goto("https://demo.testercoder.com/dropdowns.html")

page.evaluate("window.scrollTo(0, 1800)")
text_extracted = page.locator("#scroll-to-me").text_content()
print(text_extracted)

So far we have learned to scroll, now we can get the value of how much scroll is present between your current point and the top. You can use window.scrollY, get the vertical distance and window.scrollX to get the horizontal scroll.

window.scrollY
window.scrollX