Webdriverjs Set Viewport Size

I want to launch chrome browser with viewport size of some resolution , for example 800x600 , I tried following code var width = 800; var height = 600; driver.manage().window().set

Solution 1:

The code you are providing is working perfectly fine.

However, you are checking the resolution of the screen, not the size of the window! This is what window.screen.width and window.screen.height refer to. To retrieve the size of the window, use window.innerWidth (and innerHeight). The following works for me.

var webdriver = require('selenium-webdriver'),
    driver = null;

functionlogWindowSize() {
    driver.executeScript(function() {
        return [window.innerWidth, window.innerHeight];
    }).then(console.log);
}

// construct driver
driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .build();
driver.get('http://www.google.com');

// resize windowlogWindowSize();
driver.manage().window().setSize(640, 480);
logWindowSize();
driver.quit();

This will log the following to my console.

[ 945, 1018 ]
[ 640, 375 ]

Note that the height of the window is different from what was set. This is because of the height of the tab bar and navigation bar. You can set the inner window size by first setting it to an arbitrary value, checking the difference and then setting it to what you want plus that difference. like so.

var webdriver = require('selenium-webdriver'),
    driver = null,
    sizeWidth = 640,
    sizeHeight = 480;

// construct driver
driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .build();
driver.get('http://www.google.com');

// resize window
driver.manage().window().setSize(sizeWidth, sizeHeight);
driver.executeScript(function() {
    return [window.innerWidth, window.innerHeight];
}).then(function(actualSize) {
    driver.manage().window().setSize(
        2 * sizeWidth - actualSize[0],
        2 * sizeHeight - actualSize[1]
    );
    // the following will log the sizes we want
    driver.executeScript(function() {
        return [window.innerWidth, window.innerHeight];
    }).then(console.log);
});
driver.quit();

Solution 2:

The problem It seems that you really want to influence what window.screen.width and window.screen.height return. This is normally not possible, except that these values change when using the device mode (and toolbar) in Chrome. So, let's trigger those, right?

// open inspector and responsive design mode
driver.actions()
    .keyDown(Key.CONTROL)
    .keyDown(Key.SHIFT)
    .sendKeys('im')
    .keyUp(Key.SHIFT)
    .keyUp(Key.CONTROL)
    .perform();

Unfortunately, this won't work in Chrome. To quote that answer:

The Chrome driver uses the Chrome remote debugging protocol to communicate with the browser. This is the same protocol that the developer console uses also. Unfortunately, Chrome is designed so that only one client can be attached using the protocol at a time, so that means either the developer tools, or the driver, but not both simultaneously.    — JimEvans

Bummer. It looks like this can be made to work using Firefox, however. Unfortunately, it seems that performing actions is currently not possible using Selenium + geckodriver, at the moment. It is also not possible to open this mode using JavaScript. We can however send keys to an element.

A solution The following works for me.

var webdriver = require('selenium-webdriver'),
    firefox = require('selenium-webdriver/firefox'),
    By = webdriver.By,
    Key = webdriver.Key,
    driver = null;

// construct drivervar profile = new firefox.Profile(),
    devicePreset = [{
        width: 640,
        height: 480,
        key: '640x480',
        name: 'Mobile Device'
    }];
profile.setPreference('devtools.responsiveUI.presets',
                      JSON.stringify(devicePreset));
var opts = new firefox.Options();
opts.setProfile(profile);
var builder = new webdriver.Builder().forBrowser('firefox');
builder.setFirefoxOptions(opts);
driver = builder.build();

driver.get('http://www.google.com');

// open responsive design mode
driver.findElement(By.css('input[name="q"]'))
    .sendKeys(Key.chord(Key.CONTROL, Key.SHIFT, 'm'));

driver.get('https://www.iplocation.net/find-ip-address');

Note that I set a preference for Firefox that indicates the size to use in the responsive design mode. You can change this to whatever screen size you prefer.