On-Page Actions

The On-Page Actions category contains test actions that simulate user activity on a tested web page.

Action icon Click

Action icon Double Click

Action icon Right Click

Action icon Type Text

Action icon Press Key

Action icon Drag

Action icon Drag To Element             

Action icon Select Text

Action icon Select Editable Content

Action icon Select Text Area Content

Action icon Wait

Action icon Hover

Action icon Set Files to Upload

Action icon Clear Upload

You can add these actions in two ways:

  • Record them. You can record most of the on-page actions by interacting with a tested webpage. TestCafe Studio automatically adds the corresponding on-page actions to the test and specifies the actions' parameters.
  • Add them from the Actions panel and specify their parameters.

Click

Clicks a webpage element.

Parameter Description
Element Selector Specifies which web element should be clicked.

You can also specify additional parameters for the action. See Click Action Options.

Double Click

Double-clicks a webpage element.

Parameter Description
Element Selector Specifies which web element should be double-clicked.

You can also specify additional parameters for the action. See Click Action Options.

Right Click

Right-clicks a webpage element.

Parameter Description
Element Selector Specifies which web element should be right-clicked.

You can also specify additional parameters for the action. See Click Action Options.

Type Text

Types text within an input element.

Parameter Description
Element Selector Identifies the webpage element that receives input focus.
Text The text to be typed into the specified webpage element.

You can also specify additional parameters for the action. See Typing Action Options.

Enter Values Into DateTime, Color and Range Inputs

TestCafe Studio cannot record your actions when you interact with certain types of HTML5 inputs, like DateTime, Color or Range.

To enter values into these inputs, add the Type Text action to a test and specify a value to be typed.

The following table lists the input types and shows how to format the entered values:

Input type Pattern Example
Date yyyy-mm-dd 2017-12-23
Week yyyy-Www 2017-W03
Month yyyy-mm 2017-08
DateTime yyyy-mm-ddThh:mm 2017-11-03T05:00
Time hh:mm 15:30
Color #rrggbb #003000
Range n 45

Press Key

Presses the specified keyboard key.

Parameter Description
Key The sequence of keys and key combinations to be pressed.

You can also specify additional parameters for the action. See Basic Action Options.

Drag

Drags a webpage element to the specified location.

Parameter Description
Element Selector Specifies which webpage element should be dragged.
Drag Offset X Number. The drop coordinates' X-offset from the mouse pointer's initial position.
Drag Offset Y Number. The drop coordinates' Y-offset from the mouse pointer's initial position.

You can also specify additional parameters for the action. See Mouse Action Options.

Drag To Element

Drags a webpage element to another element.

Parameter Description
Element Selector Specifies which webpage element should be dragged.
Destination Selector Identifies the webpage element that serves as the drop location.

You can also specify additional parameters for the action. See Drag To Element Action Options.

Note

You can use the Test Editor to add this action to the test - you cannot record this action.

Select Text

Selects text within an input element.

Parameter Description
Element Selector Identifies the webpage element whose text should be selected.
Start Position The selection's start position. A zero-based integer.
End Position The selection's end position. A zero-based integer.

Select Editable Content

Selects text within a contenteditable element.

Parameter Description
Start Element Selector Identifies the webpage element from which selection starts. The selection's start position is the first character of the element's text.
End Element Selector Identifies the webpage element at which selection ends. The selection's end position is the last character of the element's text.

You can also specify additional parameters for the action. See Basic Action Options.

Note

You can use the Test Editor to add this action to the test - you cannot record this action.

Select Text Area Content

Selects text within a <textarea> element.

Parameter Description
Element Selector Selector
Start Line The line number at which selection starts. A zero-based integer.
Start Position The selection's start position within the line defined by the Start Line parameter. A zero-based integer.
End Line The line number at which selection ends. A zero-based integer.
End Position The selection's end position within the line the End Line parameter defines. A zero-based integer.

You can also specify additional parameters for the action. See Basic Action Options.

Note

You can use the Test Editor to add this action to the test - you cannot record this action.

Wait

Pauses test execution for the specified period of time.

Parameter Description
Timeout The pause duration (in milliseconds).
Note

You can use the Test Editor to add this action to the test - you cannot record this action.

Hover

Hovers over a webpage element with the mouse pointer.

Parameter Description
Element Selector Identifies the webpage element being hovered over.

You can also specify additional parameters for the action. See Mouse Action Options.

Note

You can use the Test Editor to add this action to the test - you cannot record this action.

Set Files to Upload

Specifies files that should be uploaded to the server.

Parameter Description
Element Selector Identifies the file upload input that allows you to specify files to be uploaded.
Files Files to be uploaded.

Record the Action

To record the Set Files to Upload action, click a file upload input on a webpage and browse for desired files. TestCafe Studio copies the files to <test_directory>/_uploads_, adds the Set Files to Upload action to a test and specifies the files from the _uploads_ folder as the action parameters.

Record upload

Add the Action from the Actions panel

You should do the following when you add the Set Files to Upload action from the Actions panel:

  1. Set up the Element Selector parameter.

  2. Specify files for upload in one of the following ways:

    • Drag and drop the files onto the action parameters area. TestCafe Studio automatically copies the files to <test_directory>/_uploads_ and specifies the copied files as the action parameters.

    Drag and drop files

    • Create an _uploads_ subdirectory (if it does not exist) in the test directory and copy desired files there. Click the Choose files from the _uploads_ folder button and select the files to be uploaded in this action.

    Choose files from the Upload folder

Note

The Set Files to Upload and Clear Upload actions only allow you to manage the list of files for upload. These files are uploaded to the server after you initiate upload, for example, when you click the Upload or Submit button on a webpage. TestCafe can record this action, or you can add the Click action to the test manually.

Set files and initiate upload

Clear Upload

Removes all file paths from the specified file upload input.

Parameter Description
Element Selector Identifies the input field that should be cleared.