# Zooming out a website

**URL:** <https://forum.robotframework.org/t/zooming-out-a-website/7285>\
**Category:** SeleniumLibrary\
**Created:** [13 May 2024 10:35 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285 "2024-05-13T10:35:31Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohdl99](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/mohdl99/32/3863_2.png) [@mohdl99](https://forum.robotframework.org/u/mohdl99)\
**Post date:** [13 May 2024 10:35 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/1 "2024-05-13T10:35:31Z")

</div>

Hi,

I’m working on automating some tests for a website, only issue is these tests run on remote machines that have a low and different display resolutions and ends up with a different perspective for the website that is zoomed in, and when this happens some elements are hidden and thus the tests fail, so I have been trying to find a way to zoom out the browser like clicking ctrl± on chrome  
I tried to use **Press Keys None CTRL+SUBTRACT** but it didn’t work out I tried to use  
execute **javascript document.body.style.zoom='80%** but still it cause some other issues related to moving elements from their places, does any one have any idea how to zoom out?

---

<div class="post-metadata">

**Author:** ![damies13](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/damies13/32/623_2.png) [@damies13](https://forum.robotframework.org/u/damies13)\
**Post date:** [13 May 2024 11:03 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/2 "2024-05-13T11:03:37Z")

</div>

Hi Mohamed,

Zooming out can be achieved with [Press Keys](https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html#Press%20Keys) (CTRL and -) but this is not really a recommended approach.

A better option is don’t use [Maximize Browser Window](https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html#Maximize%20Browser%20Window), but instead use [Set Window Size](https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html#Set%20Window%20Size) to set the browser window to a consistent size e.g. 1920x1080. I’m pretty sure you can make the window bigger than the resolution of the machine running the test.

Also use [Scroll Element Into View](https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html#Scroll%20Element%20Into%20View) before clicking on an element will also often help.

Dave.

---

<div class="post-metadata">

**Author:** ![rasjani](https://avatars.discourse-cdn.com/v4/letter/r/858c86/32.png) [@rasjani](https://forum.robotframework.org/u/rasjani)\
**Post date:** [13 May 2024 12:08 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/3 "2024-05-13T12:08:22Z")

</div>

> [@damies13](#):
>
> Also use [Scroll Element Into View](https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html#Scroll%20Element%20Into%20View) before clicking on an element will also often help.

Not to discourage OP but that particular keyword has never worked for my use cases when i had to use that. I did some js based alternative for that once because of that issue but even than, it didnt take horizontal scrolling into account.

---

<div class="post-metadata">

**Author:** ![damies13](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/damies13/32/623_2.png) [@damies13](https://forum.robotframework.org/u/damies13)\
**Post date:** [13 May 2024 12:11 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/4 "2024-05-13T12:11:50Z")

</div>

It’s helped me many times, though I’ll admit always on vertical scrolling, I’ve never needed horizontal scrolling.

Dave.

---

<div class="post-metadata">

**Author:** ![rasjani](https://avatars.discourse-cdn.com/v4/letter/r/858c86/32.png) [@rasjani](https://forum.robotframework.org/u/rasjani)\
**Post date:** [13 May 2024 12:21 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/5 "2024-05-13T12:21:15Z")

</div>

At least one of the “issues” i had with scroll element to view was that it just brings the element into viewport but if the page has a toast/static footer that has higher Z order than anything else, interactions where still failing because that toast was still on top of my element i was trying to scroll into view.

Another “possible” issue was that even without a toast, scrolling the viewport ended if even 1 pixel row of the element was already in the viewport. But about this one I’m not sure if this was the real case or did i try to debug it.

But then again, my memory is faint on these matters as it has been long time since i actually wrote anything with selenium.

---

<div class="post-metadata">

**Author:** ![falcon030](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/falcon030/32/3420_2.png) [@falcon030](https://forum.robotframework.org/u/falcon030)\
**Post date:** [13 May 2024 15:56 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/6 "2024-05-13T15:56:27Z")

</div>

What about running the tests headless and setting the window size of the browser?

---

<div class="post-metadata">

**Author:** ![CharlieScene](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/charliescene/32/3484_2.png) [@CharlieScene](https://forum.robotframework.org/u/CharlieScene)\
**Post date:** [13 May 2024 19:24 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/7 "2024-05-13T19:24:47Z")

</div>

Hi,

Totally agree with this, the one pixel appearance is quite frustrating sometimes.  
And the nice added footer by dev team too 😬

An +/- offset parameter such as pixels would be great for this keyword.

Charlie

Edit : I see that Selenium Library uses Actions chains move\_to\_element function, but there’s an existing  
move\_to\_element\_with\_offset function too

---

<div class="post-metadata">

**Author:** ![mohdl99](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/mohdl99/32/3863_2.png) [@mohdl99](https://forum.robotframework.org/u/mohdl99)\
**Post date:** [17 May 2024 09:24 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/8 "2024-05-17T09:24:16Z")

</div>

Hi, Dave,

I tried to zoom out using [Press Keys](https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html#Press%20Keys) (CTRL and -) but it actually didn’t work.

I tried to use the set window size to set the size to 1920x1080 but the window was set up to 1040x720 and couldn’t go any higher than that.

Finally the scroll element into view key word is not gonna help as when zoomed in this website hide the elements and make them accessible via others ways like hovering or clicking some other button.

I had to readjust my test to take the view of the smaller resolutions into account.

Thanks for your help  
Mohamed

---

<div class="post-metadata">

**Author:** ![falcon030](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/falcon030/32/3420_2.png) [@falcon030](https://forum.robotframework.org/u/falcon030)\
**Post date:** [17 May 2024 15:11 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/9 "2024-05-17T15:11:06Z")

</div>

@mohdl99 Wouldn’t be easier to run your tests headless and set the browser size? This way you are not limited to screen resolution of the OS.

---

<div class="post-metadata">

**Author:** ![CharlieScene](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/charliescene/32/3484_2.png) [@CharlieScene](https://forum.robotframework.org/u/CharlieScene)\
**Post date:** [19 May 2024 08:55 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/10 "2024-05-19T08:55:31Z")

</div>

Hi,

Just tried this and this work at least on the wiki page :

```
***Test Cases***
Zoom Page Test
    Open Browser https://wikipedia.org chrome
    Maximize Browser Window
    Zoom Page 0.5
    Zoom Page 1.0
    Zoom Page 1.5
    Close Browser

***Keywords***

Zoom Page
    [Arguments] ${scale}    
    Execute Javascript document.body.style.transform = "scale(${scale})";
    Execute Javascript document.body.style.transformOrigin = "0 0";

```

It seems **document.body.style.zoom** does not work all the time.

Regards.  
Charlie

---

<div class="post-metadata">

**Author:** ![mohdl99](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/mohdl99/32/3863_2.png) [@mohdl99](https://forum.robotframework.org/u/mohdl99)\
**Post date:** [21 May 2024 20:36 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/11 "2024-05-21T20:36:42Z")

</div>

I have never tried headless mode before, are we able to take screenshots in headless mode?

---

<div class="post-metadata">

**Author:** ![falcon030](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/falcon030/32/3420_2.png) [@falcon030](https://forum.robotframework.org/u/falcon030)\
**Post date:** [21 May 2024 21:16 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/12 "2024-05-21T21:16:34Z")

</div>

Yes that will still work. The Selenium Library keywords behave no different in headless mode.  
I’ve used headless mode in the past, running scripts in Azure DevOps. The Windows VM of Azure DevOps only supports the 1024 \* 768 screen resolution by default, which is very annoying.

---

<div class="post-metadata">

**Author:** ![HelioGuilherme66](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/helioguilherme66/32/34_2.png) [@HelioGuilherme66](https://forum.robotframework.org/u/HelioGuilherme66)\
**Post date:** [21 May 2024 23:06 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/13 "2024-05-21T23:06:56Z")

</div>

Thanks @CharlieScene for your nice solution.  
Se below a more complete example (and showing the use of different language):

```python
Language: French

***Paramètres***
Bibliothèque SeleniumLibrary

***Unités de test***
Zoom Page Test
    Open Browser https://wikipedia.org headlessfirefox
    Maximize Browser Window
    Zoom Page 0.5
    Capture Page Screenshot ${OUTPUTDIR}/wikipedia_zoom_0_5.png
    Zoom Page 1.0
    Capture Page Screenshot ${OUTPUTDIR}/wikipedia_zoom_1_0.png
    Zoom Page 1.5
    Capture Page Screenshot ${OUTPUTDIR}/wikipedia_zoom_1_5.png
    Close Browser

***Mots-clés***
Zoom Page
    [Arguments] ${scale}
    Execute Javascript document.body.style.transform = "scale(${scale})";
    Execute Javascript document.body.style.transformOrigin = "0 0";

```

---

<div class="post-metadata">

**Author:** ![mohdl99](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/mohdl99/32/3863_2.png) [@mohdl99](https://forum.robotframework.org/u/mohdl99)\
**Post date:** [22 May 2024 17:28 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/14 "2024-05-22T17:28:58Z")

</div>

@CharlieScene Thanks Charlie.  
It seems the zooming method you provided works smoothly.

@falcon030 Thanks Lukas.  
Unlike normal mode, in headless mode one can indeed set the window size bigger than the machine resolution.

---

<div class="post-metadata">

**Author:** ![CharlieScene](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/charliescene/32/3484_2.png) [@CharlieScene](https://forum.robotframework.org/u/CharlieScene)\
**Post date:** [17 September 2025 13:21 UTC](https://forum.robotframework.org/t/zooming-out-a-website/7285/15 "2025-09-17T13:21:23Z")

</div>

Hi,

Found out today that my method above doesn’t work anymore (in my case / Browser / website).  
I switched to this finally :

```python
Zoom Page 
    [Arguments] ${scale}
    Execute Javascript document.body.style.zoom = "${scale}%";

```

Scale is a value like 80 or 100 %

Regards.

Charlie