Using arrow keys on Chrome Selenium popup Python

Question

I'd like to use the scrollbar on the popups from the below page. If you click any product on the page it will open a popup where you can add extra items. I'm trying to use Keys.send_keys(Keys.ARROW_DOWN) to scroll down the popup but I can't find the scrollbar element in Chrome. I've tried moving to elements using other methods without success so would like to try with the arrow keys.

https://www.just-eat.co.uk/restaurants-mcdonalds-victorialondon/menu

I managed to use the arrow keys on the popups in FireFox but can't replicate in Chrome.

I've tried quite a bit, here https://stackoverflow.com/questions/69856165/clicking-an-element-doesnt-trigger-same-behaviour-as-manually-clicking-it/69864748#69864748 but have hit a dead end and therefore would like to try accessing the arrow keys — Callum, Dec 19 '21 at 14:44

codeslord · Accepted Answer · 2021-12-27T07:04:41.707

You can try to find an element inside the popup then use that element to scroll. The trick here is to make sure the element is focusable so that you can use that for scrolling using arrow keys. focusable elements are the ones that can receive keyboard events, the elements that has a focus function declared inside it. Since the w3c documentation http://www.w3.org/TR/DOM-Level-2-HTML/html.html is not updated for a long time, we don't have a list of focusable elements, but some of the focusable elements according to it are HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLIFrameElement, HTMLButtonElement, HTMLAnchorElement and any element with a tabindex.

Following is a sample code snippet for your reference.

from selenium.webdriver.common.keys import Keys

focusable_element_in_popup = driver.find_element_by_id('id_of_the_element')
focusable_element_in_popup.send_keys(Keys.ARROW_DOWN)

#or you can use //a magic using xpath to return you the any first link on popup, like below

#driver.find_element_by_xpath('//div[@class="some-class"]//a')

or you can also use move_to_element or scrollIntoView as below. If this doesn't work as expected try adding actions.click() after move_to_element to focus it.

from selenium.webdriver.common.action_chains import ActionChains

element = driver.find_element_by_id("my-id")

actions = ActionChains(driver)
actions.move_to_element(element).perform()

#actions.move_to_element(element)
#actions.click()
#actions.send_keys("SOME DATA")
#actions.perform()

#or 

driver.execute_script("arguments[0].scrollIntoView();", element)

Some trial and error might be required at first to get it right for your use case.

Thanks, I didn't realise I could use send_keys based on an element in the popup, I thought I had to locate the scrollbar. Action chains doesn't work for me, it always scrolls past the popup but manually scrolling arrow_down works. — Callum, Dec 29 '21 at 14:17

score 2 · Answer 2 · answered Dec 26 '21 at 23:25

I like using JavaScript to scroll down when using Selenium. It's a lot more reliable from my experience.

Try the following:

X = 500
DRIVER_NAME.execute_script("window.scrollBy(0, X)")

Another option is to circumvent the need to scroll in the first place by injecting CSS into the webpage. You can write several lines of CSS code that would make the popup's font and line-height very small; this way, you'll be able to fit everything into the screen without scrolling.

Here's how that would look like:

new_css = "body{background-color: white;}"
DRIVER_NAME.executeScript("$('<style type=\"text/css\">new_css</style>').appendTo('html > head');");

One of the two solutions above should solve your problem.

Thanks for the help. The first solution scrolls the window behind the popup, not the actual popup. I tried switching to alert but that raises an error that there's no alert (the popup isn't an alert). The second solution isn't one I've come across before, I am using python so I changed it to ```DRIVER_NAME.execute_script``` but got an error ```selenium.common.exceptions.JavascriptException: Message: javascript error: $ is not defined``` — Callum, Dec 29 '21 at 11:33

score 0 · Answer 3 · answered Dec 29 '21 at 01:44

I am not sure what have you tried already and what is failing, but since you mentioned the presence of a pop up window, you need to make sure that you are operating on the correct window (i.e. popup).

Please check here for more details : focus different window

Once you have verified that you are operating on the correct window, the replies above should do the trick. You may also find this link useful to scroll a webpage

Last but not least, it is always advisable to share a reproducible example of your code to help others help you ;) Best of luck

It looks like the popup isn't another window, I printed the window_handles when the popup is open and there's only one element in the result list, which I'm assuming is the main window? Unfortunately everything I've read talks about scrolling a webpage but not about scrolling a popup — Callum, Jan 08 '22 at 18:23

score 0 · Answer 4 · answered Jan 13 '22 at 07:44

0

You can use driver.switch_to.active_element to focus on the pop up and use Keys.ARROW_DOWN on it

driver.find_element_by_css_selector('[data-test-id="menu-item"]').click()  # open the popup
driver.find_element_by_class_name('c-modal-titleContainer').click()  # make the popup the active element
popup = driver.switch_to.active_element  # and switch to driver focus to it
for _ in range(10):
    popup.send_keys(Keys.ARROW_DOWN)

answered Jan 13 '22 at 07:44

Guy

46,488
10
44
88

Thanks, this scrolls down the popup. I am currently using it in a while loop where I try to click the element and if there's an error then I do ```popup.send_keys(Keys.ARROW_DOWN)```. However, when the popup scrolls the element into view the element still isn't clicked! I get an error telling me the "add to order" button would recieve the click instead of the element, it seems that this button is 'overlayed' on the screen in some way, even though pyhsically I can see the element is in view it's still not able to be clicked. Any ideas on how to make the element clickable as I scroll it in view? – Callum Jan 15 '22 at 13:10
@Callum I don't know what you are trying to click but you can always use JavaScript click `element = driver.find_element...` `driver.execute_script('arguments[0].click();', element)` – Guy Jan 16 '22 at 05:55
This is such a weird popup, this ```driver.execute_script('arguments[0].click();', element)``` selects the element but it doesn't click it in the same way ```element.click()``` does. It's hard to explain but the popup realised it's not been clicked 'properly', is it easier if I share screenshots of what's happening or you try to recreate? – Callum Jan 16 '22 at 11:34
@Callum What are you trying to click and what is the code you are using? – Guy Jan 16 '22 at 11:42

Using arrow keys on Chrome Selenium popup Python

4 Answers4