How to set default browser window size in Protractor/WebdriverJS
JavascriptAngularjsSelenium WebdriverWebdriverProtractorJavascript Problem Overview
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).
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
You can also use your config.js
to set window size:
// config.js
specs: [
...
],
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: ['--window-size=800,600'] // THIS!
}
}
// ....
Solution 3 - Javascript
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]);
});
});
}
};
Solution 4 - Javascript
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.
Solution 5 - Javascript
In Protractor.conf.js file add following configuration
capabilities: {
'browserName': 'chrome',
chromeOptions: {
args: [
'start-maximized'
]
}
}
Solution 6 - Javascript
In Selenium 4 (Protractor 6), setRect
replaces setSize
and setPosition
For example,
browser.driver.manage().window().setRect({height: 600, width: 800});
Solution 7 - Javascript
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
}
},
Solution 8 - Javascript
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);
},
}
Solution 9 - Javascript
Add the below code. This will maximize the browser window.
browser.driver.manage().window().maximize();