How to Zoom in and Out the webpage content

Test TestComplete
, , , , , ,
1

Originally posted by tvklovesu on January 19, 2023

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

2

Originally posted by rraghvani on January 20, 2023

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)'");
}
3

Originally posted by tvklovesu on January 20, 2023

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.

tvklovesu_0-1674229649784.png
tvklovesu_0-1674229649784.png400×137 512 Bytes

4

Originally posted by rraghvani on January 20, 2023

Here’s a small video clip of it work.

5

Originally posted by tvklovesu on January 20, 2023

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?

6

Originally posted by rraghvani on January 23, 2023

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.

7

Originally posted by tvklovesu on January 23, 2023

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

8

Originally posted by rraghvani on January 23, 2023

See Using CSS transform: translate(…) with ReactJS. You might be able to change it, if you have access to the property. Ask your developers if it’s possible to change the value.