How to set default browser window size in Protractor/WebdriverJS

Question

For some reason when I run my tests at work the browser is maximized, but when I run them at home it only opens a browser window of about 50% width. This causes some discrepancies with scrolling down, etc., so I'd ideally like to have it open a browser window of the same size on every machine the tests are run on. What's the best way to do this?

(I've found some answers for other languages, but I haven't been able to adapt them to JavaScript)

Adding

browser.executeScript('window.moveTo(0,0);' +
    'window.resizeTo(screen.width, screen.height);');

does nothing (apparently window.moveTo and window.resizeTo are not supported by Google Chrome).

I don't have an answer for you at this time, but I can tell you that `window.moveTo` and `window.scrollTo` are definitely supported by Chrome. — Colin Brock, Nov 16 '13 at 21:28
scrollTo works. But the others don't, at least not from what I can tell. Try typing it in the console...does nothing. — jraede, Nov 16 '13 at 21:29
At the risk of getting off-topic, [here is a fiddle](http://jsfiddle.net/z3wfk/) that illustrates `window.moveTo` and `window.resizeTo`. It works fine for me in Chrome. I don't know that you can resize the current window from the console in Chrome, but the fact that the `resizeTo` method is available there indicates Chrome supports it. — Colin Brock, Nov 16 '13 at 21:44
Ok, seems to be working for new windows that the browser opens with JS. But does not work with the current window, which is what I need. — jraede, Nov 16 '13 at 22:20
I don't have an answer either, but I would certainly question whether you're doing things right if your test is dependent on screen size or whether the browser is maximised - perhaps it makes sense to refactor your test to not have that dependency? — PaulL, Nov 18 '13 at 00:25
My test is for whether or not things work and are visible in different responsive configurations, so I need to be able to control the window size for each test. — jraede, Nov 18 '13 at 19:01
start chrome browser with option --window-size=360,640 can help — Vitall, Dec 16 '14 at 11:49
The docs for configuring Protractor https://sites.google.com/a/chromium.org/chromedriver/capabilities suggest `capabilities.chromeOptions.args: "start-maximized"` in the config file (see also http://peter.sh/experiments/chromium-command-line-switches/ ) — Lee Goddard, Feb 29 '16 at 10:39

score 200 · Accepted Answer · edited Nov 22 '20 at 00:24

200

You can set the default browser size by running:

var width = 800;
var height = 600;
browser.driver.manage().window().setSize(width, height);

To maximize the browser window, run:

browser.driver.manage().window().maximize();

To set the position, run:

var x = 150;
var y = 100;
browser.driver.manage().window().setPosition(x, y);

If you get an error:

WebDriverError: unknown error: operation is unsupported with remote debugging

Operation not supported when using remote debugging Some WebDriver commands (e.g. resizing the browser window) require a Chrome extension to be loaded into the browser. ChromeDriver normally loads this "automation extension" every time it launches a new Chrome session.

However ChromeDriver can be instructed to connect to an existing Chrome session instead of launching a new one. This is done using 'debuggerAddress' in the Capabilities (aka ChromeOptions) object. Since the automation extension is only loaded at startup, there are some commands that ChromeDriver does not support when working with existing sessions through remote debugging.

If you see the error "operation not supported when using remote debugging", try rewriting the test so that it launches a new Chrome session. This can be done by removing 'debuggerAddress' from the Capabilities object.

Source: Operation not supported when using remote debugging

edited Nov 22 '20 at 00:24

Peter Mortensen

30,738
21
105
131

answered Nov 25 '13 at 16:54

Răzvan Flavius Panda

21,730
17
111
169

10

It's also possible to maximise the browser to the full screen size using `browser.driver.manage().window().maximize();` – Ben Smith Nov 26 '13 at 09:49
@BenSmith: I mentioned that since my initial answer :) – Răzvan Flavius Panda Feb 27 '14 at 06:04
8

If you want to have the same resolution for all of your tests, you can call the above in your `protractor.conf.js` file's `onPrepare` function. – nwinkler Jun 25 '14 at 11:27
1

@BenSmith not sure why, but `browser.driver.manage().window().maximize();` doesn't actually maximize the window for me. I just get a slightly larger window. I just end up specifying a width and height with the `setSize()` method – jetcom Jul 10 '14 at 19:20
`.maximize` doesn't seem to work when you go headless I suppose. I had to specify explicitly the size of the window – Alexandros Spyropoulos Sep 04 '14 at 09:59
1

@AlexandrosSpyropoulos : it should work but you have to make sure that you're not running xvfb in some silly resolution. For e.g. by default it's 640x480. – Tadas Sasnauskas Sep 17 '14 at 17:57
How would you do to use the same sizes when forking? Do I have to set the size manually then again? – Olov Jul 16 '15 at 16:44
@Olov what do you mean by forking? – Răzvan Flavius Panda Jul 16 '15 at 22:57
@RăzvanPanda Oh sorry, I was refering to a Protractor (Angular testing framework) action. You can create new browser windows in Protractor by forking a new driver instance. It would be nice if you could specify some standard dimensions to always open new browser windows in. – Olov Jul 17 '15 at 07:48
That gives me `WebDriverError: unknown error: operation is unsupported with remote debugging` – Lee Goddard Apr 20 '16 at 15:19
1

