Selenium WebDriver zoom in/out page content - selenium

Question

How to change page zoom level in Selenium WebDriver?
I tried:
driver.Keyboard().pressKey(Keys.Control);
driver.Keyboard().pressKey(Keys.Add);
But it doesn't work.

Answer 1

Beware that Selenium assumes the zoom level is at 100%! For example, IE will refuse to start (throws an Exception) when the zoom level is different, because the element locating depends on this and if you changed the zoom level, it would click on wrong elements, at wrong places.
Java
You can use the Keys.chord() method:
WebElement html = driver.findElement(By.tagName("html"));
html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
Use cautiously and when you're done, reset the zoom back to 100%:
html.sendKeys(Keys.chord(Keys.CONTROL, "0"));
C#
(since I realized C# bindings don't have the Keys.chord() method)
Or, you can use the Advanced User Interactions API like this (again, Java code, but it should work the same in C#):
WebElement html = driver.findElement(By.tagName("html"));
new Actions(driver)
.sendKeys(html, Keys.CONTROL, Keys.ADD, Keys.NULL)
.perform();
Again, don't forget to reset the zoom afterwards:
new Actions(driver)
.sendKeys(html, Keys.CONTROL, "0", Keys.NULL)
.perform();
Note that the naïve approach
html.sendKeys(Keys.CONTROL, Keys.ADD);
doesn't work, because the Ctrl key is released in this sendKeys() method. The WebElement's sendKeys() is different from the one in Actions. Because of this, the Keys.NULL used in my solution is required.

Answer 2

Here are two ways the zoom level can be altered with Java (one is for Chrome and the other is for Firefox):
Chrome
When using v̲e̲r̲s̲i̲o̲n̲ ̲3̲.̲3̲.̲1 of the Selenium Java Client Driver and C̲h̲r̲o̲m̲e̲D̲r̲i̲v̲e̲r̲ ̲2̲.̲2̲8, the following works (where the number in single quotes represents the zoom level to use; 1 = 100%, 1.5 = 150%, etc.):
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("document.body.style.zoom = '1.5'");
Firefox
The zoom level can be modified with the following:
1. The aforementioned Java Client Driver
2. G̲e̲c̲k̲o̲D̲r̲i̲v̲e̲r̲ ̲v̲0̲.̲1̲5̲.̲0
3. These classes:
java.awt.Robot
java.awt.event.KeyEvent
First of all, instantiate the Robot class:
Robot robot = new Robot();
This code causes the zoom level to decrease:
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_MINUS);
robot.keyRelease(KeyEvent.VK_CONTROL);
robot.keyRelease(KeyEvent.VK_MINUS);
This code causes the zoom level to increase:
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_EQUALS);
robot.keyRelease(KeyEvent.VK_CONTROL);
robot.keyRelease(KeyEvent.VK_EQUALS);

Answer 3

Python approach working for me, except you have to specify the zoom level:
driver.execute_script("document.body.style.zoom='zoom %'")
Have 'zoom%' = whatever zoom level you want. (e.g. '67%'). This works for Chromedriver, which doesn't seem to accept the send_keys commands.

Answer 4

Zoom in | Zoom out Feature on Windows
Zoom in
WebElement html = driver.findElement(By.tagName("html"));
html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
Zoom out
html.sendKeys(Keys.chord(Keys.CONTROL, Keys.SUBTRACT));
Zoom in | Zoom out Feature on MAC
Zoom in
WebElement html = driver.findElement(By.tagName("html"));
html.sendKeys(Keys.chord(Keys.COMMAND, Keys.ADD));
Zoom out
html.sendKeys(Keys.chord(Keys.COMMAND, Keys.SUBTRACT));

Answer 5

