Resize Window

There are three ways of resizing a browser window.

Window resize actions are not supported when you run tests in remote browsers.

Note: these actions require .NET 4.0 or newer installed on Windows machines and an ICCCM/EWMH-compliant window manager on Linux.

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. See the list of supported devices in this repository.
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();
});