With the help of automation, we can locate elements on a web page, perform various actions on a particular element of a webpage. There are different kinds of elements on a web page such as images, text, some of them smaller in dimensions while others can be 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, let’s find out?
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.
# Example for Zoom In and Zoom Out
@driver = Selenium::WebDriver.for :chrome
# Opening 3Qi Labs website
#Web page is Zoomed In
@driver.execute_script "document.body.style['-webkit-transform'] = \"scale(2.0)\";"
#Web Page is Zoomed Out
@driver.execute_script "document.body.style['-webkit-transform'] = \"scale(1.0)\";"
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%
Performing actions such as Zoom in and Zoom out could be easily done using the CSS Transform property and Selenium. The benefit, in particular, would be to zone in on particular elements of a webpage while running automation scripts can be a huge asset especially as no two webpages will have similar elements in size, images, fonts, etc.,