resize-window.md

layout	title	permalink	checked
docs	Resize Window	/documentation/test-api/actions/resize-window.html	true

Resize Window

There are two ways of resizing a browser window.

Note: these actions require a ICCCM/EWMH-compliant window manager on Linux.

• Setting the Window Size
• Fitting the Window into a Particular Device
• Maximizing the Window

Setting the Window Size

t.resizeWindow( width, height )

Parameter	Type	Description
width	Number	The new width, in pixels.
height	Number	The new height, in pixels.

The following example demonstrates how to use the t.resizeWindow action.

import { Selector } from 'testcafe';

const menu = Selector('#side-menu');

fixture `My fixture`
    .page `http://www.example.com/`;

test('Side menu disappears on small screens', async t => {
    await t
        .resizeWindow(200, 100)
        .expect(menu.getStyleProperty('display')).eql('none');
});

Fitting the Window into a Particular Device

t.resizeWindowToFitDevice( deviceName [, options] )

Resizes the window so that it fits on the screen of the specified mobile device.

Parameter	Type	Description
deviceName	String	The name of the device as listed at http://viewportsizes.com/.
options (optional)	Object	Provide additional information about the device.

The options object can contain the following properties.

Property	Type	Description
portraitOrientation	Boolean	true for portrait screen orientation; false for landscape.

The example below shows how to use the t.resizeWindowToFitDevice action.

import { Selector } from 'testcafe';

const header = Selector('#header');

fixture `My fixture`
    .page `http://www.example.com/`;

test('Header is displayed on Xperia Z in portrait', async t => {
    await t
        .resizeWindowToFitDevice('Sony Xperia Z', {
            portraitOrientation: true
        })
        .expect(header.getStyleProperty('display')).notEql('none');
});

Maximizing the Window

t.maximizeWindow( )

Maximizes the browser window.

The following example shows how to use this action.

import { Selector } from 'testcafe';

const menu = Selector('#side-menu');

fixture `My fixture`
    .page `http://www.example.com/`;

test('Side menu is displayed in full screen', async t => {
    await t
        .maximizeWindow()
        .expect(menu.visible).ok();
});