How to use moveTextAreaCursorUp method in Testcafe

Best JavaScript code snippet using testcafe

Run Testcafe automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

shortcuts.js

Source: shortcuts.js Github

copy
1import hammerhead from '../../deps/hammerhead';
2import testCafeCore from '../../deps/testcafe-core';
3import testCafeUI from '../../deps/testcafe-ui';
4
5var Promise               = hammerhead.Promise;
6var browserUtils          = hammerhead.utils.browser;
7var eventSimulator        = hammerhead.eventSandbox.eventSimulator;
8var focusBlurSandbox      = hammerhead.eventSandbox.focusBlur;
9var elementEditingWatcher = hammerhead.eventSandbox.elementEditingWatcher;
10
11var textSelection = testCafeCore.textSelection;
12var eventUtils    = testCafeCore.eventUtils;
13var domUtils      = testCafeCore.domUtils;
14var selectElement = testCafeUI.selectElement;
15
16
17var currentTextarea             = null;
18var currentTextareaCursorIndent = null;
19
20function onTextAreaBlur () {
21    currentTextarea             = null;
22    currentTextareaCursorIndent = null;
23
24    eventUtils.unbind(this, 'blur', onTextAreaBlur, true);
25}
26
27function updateTextAreaIndent (element) {
28    if (domUtils.isTextAreaElement(element)) {
29        if (currentTextarea !== element) {
30            eventUtils.bind(element, 'blur', onTextAreaBlur, true);
31            currentTextarea = element;
32        }
33
34        currentTextareaCursorIndent = getLineIndentInTextarea(element);
35    }
36}
37
38function getLineIndentInTextarea (textarea) {
39    var inverseSelection = textSelection.hasInverseSelection(textarea);
40
41    var cursorPosition = inverseSelection ?
42                         textSelection.getSelectionStart(textarea) :
43                         textSelection.getSelectionEnd(textarea);
44
45    if (!textarea.value || !cursorPosition)
46        return 0;
47
48    return domUtils.getTextareaIndentInLine(textarea, cursorPosition);
49}
50
51function moveTextAreaCursorUp (element, withSelection) {
52    var textareaValue = element.value;
53
54    if (!textareaValue)
55        return;
56
57    var startPos                = textSelection.getSelectionStart(element);
58    var endPos                  = textSelection.getSelectionEnd(element);
59    var hasInverseSelection     = textSelection.hasInverseSelection(element);
60    var partBeforeCursor        = textareaValue.substring(0, hasInverseSelection ? startPos : endPos);
61    var lastLineBreakIndex      = partBeforeCursor.lastIndexOf('\n');
62    var partBeforeLastLineBreak = partBeforeCursor.substring(0, lastLineBreakIndex);
63
64    if (currentTextareaCursorIndent === null || currentTextarea !== element)
65        updateTextAreaIndent(element);
66
67    lastLineBreakIndex = partBeforeLastLineBreak.lastIndexOf('\n');
68    var newPosition    = Math.min(lastLineBreakIndex + 1 + currentTextareaCursorIndent, partBeforeLastLineBreak.length);
69
70    moveTextAreaCursor(element, startPos, endPos, hasInverseSelection, newPosition, withSelection);
71}
72
73function moveTextAreaCursorDown (element, withSelection) {
74    var textareaValue = element.value;
75
76    if (!textareaValue)
77        return;
78
79    var startPos            = textSelection.getSelectionStart(element);
80    var endPos              = textSelection.getSelectionEnd(element);
81    var hasInverseSelection = textSelection.hasInverseSelection(element);
82    var cursorPosition      = hasInverseSelection ? startPos : endPos;
83    var partAfterCursor     = textareaValue.substring(cursorPosition);
84    var firstLineBreakIndex = partAfterCursor.indexOf('\n');
85    var nextLineStartIndex  = firstLineBreakIndex === -1 ? partAfterCursor.length : firstLineBreakIndex + 1;
86    var partAfterNewIndent  = partAfterCursor.substring(nextLineStartIndex);
87    var newPosition         = cursorPosition + nextLineStartIndex;
88
89    firstLineBreakIndex = partAfterNewIndent.indexOf('\n');
90    var maxIndent       = firstLineBreakIndex === -1 ? partAfterNewIndent.length : firstLineBreakIndex;
91
92    if (currentTextareaCursorIndent === null || currentTextarea !== element)
93        updateTextAreaIndent(element);
94
95    newPosition = Math.min(newPosition + currentTextareaCursorIndent, newPosition + maxIndent);
96
97    moveTextAreaCursor(element, startPos, endPos, hasInverseSelection, newPosition, withSelection);
98}
99
100function moveTextAreaCursor (element, startPos, endPos, hasInverseSelection, newPosition, withSelection) {
101    var newStart = null;
102    var newEnd   = null;
103
104    if (withSelection) {
105        if (startPos === endPos) {
106            newStart = startPos;
107            newEnd   = newPosition;
108        }
109        else if (!hasInverseSelection) {
110            newStart = startPos;
111            newEnd   = newPosition;
112        }
113        else {
114            newStart = endPos;
115            newEnd   = newPosition;
116        }
117    }
118    else
119        newEnd = newStart = newPosition;
120
121    textSelection.select(element, newStart, newEnd);
122}
123
124function setElementValue (element, value) {
125    if (value.charAt(0) === '-' && value.charAt(1) === '.')
126        value = value.substring(1);
127
128    if (value.charAt(value.length - 1) === '.')
129        value = value.substring(0, value.length - 1);
130
131
132    element.value = value;
133    eventSimulator.input(element);
134}
135
136function submitFormOnEnterPressInInput (form, inputElement) {
137    var buttons      = form.querySelectorAll('input, button');
138    var submitButton = null;
139    var i            = null;
140
141    for (i = 0; i < buttons.length; i++) {
142        if (!submitButton && buttons[i].type === 'submit' && !buttons[i].disabled) {
143            submitButton = buttons[i];
144            break;
145        }
146    }
147
148    if (submitButton)
149        eventSimulator.click(submitButton);
150    else if (domUtils.blocksImplicitSubmission(inputElement)) {
151        var formInputs = form.getElementsByTagName('input');
152        var textInputs = [];
153
154        for (i = 0; i < formInputs.length; i++) {
155            if (domUtils.blocksImplicitSubmission(formInputs[i]))
156                textInputs.push(formInputs[i]);
157        }
158
159        // NOTE: the form is submitted on enter press if there is only one input of the following types on it
160        //  and this input is focused (http://www.w3.org/TR/html5/forms.html#implicit-submission)
161        if (textInputs.length === 1 && textInputs[0] === inputElement) {
162            var isInputValid = browserUtils.isSafari || !inputElement.validity || inputElement.validity.valid;
163
164            if (isInputValid && eventSimulator.submit(form))
165                form.submit();
166        }
167    }
168}
169
170//shortcuts
171function selectAll (element) {
172    if (domUtils.isEditableElement(element))
173        textSelection.select(element);
174
175    return Promise.resolve();
176}
177
178function backspace (element) {
179    if (domUtils.isTextEditableElementAndEditingAllowed(element)) {
180        var startPos = textSelection.getSelectionStart(element);
181        var endPos   = textSelection.getSelectionEnd(element);
182        var value    = element.value.replace(/\r\n/g, '\n');
183
184        if (endPos === startPos) {
185            if (startPos > 0) {
186                setElementValue(element, value.substring(0, startPos - 1) +
187                                         value.substring(endPos, value.length));
188                textSelection.select(element, startPos - 1, startPos - 1);
189            }
190        }
191        else {
192            setElementValue(element, value.substring(0, startPos) +
193                                     value.substring(endPos, value.length));
194            textSelection.select(element, startPos, startPos);
195        }
196    }
197
198    if (domUtils.isContentEditableElement(element))
199        textSelection.deleteSelectionContents(element);
200
201    return Promise.resolve();
202}
203
204function del (element) {
205    if (domUtils.isTextEditableElementAndEditingAllowed(element)) {
206        var startPos = textSelection.getSelectionStart(element);
207        var endPos   = textSelection.getSelectionEnd(element);
208        var value    = element.value.replace(/\r\n/g, '\n');
209
210        if (endPos === startPos) {
211            if (startPos < value.length) {
212                setElementValue(element, value.substring(0, startPos) +
213                                         value.substring(endPos + 1, value.length));
214                textSelection.select(element, startPos, startPos);
215            }
216        }
217        else {
218            setElementValue(element, value.substring(0, startPos) +
219                                     value.substring(endPos, value.length));
220            textSelection.select(element, startPos, startPos);
221        }
222    }
223
224    if (domUtils.isContentEditableElement(element))
225        textSelection.deleteSelectionContents(element);
226
227    return Promise.resolve();
228}
229
230function left (element) {
231    var startPosition = null;
232    var endPosition   = null;
233
234    if (domUtils.isSelectElement(element))
235        selectElement.switchOptionsByKeys(element, 'left');
236
237    if (domUtils.isTextEditableElement(element)) {
238        startPosition = textSelection.getSelectionStart(element) || 0;
239        endPosition   = textSelection.getSelectionEnd(element);
240
241        var newPosition = startPosition === endPosition ? startPosition - 1 : startPosition;
242
243        textSelection.select(element, newPosition, newPosition);
244        updateTextAreaIndent(element);
245    }
246
247    if (domUtils.isContentEditableElement(element)) {
248        startPosition = textSelection.getSelectionStart(element);
249        endPosition   = textSelection.getSelectionEnd(element);
250
251        // NOTE: we only remove selection
252        if (startPosition !== endPosition) {
253            var selection        = textSelection.getSelectionByElement(element);
254            var inverseSelection = textSelection.hasInverseSelectionContentEditable(element);
255            var startNode        = inverseSelection ? selection.focusNode : selection.anchorNode;
256            var startOffset      = inverseSelection ? selection.focusOffset : selection.anchorOffset;
257            var startPos         = { node: startNode, offset: startOffset };
258
259            textSelection.selectByNodesAndOffsets(startPos, startPos, true);
260        }
261    }
262
263    return Promise.resolve();
264}
265
266function right (element) {
267    var startPosition = null;
268    var endPosition   = null;
269
270    if (domUtils.isSelectElement(element))
271        selectElement.switchOptionsByKeys(element, 'right');
272
273    if (domUtils.isTextEditableElement(element)) {
274        startPosition = textSelection.getSelectionStart(element);
275        endPosition   = textSelection.getSelectionEnd(element);
276
277        var newPosition = startPosition === endPosition ? endPosition + 1 : endPosition;
278
279        if (startPosition === element.value.length)
280            newPosition = startPosition;
281
282        textSelection.select(element, newPosition, newPosition);
283        updateTextAreaIndent(element);
284    }
285
286    if (domUtils.isContentEditableElement(element)) {
287        startPosition = textSelection.getSelectionStart(element);
288        endPosition   = textSelection.getSelectionEnd(element);
289
290        //NOTE: we only remove selection
291        if (startPosition !== endPosition) {
292            var selection        = textSelection.getSelectionByElement(element);
293            var inverseSelection = textSelection.hasInverseSelectionContentEditable(element);
294            var endNode          = inverseSelection ? selection.anchorNode : selection.focusNode;
295            var endOffset        = inverseSelection ? selection.anchorOffset : selection.focusOffset;
296            var startPos         = { node: endNode, offset: endOffset };
297
298            textSelection.selectByNodesAndOffsets(startPos, startPos, true);
299        }
300    }
301
302    return Promise.resolve();
303}
304
305function up (element) {
306    if (domUtils.isSelectElement(element))
307        selectElement.switchOptionsByKeys(element, 'up');
308
309    if (browserUtils.isWebKit && domUtils.isInputElement(element))
310        return home(element);
311
312    if (domUtils.isTextAreaElement(element))
313        moveTextAreaCursorUp(element, false);
314
315    return Promise.resolve();
316}
317
318function down (element) {
319    if (domUtils.isSelectElement(element))
320        selectElement.switchOptionsByKeys(element, 'down');
321
322    if (browserUtils.isWebKit && domUtils.isInputElement(element))
323        return end(element);
324
325    if (domUtils.isTextAreaElement(element))
326        moveTextAreaCursorDown(element, false);
327
328    return Promise.resolve();
329}
330
331function home (element, withSelection) {
332    if (domUtils.isTextEditableElement(element)) {
333        var startPos          = textSelection.getSelectionStart(element);
334        var endPos            = textSelection.getSelectionEnd(element);
335        var inverseSelection  = textSelection.hasInverseSelection(element);
336        var referencePosition = null;
337
338        var isSingleLineSelection = !domUtils.isTextAreaElement(element) ? true :
339                                    domUtils.getTextareaLineNumberByPosition(element, startPos) ===
340                                    domUtils.getTextareaLineNumberByPosition(element, endPos);
341
342        if (isSingleLineSelection)
343            referencePosition = inverseSelection ? endPos : startPos;
344        else
345            referencePosition = inverseSelection ? startPos : endPos;
346
347        var valueBeforeCursor  = element.value.substring(0, referencePosition);
348        var lastLineBreakIndex = valueBeforeCursor.lastIndexOf('\n');
349        var newPosition        = lastLineBreakIndex === -1 ? 0 : lastLineBreakIndex + 1;
350        var newStartPos        = null;
351        var newEndPos          = null;
352
353        if (isSingleLineSelection) {
354            newStartPos = newPosition;
355            newEndPos   = withSelection ? referencePosition : newPosition;
356
357            textSelection.select(element, newEndPos, newStartPos);
358        }
359        else if (!inverseSelection)
360            textSelection.select(element, startPos, newPosition);
361        else
362            textSelection.select(element, endPos, newPosition);
363    }
364
365    return Promise.resolve();
366}
367
368function end (element, withSelection) {
369    if (domUtils.isTextEditableElement(element)) {
370        var startPos          = textSelection.getSelectionStart(element);
371        var endPos            = textSelection.getSelectionEnd(element);
372        var inverseSelection  = textSelection.hasInverseSelection(element);
373        var referencePosition = null;
374
375        var isSingleLineSelection = !domUtils.isTextAreaElement(element) ? true :
376                                    domUtils.getTextareaLineNumberByPosition(element, startPos) ===
377                                    domUtils.getTextareaLineNumberByPosition(element, endPos);
378
379
380        if (isSingleLineSelection)
381            referencePosition = inverseSelection ? endPos : startPos;
382        else
383            referencePosition = inverseSelection ? startPos : endPos;
384
385        var valueAsterCursor    = element.value.substring(referencePosition);
386        var firstLineBreakIndex = valueAsterCursor.indexOf('\n');
387        var newPosition         = referencePosition;
388        var newStartPos         = null;
389        var newEndPos           = null;
390
391        newPosition += firstLineBreakIndex === -1 ? valueAsterCursor.length : firstLineBreakIndex;
392
393        if (isSingleLineSelection) {
394            newStartPos = withSelection ? referencePosition : newPosition;
395            newEndPos   = newPosition;
396
397            textSelection.select(element, newStartPos, newEndPos);
398        }
399        else if (!inverseSelection)
400            textSelection.select(element, startPos, newPosition);
401        else
402            textSelection.select(element, endPos, newPosition);
403    }
404
405    return Promise.resolve();
406}
407
408function esc (element) {
409    if (domUtils.isSelectElement(element))
410        selectElement.collapseOptionList();
411
412    return Promise.resolve();
413}
414
415function shiftUp (element) {
416    if (browserUtils.isWebKit && domUtils.isInputElement(element))
417        return shiftHome(element);
418
419    if (domUtils.isTextAreaElement(element))
420        moveTextAreaCursorUp(element, true);
421
422    return Promise.resolve();
423}
424
425function shiftDown (element) {
426    if (browserUtils.isWebKit && domUtils.isInputElement(element))
427        return shiftEnd(element);
428
429    if (domUtils.isTextAreaElement(element))
430        moveTextAreaCursorDown(element, true);
431
432    return Promise.resolve();
433}
434
435function shiftLeft (element) {
436    if (domUtils.isTextEditableElement(element)) {
437        var startPos = textSelection.getSelectionStart(element);
438        var endPos   = textSelection.getSelectionEnd(element);
439
440        if (startPos === endPos || textSelection.hasInverseSelection(element))
441            textSelection.select(element, endPos, Math.max(startPos - 1, 0));
442        else
443            textSelection.select(element, startPos, Math.max(endPos - 1, 0));
444
445        updateTextAreaIndent(element);
446    }
447
448    return Promise.resolve();
449}
450
451function shiftRight (element) {
452    if (domUtils.isTextEditableElement(element)) {
453        var startPos = textSelection.getSelectionStart(element);
454        var endPos   = textSelection.getSelectionEnd(element);
455
456        if (startPos === endPos || !textSelection.hasInverseSelection(element))
457            textSelection.select(element, startPos, Math.min(endPos + 1, element.value.length));
458        else
459            textSelection.select(element, endPos, Math.min(startPos + 1, element.value.length));
460
461        updateTextAreaIndent(element);
462    }
463
464    return Promise.resolve();
465}
466
467function shiftHome (element) {
468    return home(element, true);
469}
470
471function shiftEnd (element) {
472    return end(element, true);
473}
474
475function enter (element) {
476    if (domUtils.isSelectElement(element))
477        selectElement.collapseOptionList();
478
479    //submit form on enter pressed
480    if (domUtils.isInputElement(element)) {
481        if (!browserUtils.isIE)
482            elementEditingWatcher.processElementChanging(element);
483
484        var form = domUtils.getParents(element, 'form')[0];
485
486        // NOTE: if a user presses enter when a form input is focused and the form has
487        // a submit button, the browser sends the click event to the submit button
488        if (form)
489            submitFormOnEnterPressInInput(form, element);
490    }
491    else if (domUtils.isTextAreaElement(element)) {
492        var startPos          = textSelection.getSelectionStart(element);
493        var valueBeforeCursor = element.value.substring(0, startPos);
494        var valueAfterCursor  = element.value.substring(startPos);
495        var newPosition       = startPos + 1;
496
497        setElementValue(element, valueBeforeCursor + String.fromCharCode(10) + valueAfterCursor);
498
499        textSelection.select(element, newPosition, newPosition);
500    }
501    //S173120
502    else if (element.tagName && domUtils.isAnchorElement(element))
503        eventSimulator.click(element);
504
505    return Promise.resolve();
506}
507
508function focusNextElement (element) {
509    return new Promise(resolve => {
510        if (domUtils.isSelectElement(element)) {
511            selectElement.collapseOptionList();
512            resolve();
513        }
514
515        var nextElement = domUtils.getNextFocusableElement(element);
516
517        if (!nextElement)
518            resolve();
519
520        focusBlurSandbox.focus(nextElement, () => {
521            if (domUtils.isTextEditableInput(nextElement))
522                textSelection.select(nextElement);
523
524            resolve();
525        });
526    });
527}
528
529function focusPrevElement (element) {
530    return new Promise(resolve => {
531        if (domUtils.isSelectElement(element)) {
532            selectElement.collapseOptionList();
533            resolve();
534        }
535
536        var prevElement = domUtils.getNextFocusableElement(element, true);
537
538        if (!prevElement)
539            resolve();
540
541        focusBlurSandbox.focus(prevElement, () => {
542            if (domUtils.isTextEditableInput(prevElement))
543                textSelection.select(prevElement);
544
545            resolve();
546        });
547    });
548}
549
550export default {
551    'ctrl+a':      selectAll,
552    'backspace':   backspace,
553    'delete':      del,
554    'left':        left,
555    'right':       right,
556    'up':          up,
557    'down':        down,
558    'shift+left':  shiftLeft,
559    'shift+right': shiftRight,
560    'shift+up':    shiftUp,
561    'shift+down':  shiftDown,
562    'shift+home':  shiftHome,
563    'shift+end':   shiftEnd,
564    'home':        home,
565    'end':         end,
566    'enter':       enter,
567    'tab':         focusNextElement,
568    'shift+tab':   focusPrevElement,
569    'esc':         esc
570};
571
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Testcafe on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)