The Issue
When automating, there will be times when you have to scroll to a particular point on a page in order to locate an element and perform any desired operations on that element. There will be scenarios that require the cursor to be scrolled to perform user-defined operations, and other cases where the element is only visible if we scroll down to the desired location in a large webpage.
Scrolling to an exact location plays a vital role in capturing screenshots at the time of error/failure when the webpage has long, scrollable content.
The Answer
There are multiple ways to make the element visible by scrolling to its location. In order to implement the scroll operation, Selenium leverages JavaScriptExecutor.
The Code
Here’s a look at the scroll functions which we could use:
1. Scrolling to a location by pixel coordinates:
1 |
execute_script "window.scrollBy(x-pixels,y-pixels)" |
Let us understand this syntax with an example
1 2 3 4 5 6 7 8 9 |
require 'selenium-webdriver' Selenium::WebDriver::Chrome.driver_path="CHROME-DRIVER-PATH" @driver = Selenium::WebDriver.for :chrome @driver.get 'https://3qilabs.com/' sleep 5 @driver.execute_script "window.scrollBy(200,400)" sleep 5 @driver.save_screenshot "3qihomepage.png" |
In this example, we used wait (e.g. sleep 5) to have enough time to notice the page scrolling to the desired location and capture a screenshot (e.g. @driver.save_screenshot “3qihomepage.png”) at that location
2. Scrolling by the visibility of an element:
1 |
execute_script "arguments[0].scrollIntoView();", element |
An example illustrating the above syntax:
1 2 3 4 5 6 7 8 9 10 11 12 |
require 'selenium-webdriver' Selenium::WebDriver::Chrome.driver_path="CHROME-DRIVER-PATH" @driver = Selenium::WebDriver.for :chrome @driver.get 'https://3qilabs.com/' sleep 5 # Element to which we want to scroll the page element = @driver.find_element(xpath: "//h3[text()='Technologies']") @driver.execute_script "arguments[0].scrollIntoView();",element sleep 5 @driver.save_screenshot "3qihomepage.png" |
3. Scrolling to the top/bottom of the page:
1 2 3 4 5 |
# To scroll to the Bottom of the page execute_script "window.scrollTo(0, document.body.scrollHeight)" # To scroll to the Top of the page execute_script "window.scrollTo(0, -document.body.scrollHeight)" |
Above syntax is explained by the following example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
require 'selenium-webdriver' Selenium::WebDriver::Chrome.driver_path="CHROME-DRIVER-PATH" @driver = Selenium::WebDriver.for :chrome @driver.get 'https://3qilabs.com/' sleep 5 @driver.execute_script "window.scrollTo(0, document.body.scrollHeight)" sleep 5 @driver.save_screenshot "3qihomepage.png" sleep 5 @driver.execute_script "window.scrollTo(0, -document.body.scrollHeight)" sleep 5 @driver.save_screenshot "3qihomepage1.png" |
4. Scrolling horizontally on the page:
1 2 |
# To scroll to the Bottom of the page execute_script “window.scrollTo(document.body.scrollHeight,0)” |
Above syntax is explained by the following example:
1 2 3 4 5 6 7 8 9 10 11 |
require 'selenium-webdriver' require 'rspec/expectations' include RSpec::Matchers Selenium::WebDriver::Chrome.driver_path="CHROME-DRIVER-PATH" @driver = Selenium::WebDriver.for :chrome @driver.get 'https://3qilabs.com/' sleep 5 @driver.execute_script "window.scrollTo(2000,0)" sleep 5 @driver.save_screenshot "3qihomepage.png" |
The Result
When the above code is saved as a ruby (.rb) file, it performs the following actions:
- Opens the browser
- Navigates to “3Qi Labs website”
- According to your requirement, the page scrolls to the desired location
- Takes screenshot to make sure it is navigated to the desired view
The Takeaway
Though Selenium does not offer scrolling operations, an interface called JavaScriptExecutor can be used to perform the required actions. You can scroll to any point on a webpage, no matter how long the page is. These suggestions enable the user to better understand operations that can be performed on pages that are lengthy, the crux of many modern sites.