The Issue
With the help of automation, we can locate elements on a web page and perform various actions on a particular element of a webpage. There are different kinds of elements on a web page such as images and text. Some are smaller in dimensions, while others are larger and more noticeable. Identifying and automating such elements can pose a significant challenge.
Is there a way to increase or decrease the size of the page to best observe these elements?
The Answer
Selenium offers a very useful feature to zoom in & zoom out of a web page. Each browser has a transform CSS property that helps change the elements to rotate, move, scale, etc. Using this particular CSS property, the user can perform zoom in and zoom out operations on the web page.
The Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
# Example for Zoom In and Zoom Out require 'selenium-webdriver' Selenium::WebDriver::Chrome.driver_path="CHROME-DRIVER-PATH" @driver = Selenium::WebDriver.for :chrome # Opening 3Qi Labs website @driver.get 'https://3qilabs.com/' sleep 5 #Web page is Zoomed In @driver.execute_script "document.body.style['-webkit-transform'] = \"scale(2.0)\";" sleep 5 puts "Page Zoomed In" #Web Page is Zoomed Out @driver.execute_script "document.body.style['-webkit-transform'] = \"scale(1.0)\";" sleep 5 puts "Page Zoomed Out" |
The Result
Using the above code does the following
- Opens “3Qi Labs website”
- Zooms in the web page by 200%
- Zooms out the page to normal by 100%
The Takeaway
Performing zoom in and zoom out actions can easily be done using the CSS Transform property and Selenium. Zoning in on particular elements of a webpage while running automation scripts can be a huge asset, especially as no two webpages will have the exact same elements in size, images, or fonts.