Skip to content

Latest commit

 

History

History
129 lines (94 loc) · 7.32 KB

select-text.md

File metadata and controls

129 lines (94 loc) · 7.32 KB
layout title permalink checked
docs
Select Text
/documentation/test-api/actions/select-text.html
true

Select Text

TestCafe allows you to select text within inputs, <textarea> and contentEditable elements.

Select Text in Input Elements

t.selectText selects text in input elements of various types.

t.selectText( selector [, startPos] [, endPos] )
Parameter Type Description Default
selector Function | String | Selector | Snapshot | Promise Identifies the webpage element whose text will be selected. See Selecting Target Elements.
startPos (optional) Number The start position of the selection. A zero-based integer. 0
endPos (optional) Number The end position of the selection. A zero-based integer. Length of the visible text content.

You can use t.selectText for <textarea> and contentEditable elements as well. However, the t.selectTextAreaContent and t.selectEditableContent actions allow you to specify the selection range in a way that is more relevant for these elements.

The following example demonstrates text selection in an input element.

import { expect } from 'chai';
import { ClientFunction } from 'testcafe';

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

const getElementSelectionStart = ClientFunction(id => document.getElementById(id).selectionStart);
const getElementSelectionEnd   = ClientFunction(id => document.getElementById(id).selectionEnd);

test('Select text within input', async t => {
    await t
        .typeText('#developer-name', 'Test Cafe', { caretPos: 0 })
        .selectText('#developer-name', 7, 1);

    expect(await getElementSelectionStart('developer-name')).to.equal(1);
    expect(await getElementSelectionEnd('developer-name')).to.equal(7);
});

If the startPos value is greater than the endPos value, the action will perform a backward selection.

Select <textarea> Content

t.selectTextAreaContent( selector [, startLine] [, startPos] [, endLine] [, endPos] )
Parameter Type Description Default
selector Function | String | Selector | Snapshot | Promise Identifies the <textarea> whose text will be selected. See Selecting 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.

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

import { expect } from 'chai';
import { ClientFunction } from 'testcafe';

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

const getElementSelectionStart = ClientFunction(id => document.getElementById(id).selectionStart);
const getElementSelectionEnd   = ClientFunction(id => document.getElementById(id).selectionEnd);

test('Select text within textarea', async t => {
    await t.selectTextAreaContent('#comment', 1, 5, 3, 10);

    expect(await getElementSelectionStart('comment')).to.equal(5);
    expect(await getElementSelectionEnd('comment')).to.equal(48);
});

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.

Perform Selection within Editable Content

t.selectEditableContent( startSelector, endSelector )
Parameter Type Description
startSelector Function | String | Selector | Snapshot | Promise Identifies a webpage element from which selection starts. The start position of selection is the first character of the element's text. See Selecting Target Elements.
endSelector Function | String | Selector | Snapshot | Promise Identifies a webpage element at which selection ends. The end position of selection is the last character of the element's text. See Selecting Target Elements.

This function works for HTML elements that have the contentEditable attribute enabled.

Important! According to Web standards, start and end elements must have a common ancestor with the contentEditable attribute set to true - the range root.

The example below shows how to select several sections within a contentEditable area.

import { expect } from 'chai';

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

test('Delete text within a contentEditable element', async t => {
    await t
        .selectEditableContent('#foreword', '#chapter-3')
        .pressKey('delete');

    expect(await t.select('#chapter-2')).to.be.null;
    expect(await t.select('#chapter-4')).to.not.be.null;
});

If the HTML element defined by endSelector is located on a higher level of the page hierarchy than the one defined by startSelector, the action will perform a backward selection.