@LeeGee Updated answer. – Răzvan Flavius Panda Apr 20 '16 at 15:24
Something seems to be missing after *"If you get an error"*. – Peter Mortensen Nov 22 '20 at 00:25

score 43 · Answer 2 · answered Oct 27 '16 at 12:17

43

You can also use your config.js to set window size:

// config.js
specs: [
    ...
],
capabilities: {
    browserName: 'chrome',
    chromeOptions: {
        args: ['--window-size=800,600'] // THIS!
    }
}
// ....

answered Oct 27 '16 at 12:17

e-shfiyut

3,538
2
30
31

2

you need remove double dash : args: ['window-size=800,600'] – ezain Apr 27 '17 at 16:37
3

This works as expected for me WITH the double dash as shown in the answer. – Kyle Pittman Jun 01 '17 at 14:51
This also sets the browser sizes when running e2e scripts with the '--headless' args. Which is handy if menu gets shifted to mobile view. – tony2tones Mar 07 '19 at 07:03

Martin Sznapka · Answer 3 · 2016-11-30T12:31:31.093

28

If the preferred method:

browser.driver.manage().window().maximize();

doesn't work for you (for example running Protractor tests in Xvfb), then you can also maximize window this way (protractor.conf.js):

onPrepare: function() {
    setTimeout(function() {
        browser.driver.executeScript(function() {
            return {
                width: window.screen.availWidth,
                height: window.screen.availHeight
            };
        }).then(function(result) {
            browser.driver.manage().window().setSize(result.width, result.height);
        });
    });
},

TypeScript version:

import {Config, browser} from "protractor";

export let config: Config = {
    ...
    onPrepare: () => {
        setTimeout(() => {
            browser.driver.executeScript<[number, number]>(() => {
                return [
                    window.screen.availWidth,
                    window.screen.availHeight
                ];
            }).then((result: [number, number]) => {
                browser.driver.manage().window().setSize(result[0], result[1]);
            });
        });
    }
};

edited Nov 30 '16 at 12:31

answered Sep 24 '15 at 16:18

Martin Sznapka

829
11
6

best ideea with auto get max resolution, but you forgot setPosition(0, 0) so it will be exactly over the screen – Andrew Mar 21 '17 at 07:03
Hm, my browser already starts at position 0-0. But good point if someone need it. – Martin Sznapka Mar 22 '17 at 09:06
mine starts at... 50,50 or something.. just saying :) – Andrew Mar 22 '17 at 15:07
it may depend on the OS, here it's Windows 8.1 run inside Hyper-V – Andrew Mar 22 '17 at 15:09

score 17 · Answer 4 · edited Nov 22 '20 at 00:27

I simply added the code below in my protractor.conf.js file and it did work fine.

onPrepare: function() {
    var width = 1600;
    var height = 1200;
    browser.driver.manage().window().setSize(width, height);
},

What purpose does the setTimeout and executeScript serve in your answer? I struggle to find best practices in the protractor documentation...

To my mind, using directly maximize() is a bad idea and should not be the preferred method, since it would not set the same size on every machine where the tests are executed and could break responsive behaviours.

score 5 · Answer 5 · edited Nov 22 '20 at 00:28

5

In Protractor.conf.js file add following configuration

capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: [
               'start-maximized'
            ]
    }
}

edited Nov 22 '20 at 00:28

Peter Mortensen

30,738
21
105
131

answered Feb 05 '19 at 05:58

Pritam Maske

2,670
2
22
29

score 5 · Answer 6 · answered Apr 03 '19 at 15:01

5

In Selenium 4 (Protractor 6), setRect replaces setSize and setPosition

For example,

browser.driver.manage().window().setRect({height: 600, width: 800});

answered Apr 03 '19 at 15:01

Andrew Schlei

377
4
5

score 0 · Answer 7 · edited Nov 22 '20 at 00:30

0

Modify your config.js file as per below.

onPrepare: function () {
    browser.driver.manage().window().setSize(1280, 1024); // Width, height
},
capabilities: {
    browserName: 'chrome',
    chromeOptions: {
        args: [ "--start-maximized" ] // To start the browser as maximixed
    }
},

edited Nov 22 '20 at 00:30

Peter Mortensen

30,738
21
105
131

answered Dec 22 '19 at 14:37

Sameera De Silva

1,722
1
22
41

score 0 · Answer 8 · answered Feb 08 '21 at 23:05

if you want to go with async/await

You can maximize the window globally (once the browser started) like so

// protractor.conf.js

exports.config = {

    async onPrepare() {
        // start browser in specified window size
        await browser.driver
            .manage()
            .window()
            .setSize(1920, 1080);
    },
}

score -1 · Answer 9 · edited Nov 22 '20 at 00:31

-1

Add the below code. This will maximize the browser window.

browser.driver.manage().window().maximize();

edited Nov 22 '20 at 00:31

Peter Mortensen

30,738
21
105
131

answered Jul 30 '20 at 19:06

Brijesh Yadav

71
1
3

1

Welcome to stackoverflow. There are already answers that provide this information with much more explanation. Please ensure your answers add something new to the question. – Simon.S.A. Jul 30 '20 at 20:49

How to set default browser window size in Protractor/WebdriverJS

9 Answers9

Linked