Discover AI-native insights at Testμ Conference‘25

How to use filterFocusableElements method in Testcafe

Best JavaScript code snippet using testcafe

index.js

...3448        else if (browserUtils$9.isChrome)3449            filter = function (item) { return isRadioButtonElement(item) && !item.name; };3450        return filter;3451    }3452    function filterFocusableElements(elements, sourceElement, skipRadioGroups) {3453        if (!isRadioButtonElement(sourceElement))3454            return elements;3455        if (!skipRadioGroups && !sourceElement.name && !browserUtils$9.isChrome)3456            return [sourceElement];3457        var filterFn = getFocusableElementsFilter(sourceElement, skipRadioGroups);3458        if (filterFn)3459            elements = testCafeCore.arrayUtils.filter(elements, filterFn);3460        return elements;3461    }3462    function correctFocusableElement(elements, element, skipRadioGroups) {3463        var isNotCheckedRadioButtonElement = isRadioButtonElement(element) && element.name && !element.checked;3464        var checkedRadioButtonElementWithSameName = null;3465        if (skipRadioGroups && isNotCheckedRadioButtonElement) {3466            checkedRadioButtonElementWithSameName = testCafeCore.arrayUtils.find(elements, function (el) {3467                return isRadioButtonElement(el) && el.name === element.name && el.checked;3468            });3469        }3470        return checkedRadioButtonElementWithSameName || element;3471    }3472    function getNextFocusableElement(element, reverse, skipRadioGroups) {3473        var offset = reverse ? -1 : 1;3474        var allFocusable = testCafeCore.domUtils.getFocusableElements(findDocument(element), true);3475        allFocusable = filterFocusableElements(allFocusable, element, skipRadioGroups);3476        var isRadioInput = isRadioButtonElement(element);3477        var currentIndex = testCafeCore.arrayUtils.indexOf(allFocusable, element);3478        var isLastElementFocused = reverse ? currentIndex === 0 : currentIndex === allFocusable.length - 1;3479        if (isLastElementFocused)3480            return skipRadioGroups || !isRadioInput ? document.body : allFocusable[allFocusable.length - 1 - currentIndex];3481        if (reverse && currentIndex === -1)3482            return allFocusable[allFocusable.length - 1];3483        return correctFocusableElement(allFocusable, allFocusable[currentIndex + offset], skipRadioGroups);3484    }3485    function getKeyCode (char) {3486        if (isLetterKey(char))3487            return char.toUpperCase().charCodeAt(0);3488        var res = testCafeCore.KEY_MAPS.shiftMap[char] ? testCafeCore.KEY_MAPS.shiftMap[char].charCodeAt(0) : char.charCodeAt(0);3489        return testCafeCore.KEY_MAPS.symbolCharCodeToKeyCode[res] || res;...

dom.js

Source: dom.js

...83    parent = parent.shadowRoot || parent;84    if (isIframeElement(parent))85        parent = nativeMethods.contentDocumentGetter.call(parent);86    if (parent && (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE || parent.nodeType === Node.DOCUMENT_NODE)) {87        const elements = filterFocusableElements(parent);88        for (const el of elements) {89            const key = !sort || el.tabIndex <= 0 ? -1 : el.tabIndex;90            node.children[key] = node.children[key] || [];91            node.children[key].push(buildFocusableTree(el, sort));92        }93    }94    return node;95}96function filterFocusableElements (parent) {97    // NOTE: We don't take into account the case of embedded contentEditable98    // elements and specify the contentEditable attribute for focusable elements99    const allElements           = parent.querySelectorAll('*');100    const invisibleElements     = getInvisibleElements(allElements);101    const inputElementsRegExp   = /^(input|button|select|textarea)$/;...

utils.js

Source: utils.js

...106}107export function getNextFocusableElement (element, reverse, skipRadioGroups) {108    const offset     = reverse ? -1 : 1;109    let allFocusable = domUtils.getFocusableElements(findDocument(element), true);110    allFocusable = filterFocusableElements(allFocusable, element, skipRadioGroups);111    const isRadioInput         = isRadioButtonElement(element);112    const currentIndex         = arrayUtils.indexOf(allFocusable, element);113    const isLastElementFocused = reverse ? currentIndex === 0 : currentIndex === allFocusable.length - 1;114    if (isLastElementFocused)115        return skipRadioGroups || !isRadioInput ? document.body : allFocusable[allFocusable.length - 1 - currentIndex];116    if (reverse && currentIndex === -1)117        return allFocusable[allFocusable.length - 1];118    return correctFocusableElement(allFocusable, allFocusable[currentIndex + offset], skipRadioGroups);...

Using AI Code Generation

1import { filterFocusableElements } from 'testcafe';2test('My test', async t => {3    const elements = await filterFocusableElements(t);4    console.log(elements.length);5});6import { filterFocusableElements } from 'testcafe';7test('My test', async t => {8    const elements = await filterFocusableElements(t);9    console.log(elements.length);10});11import { filterFocusableElements } from 'testcafe';12test('My test', async t => {13    const elements = await filterFocusableElements(t);14    console.log(elements.length);15});16import { filterFocusableElements } from 'testcafe';17test('My test', async t => {18    const elements = await filterFocusableElements(t);19    console.log(elements.length);20});21import { filterFocusableElements } from 'testcafe';22test('My test', async t => {23    const elements = await filterFocusableElements(t);24    console.log(elements.length);25});26import { filterFocusableElements } from 'testcafe';

Using AI Code Generation

1import { Selector } from 'testcafe';2import { filterFocusableElements } from 'testcafe/lib/client-functions/selectors/focus-blur-tracker';3test('test', async t => {4    const element = Selector('#my-element');5    const focusableElements = filterFocusableElements(element());6    await t.expect(focusableElements.length).eql(2);7});8import { ClientFunction } from '../client-function';9import { domUtils } from '../deps/testcafe-core';10const filterFocusableElements = ClientFunction((el) => {11    const focusableElements = domUtils.getFocusableChildren(el);12    return focusableElements;13});14export { filterFocusableElements };

Using AI Code Generation

1import { Selector } from 'testcafe';2test('Check Focusable Elements', async t => {3        .click('#populate')4        .click('#submit-button')5        .expect(Selector('input').filterFocusableElements().count).eql(9);6});7import { Selector } from 'testcafe';8test('Check Focusable Elements', async t => {9        .click('#populate')10        .click('#submit-button')11        .expect(Selector('input').filterFocusableElements().count).eql(9);12});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My test', async t => {3    const select = Selector('select');4    const options = select.find('option');5    const focusedOptions = await options.filterFocusableElements();6    console.log(focusedOptions.length);7});

Using AI Code Generation

1import { ClientFunction } from 'testcafe';2const filterFocusableElements = ClientFunction(() => {3    return window['testcafe-testing-library'].filterFocusableElements;4});5test('test', async t => {6    const focusableElements = await filterFocusableElements();7    console.log(focusableElements);8});9import { ClientFunction } from 'testcafe';10const filterFocusableElements = ClientFunction(() => {11    return window['testcafe-testing-library'].filterFocusableElements;12});13test('test', async t => {14    const focusableElements = await filterFocusableElements({15    });16    console.log(focusableElements);17});

Using AI Code Generation

1import { Selector } from 'testcafe';2import { filterFocusableElements } from 'testcafe';3const selector = Selector('div');4const focusableElements = filterFocusableElements(selector);5import { Selector } from 'testcafe';6import { filterVisibleElements } from 'testcafe';7const selector = Selector('div');8const visibleElements = filterVisibleElements(selector);

Using AI Code Generation

1import { Selector } from 'testcafe';2import { filterFocusableElements } from 'testcafe-selector-filters';3const focusableElements = Selector(filterFocusableElements);4test('My test', async t => {5        .expect(focusableElements.count).eql(2)6        .expect(focusableElements.nth(0).value).eql('1')7        .expect(focusableElements.nth(1).value).eql('2');8});9import { Selector } from 'testcafe';10import { filterFocusableElements } from 'testcafe-selector-filters';11const focusableElements = Selector(filterFocusableElements);12test('My test', async t => {13        .expect(focusableElements.count).eql(2)14        .expect(focusableElements.nth(0).value).eql('1')15        .expect(focusableElements.nth(1).value).eql('2');16});17import { Selector } from 'testcafe';18import { filterFocusableElements } from 'testcafe-selector-filters';19const focusableElements = Selector(filterFocusableElements);

Blogs

Check out the latest blogs from LambdaTest on this topic:

Increasing Product Release Velocity by Debugging and Testing In Production

What is the key to achieving sustainable and dramatic speed gains for your business? Product velocity! It’s important to stay on top of changes in your quality metrics, and to modify your processes (if needed) so that they reflect current reality. The pace of delivery will increase when you foster simple, automated processes for building great software. The faster you push into production, the sooner you can learn and adapt. Monitoring your build and release pipeline is an important part of those efforts. It helps you design better software, which in turn leads to improved product velocity. Moving fast takes a lot of practice, a lot of hard work, and a toolkit that can help you achieve this!

The Evolution of Browser Automation: Christian Bromann [Testμ 2022]

Have you been curious about browser automation? Christian Bromann, Founding Engineer, Stateful Inc., is here to share the perils of information surrounding the topic with Manoj Kumar, VP of Developers Relation, hosting the session.

Automation Testing Tutorial: A Starter’s Guide With Example

Software testing is an integral part of any IT project. Testing the software more and more will ensure a better quality of your software. Now, how do you achieve it? Either you go with Manual Testing or Automation Testing.

How To Perform Modern Web Testing With TestCafe Using JavaScript And Selenium

Whether it is an application or web app, every software requires testing after development to ensure it does what we expect it to do. Software testing involves using manual or automated tools. Test automation tools are the best to use over manual tools because they increase software testing effectiveness, efficiency, and coverage.

2020 At LambdaTest: Our Year In Review

2020 has been a crazy year so far. It has been challenging for businesses and consumers alike and I wouldn’t blame you if you wanted to just forget this year and put it behind. After a year like 2020, we’re just as excited as you are to move on and ring in the new year.

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.