How to scroll inside a web element using Playwright Python

Question

I have a web page with several components and one of its components is a panel (with a scroll bar) consists of 20 options in total, as given below:

Panel

When the web page loads, only first 7 options are visible, but I need to check the check box of 15th option. So I might need to scroll inside that panel.

Below can be considered as a sample code replicates the similar scenario:

url = "https://www.htmlelements.com/demos/dropdownlist/checkboxes/"
locator_dropdown = "//span[@class='smart-token']"
locator_option = "//smart-list-item[@label='Galao']"
with sync_playwright() as p:
    browser = p.chromium.launch(headless=False) # 1.Launch the browser
    page = browser.new_page()               # 2. Load the web page
    page.goto(url)                          # 3. Go to given URL
    page.locator(locator_dropdown).click()  # 4. Click on dropdown
    page.locator(locator_option).check()    # 5. Check 15th option

The 'locator_option' in step #5 is the locator of checkbox of 15th option inside the dropdown. But it fails to locate the element, since only 10 options are visible when page loads and 15th option is not visible unless scroll inside the dropdown panel.

I would like to know if there is a method to check the checkbox of a particular option which is not visible unless we scroll inside the dropdown. One way is to click on the up and down arrow on the scroll bar to control the same. But it would be efficient if there is any other way to scroll to a specific element inside the a web element.

I really appreciate if someone can explain how to scroll inside a web element like this until a specific value/ element is visible, using playwright python.

Note: I am trying to scroll inside a web element, and not to scroll the webpage. The example given above is just a sample page with a dropdown list with checkboxes, because I could not get any other sample websites having a panel with list of options along with checkboxes for each option.

Please share a minimal reproducible example of the site and your code. Describing the problem in English without showing any code doesn't give enough information for anyone to help actually solve the problem. Thanks. — ggorlen
– ggorlen, Commented Aug 21, 2024 at 13:01
Thanks for the comment. I have added the sample code I am currently using. I hope it helps! — Divya Andrews
– Divya Andrews, Commented Aug 21, 2024 at 14:49
Thanks, but sample.com doesn't have scrolling and the code here doesn't make any attempt at scrolling--it's just a standard browser/page boilerplate. I need to have the actual code and actual site to be able to help. — ggorlen
– ggorlen, Commented Aug 21, 2024 at 15:14
Sorry for the miscommunication. 'sample.com' was just a dummy website I given in the code just to understand that I am navigating to an URL. I have added a sample website with almost similar web element, but actually I have to locate an element/ option inside a panel with a list and in the website I given above it is a dropdown list. I can not share the page under test due to confidential reasons! Thanks! — Divya Andrews
– Divya Andrews, Commented Aug 22, 2024 at 6:30
OK, thanks, but locator_option isn't defined. Please share your full code. — ggorlen
– ggorlen, Commented Aug 22, 2024 at 6:55

Trapli · Accepted Answer · 2024-08-29 10:30:50Z

1

The dropdown list you want to interact with is in an iframe. You need to switch to the iframe to access its child elements. Also since that smart-list-item does not have the role=checkbox you can't use .check()

working version:

from playwright.sync_api import sync_playwright

url = "https://www.htmlelements.com/demos/dropdownlist/checkboxes/"
locator_dropdown = 'xpath=//*[@smart-id="buttonsContainer"]'
locator_option = 'xpath=//smart-list-item[@label="Galao"]'
with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)  # 1.Launch the browser
    page = browser.new_page()  # 2. Load the web page
    page.goto(url)  # 3. Go to given URL
    frame = page.frame_locator('//iframe[@src="./index.htm"]')  # 4. Get the frame
    frame.locator(locator_dropdown).click()  # 5. Click on dropdown
    frame.locator(locator_option).click()  # 6. Check by name "Galao"

answered Aug 29, 2024 at 10:30

Trapli

1,6272 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vishal Aggarwal Over a year ago

Thanks , this a helpful answer.

Collectives™ on Stack Overflow

How to scroll inside a web element using Playwright Python

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related