Forum Discussion

tvklovesu's avatar
tvklovesu
Frequent Contributor
2 years ago

How to Zoom in and Out the webpage content

Hello,

I have the following code to set my browser capabilities. I would like to add Zoom in to set the browser to 100%. The reason I ask is when I run in my local some objects are working fine, but in my selenium grid the page zoom is set to 60% or so. And my tests are failing. I am think that could be because of this zoom setting.

 

var capabilities = {
"browserName": "chrome",
"goog:chromeOptions": {
"args": [
"--headless",
"--window-size=1920,1080",
"--disable-gpu",
"--disable-dev-shm-usage",
"--no-sandbox"
]
}

}

Browsers.RemoteItem(server, capabilities).Run(url);

 

And want to use this following code or something similar, but not sure how to use it.

var scaleX = "1";
var scaleY = "1";
var js = document.body.style.transform='scale(scaleX, scaleY)';

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript(js);

 

Thanks

Keyword Tests
Script Extensions
Script Tests
web testing
    • tvklovesu's avatar
      tvklovesu
      Frequent Contributor
      2 years ago

      Thanks for your reference. For some reason it's not working on my application. I tried on another site and it did worked as you mentioned. Is the document.style wrong that I am using. How do I find which style will change the screen size?

  • rraghvani's avatar
    rraghvani
    Champion Level 3
    2 years ago

    The following code will adjust the page size,

    function pagesize()
{
    var page = Sys.Browser("chrome").Page("*");
    var scope = page.contentDocument.Script.eval("document.body.style.transform='scale(0.8, 0.8)'");
}

     

     

    • tvklovesu's avatar
      tvklovesu
      Frequent Contributor
      2 years ago

      It's not working for me. When that script ran, only the top banner of the page is displayed with zoomed in and the remaining part of the page content got blanked out like this, even if I do refresh then it goes back to its original zoom level. 

       

       

  • rraghvani's avatar
    rraghvani
    Champion Level 3
    2 years ago

    You need to find out what your web application is built in. The style object document.body.style.transform works fine for HTML Style Objects.

    • tvklovesu's avatar
      tvklovesu
      Frequent Contributor
      2 years ago

      My app is developed in React Js and not sure if that document script does not support the react js app.