KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use buildFocusableTree method in Testcafe

Best JavaScript code snippet using testcafe

dom.js

Source:dom.js

...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)$/;102    const focusableElements     = [];103    let element  = null;104    let tagName  = null;105    let tabIndex = null;106    let needPush = false;107    for (let i = 0; i < allElements.length; i++) {108        element  = allElements[i];109        tagName  = getTagName(element);110        tabIndex = getTabIndexAttributeIntValue(element);111        needPush = false;112        if (!canFocus(element, parent, tabIndex))113            continue;114        if (inputElementsRegExp.test(tagName))115            needPush = true;116        else if (element.shadowRoot)117            needPush = true;118        else if (isIframeElement(element))119            needPush = true;120        else if (isAnchorElement(element) && element.hasAttribute('href'))121            needPush = element.getAttribute('href') !== '' || !browserUtils.isIE || tabIndex !== null;122        const contentEditableAttr = element.getAttribute('contenteditable');123        if (contentEditableAttr === '' || contentEditableAttr === 'true')124            needPush = true;125        if (tabIndex !== null)126            needPush = true;127        if (needPush)128            focusableElements.push(element);129    }130    //NOTE: remove children of invisible elements131    return arrayUtils.filter(focusableElements, el => !containsElement(invisibleElements, el));132}133function flattenFocusableTree (node) {134    const result = [];135    if (!node.skip && node.el.nodeType !== Node.DOCUMENT_NODE && !isIframeElement(node.el))136        result.push(node.el);137    for (const prop in node.children) {138        for (const childNode of node.children[prop])139            result.push(...flattenFocusableTree(childNode));140    }141    return result;142}143export function getFocusableElements (doc, sort = false) {144    const root = buildFocusableTree(doc, sort);145    return flattenFocusableTree(root);146}147function getInvisibleElements (elements) {148    const invisibleElements = [];149    for (let i = 0; i < elements.length; i++) {150        if (getElementStyleProperty(elements[i], 'display') === 'none')151            invisibleElements.push(elements[i]);152    }153    return invisibleElements;154}155export function getTabIndexAttributeIntValue (el) {156    let tabIndex = nativeMethods.getAttribute.call(el, 'tabindex');157    if (tabIndex !== null) {158        tabIndex = parseInt(tabIndex, 10);...

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    const focusableElements = await Selector('body').buildFocusableTree();7    const visibleElements = await Selector('body').buildVisibleTree();8});9import {Selector} from 'testcafe';10test('My first test', async t => {11        .typeText('#developer-name', 'John Smith')12        .click('#submit-button');13    const articleHeader = await Selector('.result-content').find('h1');14    const focusableElements = await Selector('body').buildFocusableTree();15    const visibleElements = await Selector('body').buildVisibleTree();16});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3    const nameInput = Selector('#developer-name');4    const submitButton = Selector('#submit-button');5    const focusableTree = buildFocusableTree();6        .typeText(nameInput, 'Peter')7        .click(submitButton)8        .expect(Selector('#article-header').innerText).eql('Thank you, Peter!');9});10import { ClientFunction } from 'testcafe';11export default function buildFocusableTree() {12    return ClientFunction(() => {13            'input:not([disabled]):not([type=hidden]):not([aria-hidden])',14            'select:not([disabled]):not([aria-hidden])',15            'textarea:not([disabled]):not([aria-hidden])',16            'button:not([disabled]):not([aria-hidden])',17            '[tabindex]:not([tabindex^="-"])'18        ];19        const getFocusableElements = (container) => {20            const elements = container.querySelectorAll(focusableElements.join(','));21            const filteredElements = Array.prototype.filter.call(elements, (element) => {22                return !element.disabled && element.getAttribute('aria-hidden') !== 'true';23            });24            return filteredElements;25        };26        const buildTree = (container) => {27            const focusableElements = getFocusableElements(container);28            return Array.prototype.map.call(focusableElements, (element) => {29                if (element.tagName === 'IFRAME') {30                    const iframeDocument = element.contentDocument;31                    const iframeWindow = element.contentWindow;32                    return {33                        children: buildTree(iframeDocument || iframeWindow)34                    };35                }36                return {

Using AI Code Generation

1import { Selector } from 'testcafe';2import { ClientFunction } from 'testcafe';3import { buildFocusableTree } from 'testcafe-focus-visible';4const getFocusableTree = ClientFunction(() => {5    return buildFocusableTree();6});7test('Getting focusable tree', async t => {8    const focusableTree = await getFocusableTree();9    console.log(focusableTree);10});11import { Selector } from 'testcafe';12import { ClientFunction } from 'testcafe';13const getFocusableTree = ClientFunction(() => {14    return buildFocusableTree();15});16test('Getting focusable tree', async t => {17    const focusableTree = await getFocusableTree();18    console.log(focusableTree);19});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3    const body = Selector('body');4    const tree = await body().buildFocusableTree();5    console.log(tree);6});7If I add the below code before the console.log(tree) statement, then the test runs fine:8await t.expect(body().visible).ok();9const element = Selector('#elementId');10await t.click(element).expect(element.visible).ok();11Your name to display (optional):12Your name to display (optional):

Using AI Code Generation

1import { Selector } from 'testcafe';2const iframe = Selector('#iframe').with({ boundTestRun: testController });3const iframeBody = Selector('body').with({ boundTestRun: testController, visibilityCheck: true }).inside(iframe);4const focusableElements = Selector(buildFocusableTree).with({ boundTestRun: testController, visibilityCheck: true }).inside(iframeBody);5const firstFocusableElement = focusableElements.nth(0);6test('My test', async t => {7        .switchToIframe(iframe)8        .click(firstFocusableElement)9        .expect(firstFocusableElement.focused).ok();10});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My Test', async t => {3    const body = Selector('body');4    const focusableTree = await body.buildFocusableTree();5    console.log(focusableTree);6});

Using AI Code Generation

1import { buildFocusableTree } from 'testcafe';2const tree = buildFocusableTree(document.body);3const tree = buildFocusableTree(document.body);4import { buildFocusableTree } from 'testcafe';5const tree = buildFocusableTree(document.body);6const tree = buildFocusableTree(document.body);7import { buildFocusableTree } from 'testcafe';8const tree = buildFocusableTree(document.body);9const tree = buildFocusableTree(document.body);10import { buildFocusableTree } from 'testcafe';11const tree = buildFocusableTree(document.body);12const tree = buildFocusableTree(document.body);13import { buildFocusableTree } from 'testcafe';14const tree = buildFocusableTree(document.body);15const tree = buildFocusableTree(document.body);16import { buildFocusableTree } from 'testcafe';17const tree = buildFocusableTree(document.body);18const tree = buildFocusableTree(document.body);19import { buildFocusableTree } from 'testcafe';20const tree = buildFocusableTree(document.body);21const tree = buildFocusableTree(document.body);22import { buildFocusableTree } from 'testcafe';23const tree = buildFocusableTree(document.body);

Using AI Code Generation

1import { Selector } from 'testcafe';2const iframe = Selector('#iframe').with({ boundTestRun: testController });3const iframeDocument = iframe.find('iframe').contentDocument;4const iframeBody = iframeDocument.find('body');5const iframeBodyContent = iframeBody.textContent;6test('Iframe Test', async t => {7        .click(iframe)8        .expect(iframeBodyContent).contains('Hello, World!');9});10import { Selector } from 'testcafe';11const iframe = Selector('#iframe').with({ boundTestRun: testController });12const iframeDocument = iframe.find('iframe').contentDocument;13const iframeBody = iframeDocument.find('body');14const iframeBodyContent = iframeBody.textContent;15test('Iframe Test', async t => {16        .click(iframe)17        .expect(iframeBodyContent).contains('Hello, World!');18});19import { Selector } from 'testcafe';20const iframe = Selector('#iframe').with({ boundTestRun: testController });21const iframeDocument = iframe.find('iframe').contentDocument;22const iframeBody = iframeDocument.find('body');23const iframeBodyContent = iframeBody.textContent;24test('Iframe Test', async t => {25        .click(iframe)26        .expect(iframeBodyContent).contains('Hello, World!');27});28import { Selector } from 'testcafe';29const iframe = Selector('#iframe').with({ boundTestRun: testController });30const iframeDocument = iframe.find('iframe').contentDocument;31const iframeBody = iframeDocument.find('body');32const iframeBodyContent = iframeBody.textContent;33test('Iframe Test', async t => {34        .click(iframe)35        .expect(iframeBodyContent).contains('Hello, World!');36});37import { Selector } from 'testcafe';38const iframe = Selector('#iframe').with({ boundTestRun: testController });

Using AI Code Generation

1import { Selector } from 'testcafe';2const buildFocusableTree = require('testcafe-focus-visible/src/buildFocusableTree');3test('Focus-visible', async t => {4        .expect(Selector('body').focused).ok()5        .pressKey('tab')6        .expect(Selector('body').focused).notOk()7        .expect(Selector('a').focused).ok()8        .pressKey('tab')9        .expect(Selector('a').focused).notOk()10        .expect(Selector('button').focused).ok()11        .pressKey('tab')12        .expect(Selector('button').focused).notOk()13        .expect(Selector('input').focused).ok()14        .pressKey('tab')15        .expect(Selector('input').focused).notOk()16        .expect(Selector('textarea').focused).ok()17        .pressKey('tab')18        .expect(Selector('textarea').focused).notOk()19        .expect(Selector('select').focused).ok()20        .pressKey('tab')21        .expect(Selector('select').focused).notOk()22        .expect(Selector('option').focused).ok()23        .pressKey('tab')24        .expect(Selector('option').focused).notOk()25        .expect(Selector('iframe').focused).ok()26        .pressKey('tab')27        .expect(Selector('iframe').focused).notOk()28        .expect(Selector('object').focused).ok()29        .pressKey('tab')30        .expect(Selector('object').focused).notOk()31        .expect(Selector('embed').focused).ok()32        .pressKey('tab')33        .expect(Selector('embed').focused).notOk()34        .expect(Selector('video').focused).ok()35        .pressKey('tab')36        .expect(Selector('video').focused).notOk()37        .expect(Selector('audio').focused).ok()38        .pressKey('tab')39        .expect(Selector('audio').focused).notOk()40        .expect(Selector('img').focused).ok()41        .pressKey('tab')42        .expect(Selector('img').focused).notOk()43        .expect(Selector('details').focused).ok()44        .pressKey('tab')45        .expect(

Using AI Code Generation

1import { Selector } from 'testcafe';2const iframe = Selector('iframe').withAttribute('id', 'iframe');3const iframeBody = Selector('body').with({ boundTestRun: iframe });4const iframeSelector = Selector('iframe').with({ boundTestRun: iframe });5const iframeBodySelector = Selector('body').with({ boundTestRun: iframe });6const iframeButton = Selector('button').with({ boundTestRun: iframe });7const iframeInput = Selector('input').with({ boundTestRun: iframe });8const iframeSelect = Selector('select').with({ boundTestRun: iframe });9const iframeOption = Selector('option').with({ boundTestRun: iframe });10const iframeCheckbox = Selector('input[type="checkbox"]').with({ boundTestRun: iframe });11const iframeRadio = Selector('input[type="radio"]').with({ boundTestRun: iframe });12test('My first test', async t => {13        .switchToIframe(iframe)14        .click(iframeButton)15        .typeText(iframeInput, 'Hello world')16        .click(iframeCheckbox)17        .click(iframeRadio)18        .click(iframeOption)19        .click(iframeSelect)20        .expect(iframeBody.innerText).contains('Hello');21});

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.