clear

setViewportSize

This command changes the viewport size of the browser. When talking about browser size we have to differentiate between the actual window size of the browser application and the document/viewport size of the website. The window size will always be bigger since it includes the height of any menu or status bars.

The command tries to resize the browser multiple times (max 5 times) because Webdriver only allows to change the window size and doesn’t take the viewport into consideration. This is handled by WebdriverIO internally.

Usage

1
browser.setViewportSize(size,type);

Parameters

Param Type Details
size Object window width/height
type Boolean set to false to change window size, true (default) to change viewport size

Example

setViewportSize.js
1
2
3
4
5
6
7
8
9
it('should resize the current viewport', function () {
    browser.setViewportSize({
        width: 500,
        height: 500
    });

    var windowSize = browser.windowHandleSize();
    console.log(windowSize.value); // outputs: { width: 500, height: 602 }
});

Uses