How to use _excludeInvisibleSymbolsFromSelection method in Testcafe

Best JavaScript code snippet using testcafe

index.js

Source:index.js

...3189    function _typeTextInChildTextNode(element, selection, text) {3190        var startNode = selection.startPos.node;3191        // NOTE: startNode could be moved or deleted on textInput event. Need ensure startNode.3192        if (!domUtils$7.isElementContainsNode(element, startNode)) {3193            selection = _excludeInvisibleSymbolsFromSelection(_getSelectionInElement(element));3194            startNode = selection.startPos.node;3195        }3196        var startOffset = selection.startPos.offset;3197        var endOffset = selection.endPos.offset;3198        var nodeValue = startNode.nodeValue;3199        var selectPosition = { node: startNode, offset: startOffset + text.length };3200        startNode.nodeValue = nodeValue.substring(0, startOffset) + text +3201            nodeValue.substring(endOffset, nodeValue.length);3202        textSelection$1.selectByNodesAndOffsets(selectPosition, selectPosition);3203    }3204    function _excludeInvisibleSymbolsFromSelection(selection) {3205        var startNode = selection.startPos.node;3206        var startOffset = selection.startPos.offset;3207        var endOffset = selection.endPos.offset;3208        var firstNonWhitespaceSymbolIndex = contentEditable$1.getFirstNonWhitespaceSymbolIndex(startNode.nodeValue);3209        var lastNonWhitespaceSymbolIndex = contentEditable$1.getLastNonWhitespaceSymbolIndex(startNode.nodeValue);3210        if (startOffset < firstNonWhitespaceSymbolIndex && startOffset !== 0) {3211            selection.startPos.offset = firstNonWhitespaceSymbolIndex;3212            selection.endPos.offset = endOffset + firstNonWhitespaceSymbolIndex - startOffset;3213        }3214        else if (endOffset > lastNonWhitespaceSymbolIndex && endOffset !== startNode.nodeValue.length) {3215            selection.startPos.offset = startNode.nodeValue.length;3216            selection.endPos.offset = endOffset + startNode.nodeValue.length - startOffset;3217        }3218        return selection;3219    }3220    // NOTE: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event3221    // The `beforeInput` event is supported only in Chrome-based browsers and Safari3222    // The order of events differs in Chrome and Safari:3223    // In Chrome: `beforeinput` occurs before `textInput`3224    // In Safari: `beforeinput` occurs after `textInput`3225    function simulateBeforeInput(element, text, needSimulate) {3226        if (needSimulate)3227            return eventSimulator$9.beforeInput(element, text);3228        return true;3229    }3230    // NOTE: Typing can be prevented in Chrome/Edge but can not be prevented in IE11 or Firefox3231    // Firefox does not support TextInput event3232    // Safari supports the TextInput event but has a bug: e.data is added to the node value.3233    // So in Safari we need to call preventDefault in the last textInput handler but not prevent the Input event3234    function simulateTextInput(element, text) {3235        var forceInputInSafari;3236        function onSafariTextInput(e) {3237            e.preventDefault();3238            forceInputInSafari = true;3239        }3240        function onSafariPreventTextInput(e) {3241            if (e.type === 'textInput')3242                forceInputInSafari = false;3243        }3244        if (browserUtils$8.isSafari) {3245            listeners$2.addInternalEventListener(window, ['textInput'], onSafariTextInput);3246            eventSandbox.on(eventSandbox.EVENT_PREVENTED_EVENT, onSafariPreventTextInput);3247        }3248        var isInputEventRequired = browserUtils$8.isFirefox || eventSimulator$9.textInput(element, text) || forceInputInSafari;3249        if (browserUtils$8.isSafari) {3250            listeners$2.removeInternalEventListener(window, ['textInput'], onSafariTextInput);3251            eventSandbox.off(eventSandbox.EVENT_PREVENTED_EVENT, onSafariPreventTextInput);3252        }3253        return isInputEventRequired || browserUtils$8.isIE11;3254    }3255    function _typeTextToContentEditable(element, text) {3256        var currentSelection = _getSelectionInElement(element);3257        var startNode = currentSelection.startPos.node;3258        var endNode = currentSelection.endPos.node;3259        var needProcessInput = true;3260        var needRaiseInputEvent = true;3261        var textInputData = text;3262        text = text.replace(WHITE_SPACES_RE, String.fromCharCode(160));3263        // NOTE: some browsers raise the 'input' event after the element3264        // content is changed, but in others we should do it manually.3265        var onInput = function () {3266            needRaiseInputEvent = false;3267        };3268        // NOTE: IE11 raises the 'textinput' event many times after the element changed.3269        // The 'textinput' should be called only once3270        function onTextInput(event, dispatched, preventEvent) {3271            preventEvent();3272        }3273        // NOTE: IE11 does not raise input event when type to contenteditable3274        var beforeContentChanged = function () {3275            needProcessInput = simulateTextInput(element, textInputData);3276            needRaiseInputEvent = needProcessInput && !browserUtils$8.isIE11;3277            listeners$2.addInternalEventListener(window, ['input'], onInput);3278            listeners$2.addInternalEventListener(window, ['textinput'], onTextInput);3279        };3280        var afterContentChanged = function () {3281            nextTick()3282                .then(function () {3283                if (needRaiseInputEvent)3284                    eventSimulator$9.input(element);3285                listeners$2.removeInternalEventListener(window, ['input'], onInput);3286                listeners$2.removeInternalEventListener(window, ['textinput'], onTextInput);3287            });3288        };3289        if (!startNode || !endNode || !domUtils$7.isContentEditableElement(startNode) ||3290            !domUtils$7.isContentEditableElement(endNode))3291            return;3292        if (!domUtils$7.isTheSameNode(startNode, endNode)) {3293            textSelection$1.deleteSelectionContents(element);3294            // NOTE: after deleting the selection contents we should refresh the stored startNode because3295            // contentEditable element's content could change and we can no longer find parent elements3296            // of the nodes. In MSEdge, 'parentElement' for the deleted element isn't undefined3297            currentSelection = _updateSelectionAfterDeletionContent(element, currentSelection);3298            startNode = currentSelection.startPos.node;3299        }3300        if (!startNode || !domUtils$7.isContentEditableElement(startNode) || !domUtils$7.isRenderedNode(startNode))3301            return;3302        if (!simulateBeforeInput(element, text, browserUtils$8.isChrome))3303            return;3304        beforeContentChanged();3305        if (needProcessInput)3306            needProcessInput = simulateBeforeInput(element, text, browserUtils$8.isSafari);3307        if (needProcessInput) {3308            // NOTE: we can type only to the text nodes; for nodes with the 'element-node' type, we use a special behavior3309            if (domUtils$7.isElementNode(startNode))3310                _typeTextInElementNode(startNode, text);3311            else3312                _typeTextInChildTextNode(element, _excludeInvisibleSymbolsFromSelection(currentSelection), text);3313        }3314        afterContentChanged();3315    }3316    function _typeTextToTextEditable(element, text) {3317        var elementValue = domUtils$7.getElementValue(element);3318        var textLength = text.length;3319        var startSelection = textSelection$1.getSelectionStart(element);3320        var endSelection = textSelection$1.getSelectionEnd(element);3321        var isInputTypeNumber = domUtils$7.isInputElement(element) && element.type === 'number';3322        if (!simulateBeforeInput(element, text, browserUtils$8.isChrome))3323            return;3324        var needProcessInput = simulateTextInput(element, text);3325        if (needProcessInput)3326            needProcessInput = simulateBeforeInput(element, text, browserUtils$8.isSafari);...

type-text.js

Source:type-text.js

...56function _typeTextInChildTextNode (element, selection, text) {57    let startNode = selection.startPos.node;58    // NOTE: startNode could be moved or deleted on textInput event. Need ensure startNode.59    if (!domUtils.isElementContainsNode(element, startNode)) {60        selection = _excludeInvisibleSymbolsFromSelection(_getSelectionInElement(element));61        startNode = selection.startPos.node;62    }63    const startOffset    = selection.startPos.offset;64    const endOffset      = selection.endPos.offset;65    const nodeValue      = startNode.nodeValue;66    const selectPosition = { node: startNode, offset: startOffset + text.length };67    startNode.nodeValue = nodeValue.substring(0, startOffset) + text +68                          nodeValue.substring(endOffset, nodeValue.length);69    textSelection.selectByNodesAndOffsets(selectPosition, selectPosition);70}71function _excludeInvisibleSymbolsFromSelection (selection) {72    const startNode   = selection.startPos.node;73    const startOffset = selection.startPos.offset;74    const endOffset   = selection.endPos.offset;75    const firstNonWhitespaceSymbolIndex = contentEditable.getFirstNonWhitespaceSymbolIndex(startNode.nodeValue);76    const lastNonWhitespaceSymbolIndex  = contentEditable.getLastNonWhitespaceSymbolIndex(startNode.nodeValue);77    if (startOffset < firstNonWhitespaceSymbolIndex && startOffset !== 0) {78        selection.startPos.offset = firstNonWhitespaceSymbolIndex;79        selection.endPos.offset   = endOffset + firstNonWhitespaceSymbolIndex - startOffset;80    }81    else if (endOffset > lastNonWhitespaceSymbolIndex && endOffset !== startNode.nodeValue.length) {82        selection.startPos.offset = startNode.nodeValue.length;83        selection.endPos.offset   = endOffset + startNode.nodeValue.length - startOffset;84    }85    return selection;86}87// NOTE: Typing can be prevented in Chrome/Edge but can not be prevented in IE11 or Firefox88// Firefox does not support TextInput event89// Safari supports the TextInput event but has a bug: e.data is added to the node value.90// So in Safari we need to call preventDefault in the last textInput handler but not prevent the Input event91function simulateTextInput (element, text) {92    let forceInputInSafari;93    function onSafariTextInput (e) {94        e.preventDefault();95        forceInputInSafari = true;96    }97    function onSafariPreventTextInput (e) {98        if (e.type === 'textInput')99            forceInputInSafari = false;100    }101    if (browserUtils.isSafari) {102        listeners.addInternalEventListener(window, ['textInput'], onSafariTextInput);103        eventSandbox.on(eventSandbox.EVENT_PREVENTED_EVENT, onSafariPreventTextInput);104    }105    const isInputEventRequired = browserUtils.isFirefox || eventSimulator.textInput(element, text) || forceInputInSafari;106    if (browserUtils.isSafari) {107        listeners.removeInternalEventListener(window, ['textInput'], onSafariTextInput);108        eventSandbox.off(eventSandbox.EVENT_PREVENTED_EVENT, onSafariPreventTextInput);109    }110    return isInputEventRequired || browserUtils.isIE11;111}112function _typeTextToContentEditable (element, text) {113    let currentSelection    = _getSelectionInElement(element);114    let startNode           = currentSelection.startPos.node;115    const endNode           = currentSelection.endPos.node;116    let needProcessInput    = true;117    let needRaiseInputEvent = true;118    const textInputData     = text;119    text = text.replace(WHITE_SPACES_RE, String.fromCharCode(160));120    // NOTE: some browsers raise the 'input' event after the element121    // content is changed, but in others we should do it manually.122    const onInput = () => {123        needRaiseInputEvent = false;124    };125    // NOTE: IE11 raises the 'textinput' event many times after the element changed.126    // The 'textinput' should be called only once127    function onTextInput (event, dispatched, preventEvent) {128        preventEvent();129    }130    // NOTE: IE11 does not raise input event when type to contenteditable131    const beforeContentChanged = () => {132        needProcessInput    = simulateTextInput(element, textInputData);133        needRaiseInputEvent = needProcessInput && !browserUtils.isIE11;134        listeners.addInternalEventListener(window, ['input'], onInput);135        listeners.addInternalEventListener(window, ['textinput'], onTextInput);136    };137    const afterContentChanged = () => {138        nextTick()139            .then(() => {140                if (needRaiseInputEvent)141                    eventSimulator.input(element);142                listeners.removeInternalEventListener(window, ['input'], onInput);143                listeners.removeInternalEventListener(window, ['textinput'], onTextInput);144            });145    };146    if (!startNode || !endNode || !domUtils.isContentEditableElement(startNode) ||147        !domUtils.isContentEditableElement(endNode))148        return;149    if (!domUtils.isTheSameNode(startNode, endNode)) {150        textSelection.deleteSelectionContents(element);151        // NOTE: after deleting the selection contents we should refresh the stored startNode because152        // contentEditable element's content could change and we can no longer find parent elements153        // of the nodes. In MSEdge, 'parentElement' for the deleted element isn't undefined154        currentSelection = _updateSelectionAfterDeletionContent(element, currentSelection);155        startNode        = currentSelection.startPos.node;156    }157    if (!startNode || !domUtils.isContentEditableElement(startNode) || !domUtils.isRenderedNode(startNode))158        return;159    beforeContentChanged();160    if (needProcessInput) {161        // NOTE: we can type only to the text nodes; for nodes with the 'element-node' type, we use a special behavior162        if (domUtils.isElementNode(startNode))163            _typeTextInElementNode(startNode, text);164        else165            _typeTextInChildTextNode(element, _excludeInvisibleSymbolsFromSelection(currentSelection), text);166    }167    afterContentChanged();168}169function _typeTextToTextEditable (element, text) {170    const elementValue      = domUtils.getElementValue(element);171    const textLength        = text.length;172    let startSelection    = textSelection.getSelectionStart(element);173    let endSelection      = textSelection.getSelectionEnd(element);174    const isInputTypeNumber = domUtils.isInputElement(element) && element.type === 'number';175    const needProcessInput  = simulateTextInput(element, text);176    if (!needProcessInput)177        return;178    // NOTE: the 'maxlength' attribute doesn't work in all browsers. IE still doesn't support input with the 'number' type179    let elementMaxLength = !browserUtils.isIE && isInputTypeNumber ? null : parseInt(element.maxLength, 10);...

type-char.js

Source:type-char.js

...98        _typeCharInElementNode(startNode, text);99        afterContentChanged();100        return;101    }102    currentSelection = _excludeInvisibleSymbolsFromSelection(currentSelection);103    startNode        = currentSelection.startPos.node;104    var startOffset    = currentSelection.startPos.offset;105    var endOffset      = currentSelection.endPos.offset;106    var nodeValue      = startNode.nodeValue;107    var selectPosition = { node: startNode, offset: startOffset + text.length };108    startNode.nodeValue = nodeValue.substring(0, startOffset) + text +109                          nodeValue.substring(endOffset, nodeValue.length);110    textSelection.selectByNodesAndOffsets(selectPosition, selectPosition);111    afterContentChanged();112}113function _typeCharToTextEditable (element, text) {114    var elementValue      = element.value;115    var textLength        = text.length;116    var startSelection    = textSelection.getSelectionStart(element);...

Using AI Code Generation

1import { Selector } from 'testcafe';2import { ClientFunction } from 'testcafe';3import { t } from 'testcafe';4test('My first test', async t => {5        .typeText('#developer-name', 'John Smith')6        .click('#macos')7        .click('#submit-button');8    const articleHeader = await Selector('.result-content').find('h1');9    let headerText = await articleHeader.innerText;10});11test('My second test', async t => {12        .click('#macos')13        .click('#submit-button');14    const articleHeader = await Selector('.result-content').find('h1');15    let headerText = await articleHeader.innerText;16});17test('My third test', async t => {18        .typeText('#developer-name', 'John Smith')19        .click('#submit-button');20    const articleHeader = await Selector('.result-content').find('h1');21    let headerText = await articleHeader.innerText;22});23test('My fourth test', async t => {24        .typeText('#developer-name', 'John Smith')25        .click('#submit-button');26    const articleHeader = await Selector('.result-content').find('h1');27    let headerText = await articleHeader.innerText;28});29test('My fifth test', async t => {30        .typeText('#developer-name', 'John Smith')31        .click('#submit-button');32    const articleHeader = await Selector('.result-content').find('h1');33    let headerText = await articleHeader.innerText;34});35test('My sixth test', async t => {36        .typeText('#developer-name', 'John Smith')37        .click('#submit-button');38    const articleHeader = await Selector('.result-content').find('h1');39    let headerText = await articleHeader.innerText;40});41test('My seventh test', async t => {42        .typeText('#developer-name', 'John Smith

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3    const developerNameInput = Selector('#developer-name');4    const submitButton = Selector('#submit-button');5        .typeText(developerNameInput, 'Peter')6        .click(submitButton);7});8const developerNameInput = Selector('#developer-name')._excludeInvisibleSymbolsFromSelection();9const submitButton = Selector('#submit-button')._excludeInvisibleSymbolsFromSelection();10    .typeText(developerNameInput, 'Peter')11    .click(submitButton);

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3    const developerNameInput = Selector('#developer-name');4    const populateButton = Selector('#populate');5    const submitButton = Selector('#submit-button');6        .click(populateButton)7        .click(submitButton)8        .expect(developerNameInput.value).eql('Peter Parker')9        .expect(developerNameInput.value).eql('Peter Parker', 'input value is correct');10});11import { Selector } from 'testcafe';12test('My first test', async t => {13    const developerNameInput = Selector('#developer-name');14    const populateButton = Selector('#populate');15    const submitButton = Selector('#submit-button');16        .click(populateButton)17        .click(submitButton)18        .expect(developerNameInput.value).eql('Peter Parker')19        .expect(developerNameInput.value).eql('Peter Parker', 'input value is correct');20});21import { Selector } from 'testcafe';22test('My first test', async t => {23    const developerNameInput = Selector('#developer-name');24    const populateButton = Selector('#populate');25    const submitButton = Selector('#submit-button');26        .click(populateButton)27        .click(submitButton)28        .expect(developerNameInput.value).eql('Peter Parker')29        .expect(developerNameInput.value).eql('Peter Parker', 'input value is correct');30});31import { Selector } from 'testcafe';

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My test', async t => {3        .click(Selector('#tried-test-cafe'));4});5import { ClientFunction } from 'testcafe';6export const excludeInvisibleSymbolsFromSelection = ClientFunction(() => {7    const selection = window.getSelection();8        ._excludeInvisibleSymbolsFromSelection(selection);9});

