Adjust the dimensions of the viewport in WebdriverJS

Question

Adjust the dimensions of the viewport in WebdriverJS

Is there a way to launch the Chrome browser with a specific viewport size, like 800x600? I have tried the following code:

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

However, when running window.screen.width in the developer console, it always returns 1440.

I also attempted to use Chrome options with the --window-size=x,y option:

var o = new chrome.Options();
o.addArguments("--window-size=640,480");

driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).setChromeOptions(o).build();

Unfortunately, this code only resizes the window as well.

Can anyone provide me with a Chrome command line option to set the default viewport, similar to how it's done in the Chrome developer console (as shown in the image below), or suggest any other approach using Selenium WebDriverJS?

https://i.sstatic.net/aEJ2G.png

javascript google-chrome selenium-webdriver

Answer 1

Answer №1

Your provided code is functioning as expected.

However, it's important to note that the code you are using checks the resolution of the screen, not the actual size of the window. The values window.screen.width and window.screen.height correspond to screen dimensions. To obtain the window size, utilize window.innerWidth (and innerHeight). Below is a revised code snippet:

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

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

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

// adjust window size
logWindowSize();
driver.manage().window().setSize(640, 480);
logWindowSize();
driver.quit();

The resulting output in the console will be:

[ 945, 1018 ]
[ 640, 375 ]

A discrepancy in height might occur due to tab bar and navigation bar sizes. You can set the window size accurately by adjusting for this difference. Here's an example:

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

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

// adjust window size
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]
    );
    // display the desired sizes
    driver.executeScript(function() {
        return [window.innerWidth, window.innerHeight];
    }).then(console.log);
});
driver.quit();

Answer 2

Your provided code is functioning as expected.

However, it's important to note that the code you are using checks the resolution of the screen, not the actual size of the window. The values window.screen.width and window.screen.height correspond to screen dimensions. To obtain the window size, utilize window.innerWidth (and innerHeight). Below is a revised code snippet:

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

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

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

// adjust window size
logWindowSize();
driver.manage().window().setSize(640, 480);
logWindowSize();
driver.quit();

The resulting output in the console will be:

[ 945, 1018 ]
[ 640, 375 ]

A discrepancy in height might occur due to tab bar and navigation bar sizes. You can set the window size accurately by adjusting for this difference. Here's an example:

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

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

// adjust window size
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]
    );
    // display the desired sizes
    driver.executeScript(function() {
        return [window.innerWidth, window.innerHeight];
    }).then(console.log);
});
driver.quit();

Answer 3

Answer №2

The Issue at Hand
There appears to be a strong desire to manipulate the values returned by window.screen.width and window.screen.height. Normally, this is not feasible, unless utilizing Chrome's device mode (along with the accompanying toolbar). So, how about triggering those options?

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

Regrettably, this approach won't succeed in Chrome. As stated in that answer:

The Chrome driver utilizes the Chrome remote debugging protocol for browser communication. This protocol aligns with what the developer console employs as well. Unfortunately, Chrome restricts only one client connection via the protocol at any given time, implying either the developer tools or the driver, but not both concurrently. — JimEvans

What a letdown. It seems like success can be achieved in this aspect using Firefox, though. Nonetheless, executing actions using Selenium + geckodriver is currently unattainable. Furthermore, there isn't a JavaScript method to activate this mode directly. On a brighter note, we are able to send keys to an element.

A Potential Resolution
The following method has worked effectively for me.

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

// setting up driver
var 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');

// activating 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');

Please note that I have configured a preference in Firefox indicating the desired screen size for the responsive design mode. Feel free to adjust this according to your preferential screen specifications.

Answer 4

The Issue at Hand
There appears to be a strong desire to manipulate the values returned by window.screen.width and window.screen.height. Normally, this is not feasible, unless utilizing Chrome's device mode (along with the accompanying toolbar). So, how about triggering those options?

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

Regrettably, this approach won't succeed in Chrome. As stated in that answer:

The Chrome driver utilizes the Chrome remote debugging protocol for browser communication. This protocol aligns with what the developer console employs as well. Unfortunately, Chrome restricts only one client connection via the protocol at any given time, implying either the developer tools or the driver, but not both concurrently. — JimEvans

What a letdown. It seems like success can be achieved in this aspect using Firefox, though. Nonetheless, executing actions using Selenium + geckodriver is currently unattainable. Furthermore, there isn't a JavaScript method to activate this mode directly. On a brighter note, we are able to send keys to an element.

A Potential Resolution
The following method has worked effectively for me.

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

// setting up driver
var 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');

// activating 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');

Please note that I have configured a preference in Firefox indicating the desired screen size for the responsive design mode. Feel free to adjust this according to your preferential screen specifications.

Adjust the dimensions of the viewport in WebdriverJS

Answer №1

Answer №2

Similar questions

Implementing an Asynchronous Limited Queue in JavaScript/TypeScript with async/await

The affix feature in Bootstrap's navbar fails to recognize the height of images

In JQuery, an empty string will be returned if it contains the dollar sign character

Unresolved styles in React component linked to styles.css file

Having trouble navigating the page using Selenium in Python?

Troubleshooting problems with opening and closing windows in JavaScript

Code snippet for fetching JavaScript file using Angular's caching mechanism

What could be the reason for the unexpected outcome when checking if display is equal to "none"?

StopDefault and JSON Placement

How to Handle Tab Navigation on a Mobile Website without Javascript?

Why will the experimental activation of React concurrent features in Nextjs 12 disable API routes?

Click on the print icon in the modal window

Is there a way to insert a secured page right before accessing the dashboard?

Is there a way for me to retrieve the locator value of a webelement?

JavaScript for Loading and Moving Ads in IE8

How to simulate loadStripe behavior with Cypress stub?

Setting a fixed data value within a div for subsequent retrieval through a function

In a VueJS project, access an xlsx file stored in the public directory by reading its contents

Steps for selecting the text "Thank you for Registering" using Xpath in Selenium

Step-by-step guide for executing test methods sequentially using JUnit