Interact With The Page

Test API provides a set of actions you can use to interact with the page.

They are implemented as methods in the test controller object. You can call them in a chained fashion.

The available actions with reproducible usage examples and links to their descriptions are listed below.

Click

Click actions allow you to click an element on a page.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Click test', async t => {
    const selectBasedOnText = Selector('label').withText('I have tried TestCafe');

    await t
        .click(selectBasedOnText);
});

Press Key

Press Key action allows you to press a key or key combination.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Press Key test', async t => {
    await t
        .click('#tried-test-cafe')
        // pressing 'Space' imitates clicking the checkbox again
        .pressKey('space')
});

Navigate

Navigate action navigates to the specified URL.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Navigate To URL test', async t => {
    await t
        .navigateTo('https://github.com/DevExpress/testcafe');
});

Type Text

Type Text action types the specified text in the selected input element.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Type Text test', async t => {
    await t
        .typeText('#developer-name', 'John Doe');
});

Select Text

Actions that allow you to select text in inputs, <textarea>, and contentEditable elements.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Select Text test', async t => {
    await t
        .typeText('#developer-name', 'John Doe')
        .selectText('#developer-name')
        .pressKey('delete');
});

Hover

Hover action allows you to hover the mouse pointer over the tested page.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://js.devexpress.com`;

test('Hover test', async t => {
    await t
        .hover('.map-container');
});

Drag Elements

Drag actions allow you to drag elements on the tested page.

The drag actions do not invoke integrated browser actions such as text selection. Use them to perform drag-and-drop actions that page elements process. To select text, use t.selectText.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Drag test', async t => {
    const triedCheckbox = Selector('label').withText('I have tried TestCafe');

    await t
        .click(triedCheckbox)
        .drag('#slider', 360, 0, { offsetX: 10, offsetY: 10 });
});

Upload Files

Actions that allow you to interact with file upload input elements.

The file upload actions only allow you to manage the list of files you want to upload. These files are uploaded to the server after you initiate upload, for example, when you click the Upload or Submit button on a page.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/FileSelection/jQuery/Light/`;

test('Upload Files test', async t => {
    await t
        .switchToIframe('.demo-frame')
        .setFilesToUpload('.dx-fileuploader-input', [
            // substitute the following string with the path to a local file or multiple files you want to upload
            'path/to/file'
        ]);
});

Take Screenshot

These actions allow you to take screenshots of the tested page.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://js.devexpress.com`;

test('Take Screenshot test', async t => {
    await t
        .takeScreenshot()
        .takeElementScreenshot('.map-container');
});

Work with iframes

A TestCafe test's browsing context is limited to the main window or an <iframe>. To use an <iframe> in your test, switch the context from the main window to this <iframe>. If several <iframes> are used in your test, you need to switch between them. limited to either the main window or an <iframe>. To use an <iframe> in your test, you need to switch the context from the main window to this <iframe> (and then probably back). Likewise, if several <iframes> are involved in your test, you will have to switch between them.

Use the following methods to switch between windows and iframes:

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview/jQuery/Light/`;

test('Working With iframe test', async t => {
    await t
        .switchToIframe('.demo-frame')
        .click('.dx-datagrid-group-panel')
        .switchToMainWindow();
});

Handle Native Dialogs

TestCafe allows you to handle native browser dialogs that are invoked during the test run.

You can close alert and beforeunload dialogs, choose an option in confirm dialogs or provide text for prompt dialogs.

Resize Window

Use resize window actions to maximize a browser window or resize it to fit a specified width and height or type of device.

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.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://js.devexpress.com`;

test('Resize Window test', async t => {
    await t
        .resizeWindowToFitDevice('iphonexr')
        .maximizeWindow();
});

Wait

Wait action allows you to pause the test for a specified period of time.

Example

import { Selector } from 'testcafe';

fixture `Example`
    .page `https://js.devexpress.com`;

test('Wait test', async t => {
    await t
        .hover('.map-container')
        .wait(1000);
});

Remarks for Touch Devices

On touch devices, TestCafe emulates touch events instead of mouse events.

Mouse event Touch event
mousemove (when hovering or dragging) touchmove (dragging only)
mousedown touchstart
mouseup touchend