Zooming out a website

Libraries SeleniumLibrary
1

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?

2

Hi Mohamed,

Zooming out can be achieved with Press Keys (CTRL and -) but this is not really a recommended approach.

A better option is don’t use Maximize Browser Window, but instead use Set Window Size 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 before clicking on an element will also often help.

Dave.

3

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.

4

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

Dave.

5

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.

2 Likes
6

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

7

Hi,

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

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

8

Hi, Dave,

I tried to zoom out using Press Keys (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

1 Like
9

@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.

10

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

3 Likes
11

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

12

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.

1 Like
13

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

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";
1 Like
14

@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.

2 Likes