Using AI Code Generation

1const { Selector } = require('testcafe');2const { ClientFunction } = require('testcafe');3const { t } = require('testcafe');4const { Role } = require('testcafe');5const { ReactSelector } = require('testcafe-react-selectors');6const { waitForReact } = require('testcafe-react-selectors');7const { ReactSelector as $ } = require('testcafe-react-selectors');8    .page(url);9test('Test', async t => {10        .typeText('body', 'Hello, World!')11        .click('#myButton')12        .expect(Selector('#someElement').visible).ok();13});14const { Selector } = require('testcafe');15const { ClientFunction } = require('testcafe');16const { t } = require('testcafe');17const { Role } = require('testcafe');18const { ReactSelector } = require('testcafe-react-selectors');19const { waitForReact } = require('testcafe-react-selectors');20const { ReactSelector as $ } = require('testcafe-react-selectors');21    .page(url);22test('Test', async t => {23        .typeText('body', 'Hello, World!')24        .click('#myButton')25        .expect(Selector('#someElement').visible).ok();26});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3        .typeText('#developer-name', 'John Smith')4        .click('#submit-button');5    const articleHeader = await Selector('.result-content').find('h1');6    let headerText = await articleHeader.innerText;7    console.log(headerText);8});9    .selectText(Selector('#developer-name').value);10    .selectText('#developer-name');11    .selectText(Selector('#developer-name').value);

