t.selectTextAreaContent Method

Selects <textarea> content. Can be chained with other TestController methods.

t.selectTextAreaContent(selector [, startLine] [, startPos] [, endLine] [, endPos] [, options]) → this | Promise<any>
Parameter Type Description Default
selector Function | String | Selector | Snapshot | Promise Identifies the <textarea> whose text will be selected. See Select Target Elements.
startLine (optional) Number The line number at which selection starts. A zero-based integer. 0
startPos (optional) Number The start position of selection within the line defined by the startLine. A zero-based integer. 0
endLine (optional) Number The line number at which selection ends. A zero-based integer. The index of the last line.
endPos (optional) Number The end position of selection within the line defined by endLine. A zero-based integer. The last position in endLine.
options (optional) Object A set of options that provide additional parameters for the action. See Options.

The following example shows how to select text within a <textarea> element.

import { ClientFunction, Selector } from 'testcafe';

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

const commentTextArea = Selector('#comments');

const getElementSelectionStart = ClientFunction(selector => selector().selectionStart);
const getElementSelectionEnd   = ClientFunction(selector => selector().selectionEnd);

test('Select text within textarea', async t => {
    await t
        .click('#tried-test-cafe')
        .typeText(commentTextArea, [
            'Lorem ipsum dolor sit amet',
            'consectetur adipiscing elit',
            'sed do eiusmod tempor',
        ].join(',\n'))
        .selectTextAreaContent(commentTextArea, 0, 5, 2, 10);

    await t
        .expect(await getElementSelectionStart(commentTextArea)).eql(5)
        .expect(await getElementSelectionEnd(commentTextArea)).eql(67);
});

Note

If the position defined by startLine and startPos is greater than the one defined by endLine and endPos, the action will perform a backward selection.

You can also select specified text with the t.selectText method and <textarea> content with the t.selectTextareaContent method.

Select Target Elements

Use the selector parameter to identify the target of a DOM event.

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

  • A CSS selector string.

    test('Click submit', 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`Parameter as Selector`
        .page`https://devexpress.github.io/testcafe/example/`;
    
    const lastCheckbox = Selector('fieldset p:last-child [type="checkbox"]');
    
    test('Click last checkbox', async t => {
    
        // Click will be performed on the element selected by
        // the 'getLastItem' selector.
        await t.click(lastCheckbox);
    });
    
  • A client-side function that returns a DOM element.

    test('Click first child of the body', 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[0]);
    });
    
  • A DOM node snapshot.

    import { Selector } from 'testcafe';
    
    fixture`Parameter as DOM node snapshot`
        .page`https://devexpress.github.io/testcafe/example/`;
    
    test('Click preferred interface', async t => {
        const preferredInterface = await Selector('#preferred-interface');
    
        // Click will be performed on the element whose snapshot
        // is specified. This is an element with the '#preferred-interface' ID.
        await t.click(preferredInterface);
    });
    
  • A Promise returned by a selector.

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

TestCafe waits for the target element to become visible before it executes an action. If this does not happen within the selector timeout, the test fails.

TestCafe cannot interact with background elements. If a different element overlaps the action target, TestCafe waits for this element to disappear. If this does not happen within the selector timeout, TestCafe performs the action with the element on top of the original target. Learn more about stacking and z-index on MDN.

Note

The upload action is an exception to this rule — it does not check the visibility of the target input.

Options

Basic action options provide additional parameters for the t.pressKey, t.selectText, t.selectTextAreaContent and t.selectEditableContent actions.

export interface BasicOption {
    speed: number;
}
Parameter Type Description Default
speed Number The speed of action emulation. Number between 1 (the maximum speed) and 0.01 (the minimum speed). Overrides all other speed settings (CLI, Runner, and test code) for the duration of the action. 1
confidential Boolean Replace the action payload with asterisks in TestCafe Dashboard reports. true when the action target is a password type input; false otherwise.

Example

import { Selector } from 'testcafe';

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

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

test('Type name', async t => {
    await t
        .typeText(nameInput, 'Peter')
        .typeText(nameInput, ' Parker', { speed: 0.1 });
});