t.typeText Method

Types the specified text into an input element. Can be chained with other TestController methods.

t.typeText(selector, text [, options]) → this | Promise<any>

The t.typeText action clicks the specified element before text is typed if this element is not focused. If the target element is not focused after the click, t.typeText does not type text.

Use the t.selectText and t.pressKey actions to implement operations such as selecting or deleting text.

The following example shows how to use t.typeText with and without options.

import { Selector } from 'testcafe';

const nameInput = Selector('#developer-name');

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

test('Type and Replace', async t => {
    await t
        .typeText(nameInput, 'Peter')
        .typeText(nameInput, 'Paker', { replace: true })
        .typeText(nameInput, 'r', { caretPos: 2 })
        .expect(nameInput.value).eql('Parker');
});

Typing Into DateTime, Color, and Range Inputs #

Some HTML5 inputs, like DateTime, Color or Range, require formatted values.

The following table lists value formats expected by these inputs.

The following example uses t.typeText to fill color, datetime-local and range input fields:

import { Selector } from 'testcafe'

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

const color    = Selector('input[type=color]');
const datetime = Selector('input[type=datetime-local]');
const range    = Selector('input[type=range]');

test('Interact with inputs', async t => {

    await t
        .typeText(color, '#FF8040')
        .typeText(datetime, '2017-11-03T05:00')
        .typeText(range, '80');
});

Select Target Elements #

For actions that target DOM elements, use the selector parameter to identify the desired element.

You can pass any of the following objects as a selector.

• A CSS selector string.

  test('My Test', async t => {
  
      // Click will be performed on the first element
      // that matches the CSS selector.
      await t.click('#submit-button');
  });
  

• A selector.

  import { Selector } from 'testcafe';
  
  fixture `My fixture`
      .page `http://www.example.com/`;
  
  const lastItem = Selector('.toc-item:last-child');
  
  test('My Test', async t => {
  
      // Click will be performed on the element selected by
      // the 'getLastItem' selector.
      await t.click(lastItem);
  });
  

• A client-side function that returns a DOM element.

  test('My Test', async t => {
  
      // Click will be performed on the element returned by the function,
      // which is the third child of the document's body.
      await t.click(() => document.body.children[2]);
  });
  

• A DOM node snapshot.

  import { Selector } from 'testcafe';
  
  fixture `My fixture`
      .page `http://www.example.com/`;
  
  test('My Test', async t => {
      const topMenuSnapshot = await Selector('#top-menu');
  
      // Click will be performed on the element whose snapshot
      // is specified. This is an element with the '#top-menu' ID.
      await t.click(topMenuSnapshot);
  });
  

• A Promise returned by a selector.

  import { Selector } from 'testcafe';
  
  const submitButton = Selector('#submit-button');
  
  fixture `My fixture`
      .page `http://www.example.com/`;
  
  test('My Test', async t => {
  
      // Click will be performed on the element specified by the selector
      // as soon as the promise is resolved.
      await t.click(submitButton());
  });
  

Before executing an action, TestCafe waits for the target element to appear in the DOM and become visible. If this does not happen within the selector timeout, the test fails.

Note that TestCafe cannot interact with page elements under other elements. If the target element is not on top when an action is triggered, TestCafe waits for this element to appear in the foreground. If this does not happen within the selector timeout, the action is performed with an overlaying element. For information on why the target element can be overlaid, see the stacking description in the z-index topic.

Upload action is the only method that does not require the target input to be visible. You can also perform the upload action when the input is overlaid.

Options #

{
    modifiers: {
        ctrl: Boolean,
        alt: Boolean,
        shift: Boolean,
        meta: Boolean
    },

    offsetX: Number,
    offsetY: Number,
    caretPos: Number,
    replace: Boolean,
    paste: Boolean,
    speed: Number
}

Example

import { Selector } from 'testcafe';

const nameInput = Selector('#developer-name');

fixture `My Fixture`
    .page `http://devexpress.github.io/testcafe/example/`

test('My Test', async t => {
    await t
        .typeText(nameInput, 'Peter')
        .typeText(nameInput, 'Parker', { replace: true });
});