Using AI Code Generation

1const { Selector } = require('testcafe');2const selector = Selector('input').with({ visibilityCheck: true });3test('Test', async t => {4        .click(selector)5        .pressKey('ctrl+a')6        .pressKey('delete');7});

Using AI Code Generation

1export default class SelectorBuilder {2    _excludeInvisibleSymbolsFromSelection (str) {3        return str.replace(/[^ -~]/g, '');4    }5    _getSymbolInViewport (str, position) {6        const symbol = str[position];7        if (symbol === ' ')8            return null;9        const rectList = this._getSymbolRectList(str, position);10        return rectList.some(rect => this._isElementInViewport(rect)) ? symbol : null;11    }12    export function init () {13        SelectorBuilder.prototype._excludeInvisibleSymbolsFromSelection = function (str) {14            return str.replace(/[^ -~]/g, '');15        };16        SelectorBuilder.prototype._getSymbolInViewport = function (str, position) {17            const symbol = str[position];18            if (symbol === ' ')19                return null;20            const rectList = this._getSymbolRectList(str, position);21            return rectList.some(rect => this._isElementInViewport(rect)) ? symbol : null;22        };23    }24}25export function init () {26    SelectorBuilder.prototype._excludeInvisibleSymbolsFromSelection = function (str) {27        return str.replace(/[^ -~]/g, '');28    };29    SelectorBuilder.prototype._getSymbolInViewport = function (str, position) {30        const symbol = str[position];31        if (symbol === ' ')32            return null;33        const rectList = this._getSymbolRectList(str, position);34        return rectList.some(rect => this._isElementInViewport(rect)) ? symbol : null;35    };36}37function select (el, startPos, endPos, document) {38    const text = getTextContent(el);39    startPos = startPos < 0 ? 0 : startPos;40    endPos   = endPos < 0 ? 0 : endPos;41    startPos = startPos > text.length ? text.length : startPos;42    endPos   = endPos > text.length ? text.length : endPos;43    if (browserUtils.isWebKit)44        text = text.replace(/\u00a0/g

Using AI Code Generation

1_selectSymbol: function (selection) {2},3_excludeInvisibleSymbolsFromSelection: function (selection) {4    return selection;5}6_selectSymbol: function (selection) {7},8_excludeInvisibleSymbolsFromSelection: function (selection) {9    return selection;10}

Using AI Code Generation

1const visibleSymbols = await Selector('div')._excludeInvisibleSymbolsFromSelection('test');2await t.expect(visibleSymbols).eql('test');3SelectorBuilder.prototype._excludeInvisibleSymbolsFromSelection = function (text) {4    return this.addCustomDOMProperties({5    }, (node, text) => {6        return node.textContent.replace(/\s/g, '') === text.replace(/\s/g, '');7    });8};9SelectorBuilder.prototype._excludeInvisibleSymbolsFromSelection = function (text) {10    return this.addCustomDOMProperties({11    }, (node, text) => {12        return node.textContent.replace(/\s/g, '') === text.replace(/\s/g, '');13    });14};15SelectorBuilder.prototype._excludeInvisibleSymbolsFromSelection = function (text) {16    return this.addCustomDOMProperties({17    }, (node, text) => {18        return node.textContent.replace(/\s/g, '') === text.replace(/\s/g, '');19    });20};21SelectorBuilder.prototype._excludeInvisibleSymbolsFromSelection = function (text) {22    return this.addCustomDOMProperties({23    }, (node, text) => {24        return node.textContent.replace(/\s/g, '') === text.replace(/\s/g, '');25    });26};

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.