Set Zoom Level to 100% in Selenium Webdriver When Default Is Not 100

Selenium WebDriver zoom in/out page content

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.

ChromeDriver support for clicking when zoom is not 100%

This is a known issue and is tracked in the chromedriver bug tracker.

How to handle IE browser with Zoom other than 100%?

As per the Required Configuration for InternetExplorerDriver:

The browser zoom level must be set to 100% so that the native mouse events can be set to the correct coordinates.

Additionally,

For Windows 10, you also need to set "Change the size of text, apps, and other items" to 100% in display settings.

So while using InternetExplorerDriver and InternetExplorer you need to configure the following:

cap.setCapability("ignoreZoomSetting", true);
cap.setCapability("requireWindowFocus", false);
cap.setCapability("nativeEvents", false);

You can find a couple of relevant discussions in:

• How to ignore zoom setting
• Selenium InternetExplorerDriver doesn't get focus on the window

So setting these capabilities are part of best practices and incase with these configurations the browser initialization is having issue that needs detailed analysis.

---

However, at this point it's worth to mention that:

On IE 7 or higher on Windows Vista or Windows 7, you must set the Protected Mode settings for each zone to be the same value. The value can be on or off, as long as it is the same for every zone. To set the Protected Mode settings, choose "Internet Options..." from the Tools menu, and click on the Security tab. For each zone, there will be a check box at the bottom of the tab labeled "Enable Protected Mode".

You can find a couple of relevant discussions in:

• Internet Explorer Protective mode setting and Zoom levels

---

tl;dr

A couple of related discussions:

• Internet Explorer 11 getting stuck randomly while executing tests through IEDriverServer and Selenium
• How does the registry entry HKEY_LOCAL_MACHINE\…\FEATURE_BFCACHE for InternetExplorerDriver solves the Internet Explorer 11 issue?

How can we set zoom level in selenium/protractor i.e zoom to 90%

For Selenium:

((JavascriptExecutor)driver).executeScript("document.body.style.zoom='90%';");

For Protractor:

browser.executeScript("document.body.style.zoom='90%';");

Test zoom levels of page on browsers in selenium webdriver

I have tested third way in chrome and IE browser, it was working fine.

    driver = new ChromeDriver();
    driver.manage().window().maximize();
    driver.get("http://store.demoqa.com/");
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("document.body.style.zoom='200%'");

zoom is not implemented in Firefox.

The "replacement" is transform from CSS3: https://developer.mozilla.org/En/transform

Below is the code for firefox browser:

    WebDriver driver;    
    driver = new FirefoxDriver();
    driver.manage().window().maximize();
    driver.get("http://store.demoqa.com/");
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("document.body.style.MozTransform = 'scale(2)';");

Reference: object.Style.Zoom property not working in Firefox

Let me know if you have any queries

How to click on element which is not visible on UI when zoom level is 100%?

For test automation if we have to deal with remote machines(e.g. in case of Sauce labs) it is always beneficial to take screen resolution seriously.

In today's world of responsive websites where we need to change browser window size quite often this requirement is becoming more effective.

In sauce labs we change resolution of client machine programatically using following

capabilities.setCapability("screenResolution", "1920x1080");

For different setup, we might need to follow steps as mentioned in comments by @ShoaibAkhtar above.

Zoom out of website when using RSelenium without changing page size/resolution

I don't think the problem is with sending the keys to the browser, since as noted in the linked posts, it is possible to send control + a to the browser window to select elements. It seems rather that the keys are not being recognised as commands to the browser application.

There are other ways round this problem however.

As @Muzzamil suggests, you can get a similar effect with changing the css of the document body using Chrome, though this doesn't work in Firefox.

If you want to natively change the browser zoom in a way that persists throughout the session, I can demonstrate solutions using Firefox and Chrome, since in both cases one can navigate to the html-based options page and interact with it to set the browser zoom level.

Here's how you do it with Firefox:

library(RSelenium)

zoom_firefox <- function(client, percent)
{
  store_page <- client$getCurrentUrl()[[1]]
  client$navigate("about:preferences")
  webElem <- client$findElement("css", "#defaultZoom")
  webElem$clickElement()
  webElem$sendKeysToElement(list(as.character(percent)))
  webElem$sendKeysToElement(list(key = "return"))
  client$navigate(store_page)
}

This allows the following:

driver <- rsDriver(browser = "firefox")
client <- driver$client
client$navigate("https://www.google.com")
client$screenshot(display = TRUE)

We can see the default zoom is set (100%):

Now we zoom out to 50% like this:

zoom_firefox(client, 50)
client$screenshot(display = TRUE)

And zoom back in like this:

zoom_firefox(client, 100)
client$screenshot(display = TRUE)

It's harder with Chrome because its options page uses a complex, nested shadow DOM. Since we can't get an xpath or css selectors to navigate a shadow dom, we need to extract the element's webdriver id using javascript and then force this Id onto another web element which we can then control.

zoom_chrome <- function(client, percent)
{
  store_page <- client$getCurrentUrl()[[1]]
  client$navigate("chrome://settings/")
  webElemId <- client$executeScript(paste0("return document.querySelector",
                                           "(\"body > settings-ui\").",
                                           "shadowRoot.querySelector(\"#main\")",
                                           ".shadowRoot.querySelector",
                                           "(\"settings-basic-page\")",
                                           ".shadowRoot.querySelector",
                                           "(\"#basicPage > ",
                                           "settings-section:nth-child(8)",
                                           "> settings-appearance-page\")",
                                           ".shadowRoot.querySelector",
                                           "(\"#zoomLevel\");"),
                                    args = list("dummy"))
  webElem <- client$findElement("css", "html")
  webElem@.xData$elementId <- as.character(webElemId)
  webElem$clickElement()
  webElem$sendKeysToElement(list("3"))
  zooms <- c(25, 33, 50, 67, 75, 8:11 * 10, 125, 150, 175, 200, 250, 3:5 * 100)
  desired_zoom <- which.min(abs(percent - zooms))
  current_zoom <- which(zooms == 300)
  n_keys <- desired_zoom - current_zoom
  if(n_keys > 0) 
    for(i in seq(n_keys)) 
      webElem$sendKeysToElement(list(key = "down_arrow"))
  if(n_keys < 0) 
    for(i in seq(abs(n_keys))) 
      webElem$sendKeysToElement(list(key = "up_arrow")) 
  webElem$sendKeysToElement(list(as.character(percent)))
  webElem$sendKeysToElement(list(key = "return"))
  client$navigate(store_page)
}

But it works in the same way:

driver <- rsDriver(browser = "chrome", chromever = "80.0.3987.106")
client <- driver$client
client$navigate("https://www.google.com")
client$screenshot(display = TRUE)
zoom_chrome(client, 50)
client$screenshot(display = TRUE)
zoom_chrome(client, 100)
client$screenshot(display = TRUE)

Which gives exactly the same results as firefox.

Of course, you could easily write a simple wrapper function that selects which "zoom" function to call based on the current browser.

I have not looked into implementing this in internet explorer or phantomjs since they do not have html-based options pages.

---

Related Topics