The most robust approach
Before you start with Internet Explorer and Selenium Webdriver Consider these two important rules.
The zoom level :Should be set to default (100%) and
The security zone settings : Should be same for all. The security settings should be set according to your organisation permissions.
How to set this?
Simply go to Internet explorer, do both the stuffs manually. Thats it. No secret.
Do it through your code.
Method 1:
//Move the following line into code format
DesiredCapabilities capabilities = DesiredCapabilities.internetExplorer();
capabilities.setCapability(InternetExplorerDriver.IGNORE_ZOOM_SETTING, true);
System.setProperty("webdriver.ie.driver","D:\\IEDriverServer_Win32_2.33.0\\IEDriverServer.exe");
WebDriver driver= new InternetExplorerDriver(capabilities);
driver.get(baseURl);
//Identify your elements and go ahead testing...
This will definetly not show any error and browser will open and also will navigate to the URL.
BUT This will not identify any element and hence you can not proceed.
Why? Because we have simly suppressed the error and asked IE to open and get that URL. However Selenium will identify elements only if the browser zoom is 100% ie. default. So the final code would be
Method 2 The robust and full proof way:
DesiredCapabilities capabilities = DesiredCapabilities.internetExplorer();
capabilities.setCapability(InternetExplorerDriver.IGNORE_ZOOM_SETTING, true);
System.setProperty("webdriver.ie.driver","D:\\IEDriverServer_Win32_2.33.0\\IEDriverServer.exe");
WebDriver driver= new InternetExplorerDriver(capabilities);
driver.get(baseURl);
driver.findElement(By.tagName("html")).sendKeys(Keys.chord(Keys.CONTROL,"0"));
//This is to set the zoom to default value
//Identify your elements and go ahead testing...
Hope this helps. Do let me know if further information is required.

Answer 6

Below snippet will set the browser zoom to 80%
String zoomJS;
JavascriptExecutor js = (JavascriptExecutor) driver;
zoomJS = "document.body.style.zoom='0.8'";
js.executeScript(zoomJS);

Answer 7

I know this is late, but in case if you don't want to use action class (or getting any errors, as I did) you can use pure JavaScript to do so.
Here is the code
((IJavaScriptExecutor) Browser.Driver).ExecuteScript("document.body.style.zoom = '70%';");

Answer 8

For Zoom In to 30%(or any other value you wish but in my case 30%) use
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("document.body.style.zoom = '30%';");

Answer 9

I am using Python 3.5.; I got the same problem as you. I thought you must use Chrome as browser.
I used PhantomJs to finally solve this problem:
from selenium.webdriver.common.keys import Keys
from selenium import webdriver
browser = webdriver.PhantomJS()
browser.get('http://www.*.com')
print(browser.title)
c=browser.find_element_by_tag_name("body")
c.send_keys(Keys.LEFT_CONTROL+Keys.Add)`

Answer 10

you may use "Keys.chord" method for Zoom out and Zoom in
Zoom OUT
WebElement zoomPage = driver.findElement(By.tagName("html"));
zoomPage.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD))
when you are done with your work and want to reset browser back to 100% then use below code
If you want to click on any element, so before click event you may reset you browser window to 100 % after you may click on it.
zoomPage.sendKeys(Keys.chord(Keys.CONTROL, "0"));
You may user Java script code as well for Zoom OUT
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("document.body.style.zoom = '110%'");

Answer 11

Changing the zoom level through javascript execution is OK but it only apply to the first page displayed. The succeeding pages will return to 100% zoom level.
The best solution I found so far is to set the Chrome Options' device scale factor.
ChromeOptions options = new ChromeOptions();
options.addArguments("force-device-scale-factor=0.75");
options.addArguments("high-dpi-support=0.75");
WebDriver driver = new ChromeDriver(options);

Answer 12

Seems that approach proposed for C# doesn't work anymore.
Approach for C# that works for me in WebDriver version 2.5 is:
public void ZoomIn()
{
new Actions(Driver)
.SendKeys(Keys.Control).SendKeys(Keys.Add)
.Perform();
}
public void ZoomOut()
{
new Actions(Driver)
.SendKeys(Keys.Control).SendKeys(Keys.Subtract)
.Perform();
}

Answer 13

Using Robot class worked for me:
for(int i=0; i<3; i++){
Robot robot = new Robot();
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_MINUS);
robot.keyRelease(KeyEvent.VK_CONTROL);
robot.keyRelease(KeyEvent.VK_MINUS);
}
this will zoom out 3 times.

Answer 14

11-17-2017 Update
var html = page.FindElement(By.XPath("/html"));
html.SendKeys(Keys.Control + "0" + Keys.Control);

Answer 15

You can use Selenium's driver to execute a script that will zoom in or out for you.
Firefox
await driver.executeScript('document.body.style.MozTransform = "scale(3)"');
await driver.executeScript(
'document.body.style.MozTransformOrigin = "top"'
);
This will result in zooming in by 300% and will scroll to top.
Chrome
await driver.executeScript('document.body.style.zoom = "300%"');