testing-library / react-testing-library

🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
https://testing-library.com/react
MIT License
18.93k stars 1.1k forks source link

byText not finding element #1355

Open RedX2501 opened 2 weeks ago

RedX2501 commented 2 weeks ago

Relevant code or config:

I'm tiiyng to find a menu item in a react application by it's text.

The text I see is Eth SockCon (60) but it cannot be found found by getByText or role and name.

As can be seen below fetching all treeitem returns the element I'm expecting to see (output 43) but when trying to fetch by that text (output 51) it cannot find the element.

The generated html can be seen in dump 42.

To see what is even found I created the following setup to just dump the information:

            console.log(3);
            await screen.queryByRole("treeitem", { name: "Eth SockCon (60)" }).then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));
            console.log(4);
            await screen.queryByRole("treeitem", { name: "Eth SockCon" }).then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));
            console.log(41);
            await screen.queryByRole("treeitem", { name: "(60)" }).then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));
            console.log(42);
            await screen.queryAllByRole("treeitem").then(async (results) => {var tasks = results?.map( async (result) => result.getHTML()); var text = await Promise.all(tasks); console.log(text)}).catch((e) => console.log(e));
            console.log(43);
            await screen.queryAllByRole("treeitem").then(async (results) => {var tasks = results?.map( async (result) => result.getText()); var text = await Promise.all(tasks); console.log(text)}).catch((e) => console.log(e));
            console.log(5);
            await screen.queryByText(/^Eth SockCon/).then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));
            console.log(51);
            await screen.queryByText("Eth SockCon (60)").then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));
            console.log(6);
            await screen.queryByText(/^Eth SockCon/).then(async (result) => console.log(await result?.parentElement().getHTML())).catch((e) => console.log(e));
            console.log(7);
            await screen.queryByText(/^Eth SockCon/).then(async (result) => console.log(await result?.parentElement().getText())).catch((e) => console.log(e));
            console.log(8);
            await screen.queryByText(/^Eth SockCon \(60\)/).then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));
            console.log(9);
            await screen.queryByText(/\(60\)/).then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));
            console.log(10);
            await screen.queryByText(/ \(60\)/).then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));
            console.log(11);
            await screen.queryByText("(60)").then(async (result) => console.log(await result?.getHTML())).catch((e) => console.log(e));

which created the following output:

[0-0] 3
[0-0] undefined
[0-0] 4
[0-0] undefined
[0-0] 41
[0-0] undefined
[0-0] 42
[0-0] [
[0-0]   '<li class="MuiTreeItem-root css-10tvh9g" role="treeitem" id=":r2:-1" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M478-226q-49-32-104-49t-114-17q-28 0-55 3.5T152-276q-22 8-41-6t-19-38v-356q0-16 9-28.5t23-17.5q32-13 66.5-19.5T260-748q59 0 114 19t106 49v420q50-32 106.5-46T700-320q32 0 56.5 3t53.5 11q11 3 20.5.5T840-322v-400q3 0 5.5 1t4.5 3q9 5 13.5 14t4.5 
20v362q0 24-20.5 37.5T802-278q-25-8-50.5-11t-51.5-3q-60 0-117 15.5T478-226Zm82-134v-328l200-200v348L560-360Zm-108 87v-391q-45-26-93-41t-99-15q-37 0-67.5 6.5T139-698q-8 3-13.5 8.5T120-676v356q0 14 9.5 16.5T150-305q21-7 47.5-11t62.5-4q59 0 110 14.5t82 32.5Zm0 0v-391 391Z"></path></svg><div class="MuiBox-root css-15fzge">Overview </div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" id=":r2:-2" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M194-806v273-2.5V-154v-652 144-144Zm112.5 374h157.554q4.446-6 9.597-11.548T485.5-454h-179v22Zm0 163H426q0-5.5-.238-11.25-.237-5.75-.254-10.75H306.5v22Zm-80.627 137q-22.117 0-37.995-15.878Q172-163.756 172-185.78v-588.44q0-22.024 15.878-37.902T226-828h326l156 155.5v143q-4.873-.559-11.186-1.529-6.314-.971-10.694-1.785V-662H541v-144H226q-12 0-22 10t-10 22v588q0 12 10 22t22 10h250.5q6.714 6.923 13.857 11.962Q497.5-137 505-132H225.873ZM660-181.5q49.5 0 84.5-34.5t35-84q0-49.5-35-84.5t-84.5-35q-49.5 0-84 35T541.5-300q0 49.5 34.5 84t84 34.5Zm204 100L752.419-193Q733-177 709.99-168.25T660-159.5q-59.125 0-99.812-40.765-40.688-40.764-40.688-100 0-59.235 40.765-100.235 40.764-41 100-41 59.235 0 100.235 41.028t41 100.283q0 27.342-9.125 50.341Q783.25-226.85 767-208.5L879.5-96 864-81.5Z"></path></svg><div class="MuiBox-root css-15fzge">Clusters (2)</div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" id=":r2:-3" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M146-106v-225h120v-160h203v-138H349v-225h262v225H491v138h203v160h120v225H552v-225h120v-138H288v138h120v225H146Zm225-545h218v-181H371v181ZM168-128h218v-181H168v181Zm406 0h218v-181H574v181Zm-94-523Zm-94 342Zm188 0Z"></path></svg><div class="MuiBox-root css-15fzge">CanFrames (47)</div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" aria-expanded="false" id=":r2:-12" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m376-276-16-16 188-188-188-189 16-16 204 205-204 204Z"></path></svg></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m644-276-16-16 188-188-188-188 16-16 204 204-204 204Zm-328 0L112-480l204-204 16 16-188 188 188 188-16 16Zm3.719-178Q309-454 301.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q309.14-507 319.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Zm160 0Q469-454 461.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q469.14-507 479.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Zm160 0Q629-454 621.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q629.14-507 639.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Z"></path></svg><div class="MuiBox-root css-15fzge"><span aria-label="Ethernet SocketConnections" class="">Eth SockCon</span> (60)</div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" aria-expanded="false" id=":r2:-4" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m376-276-16-16 188-188-188-189 16-16 204 205-204 204Z"></path></svg></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M172-421v-22q72 0 134.358-26.868 62.358-26.867 109.5-74Q463-591 490-653.68q27-62.681 27-134.32h22q0 76.173-29.186 142.945-29.187 66.773-78.465 116.363-49.278 49.589-115.982 78.641Q248.663-421 172-421Zm0-148v-22q81.755 0 139.378-57.622Q369-706.245 369-788h22q0 92-63.5 155.5T172-569Zm0-148v-71h71q0 29-21.042 50-21.041 21-49.958 21Zm249 545q0-76.663 29.051-143.367 29.052-66.704 78.641-115.982 49.59-49.278 116.114-78.465Q711.329-539 788-539v22q-72 0-134.36 27.103-62.361 27.103-109.736 74.002-47.375 46.899-74.139 109.592Q443-243.61 443-172h-22Zm148 0q0-92 63.5-155.5T788-391v22q-81.755 0-139.378 57.622Q591-253.755 591-172h-22Zm148 0q0-28.917 
21.042-49.958Q759.083-243 788-243v71h-71Z"></path></svg><div class="MuiBox-root css-15fzge">Pdus (466)</div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" aria-expanded="false" id=":r2:-5" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m376-276-16-16 188-188-188-189 16-16 204 205-204 204Z"></path></svg></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M153-146q-40 0-68-28t-28-68q0-40 28-68t68-28q11.769 0 22.885 2.5Q187-333 197-328l185-254q-18-18-28-42.574-10-24.574-10-52.426 0-57 39.5-96.5T480-813q57 0 96.5 39.5T616-677q0 27.852-10.541 52.282Q594.919-600.288 577-582l185 255q10-5 21.462-8 11.461-3 23.538-3 40 0 68 28t28 68q0 40-28 68t-68 28q-40 0-68-28t-28-68q0-22 9-40.5t24-32.5L561-567q-16 11-33 17.5t-37 8.845V-339q36 5 60.5 31.772Q576-280.455 576-243q0 40-28 68t-68 28q-40 0-68-28t-28-68q0-37 24.5-64.5T469-339v-201.655Q449-543 431.5-549.5T399-567L215-315q15 14 24.5 32.5T249-242q0 40-28 68t-68 28Zm-.035-22q30.535 0 52.285-21.715Q227-211.43 227-241.965t-21.715-52.285Q183.57-316 153.035-316t-52.285 21.715Q79-272.57 79-242.035t21.715 52.285Q122.43-168 152.965-168ZM480-677Zm-.035 508q30.535 0 52.285-21.715Q554-212.43 554-242.965t-21.715-52.285Q510.57-317 480.035-317t-52.285 21.715Q406-273.57 406-243.035t21.715 52.285Q449.43-169 479.965-169Zm327 1q30.535 0 52.285-21.715Q881-211.43 881-241.965t-21.715-52.285Q837.57-316 807.035-316t-52.285 21.715Q733-272.57 733-242.035t21.715 52.285Q776.43-168 806.965-168ZM153-242Zm327-1Zm327 1ZM480-563q46.55 0 80.275-33.725Q594-630.45 594-677q0-46.55-33.725-80.275Q526.55-791 480-791q-46.55 0-80.275 33.725Q366-723.55 366-677q0 46.55 33.725 80.275Q433.45-563 480-563Z"></path></svg><div class="MuiBox-root css-15fzge">ISignalGroups (69)</div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" aria-expanded="false" id=":r2:-6" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m376-276-16-16 188-188-188-189 16-16 204 205-204 204Z"></path></svg></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M276-226v-188h42v188h-42Zm203 0v-388h42v388h-42Zm203 0v-588h42v588h-42Z"></path></svg><div class="MuiBox-root css-15fzge">ISignals (5111)</div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" id=":r2:-7" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M423-328H284q-63.08 0-107.54-44.443Q132-416.887 132-479.943 132-543 176.46-587.5T284-632h139v22H284q-54.333 0-92.167 37.765-37.833 37.764-37.833 92Q154-426 191.833-388q37.834 38 92.167 38h139v22Zm-75-141v-22h265v22H348Zm189 141v-22h139q54.333 
0 92.167-37.765 37.833-37.764 37.833-92Q806-534 768.167-572 730.333-610 676-610H537v-22h139q63.08 0 107.54 44.443Q828-543.113 828-480.057 828-417 783.54-372.5T676-328H537Z"></path></svg><div class="MuiBox-root css-15fzge">CanTp  (6)</div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" aria-expanded="false" id=":r2:-9" tabindex="-1" aria-disabled="true"><div class="css-tc4u2w MuiTreeItem-content Mui-disabled"><div class="MuiTreeItem-iconContainer"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m376-276-16-16 188-188-188-189 16-16 204 205-204 204Z"></path></svg></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M200-224q-28 0-48-19.5T132-292q0-29 20-48.5t48-19.5h560q29 0 48.5 19.5T828-292q0 29-19.5 48.5T760-224H200Zm0-22h560q19.55 0 32.775-13.215Q806-272.43 806-291.965t-13.225-32.785Q779.55-338 760-338H200q-19.55 0-32.775 13.215Q154-311.57 154-292.035t13.225 32.785Q180.45-246 200-246Zm288.581-194q-10.331 0-18.456-7.648T462-466.602v-242.817q0-11.306 8.136-18.943Q478.271-736 488.602-736h242.817q11.306 0 18.943 7.648Q758-720.704 758-709.398v242.817q0 11.306-7.648 18.943Q742.704-440 731.398-440H488.581ZM484-462h252v-252H484v252Zm-352-34v-23h257v23H132Zm398-121h161v-22H530v22Zm-318 0h179v-22H212v22Zm272 155v-252 252Z"></path></svg><div class="MuiBox-root css-15fzge"><span aria-label="E2E contains only EndToEndProtections.\n' +
[0-0]     ' No EndToEnd transformers supported yet." class="">E2E</span> </div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" id=":r2:-8" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M393-204q17-16 37-25.5t44-10.5q-1 15 1 29.5t6 28.5q4 15 9.5 30t13.5 28l-15 16-96-96ZM247-349l-21-21q51-51 116.5-80.5T480-480q32 0 63 7t60 19q-7 5-16 9.5l-17 8.5q-23-6-45-9.5t-45-3.5q-66 0-126 26.5T247-349ZM78-519l-22-22q85-84 194.5-131.5T480-720q120 0 229.5 47.5T904-541l-22 22q-81-80-184.5-125T480-689q-114 0-217.5 45T78-519Zm640 132v25q29 5 48 15.5t33 30.5l22-13 14 18-20 15q10 26 10 50.5T815-195l20 15-14 18-22-12q-15 19-33.5 29.5T718-129v25h-22v-25q-29-5-47.5-15.5T615-174l-22 12-14-18 20-15q-10-26-10-50.5t10-50.5l-20-15 14-18 22 13q14-20 33-30.5t48-15.5v-25h22Zm-11 47q-40 0-67.5 
27.5T612-245q0 39 27.5 66.5T707-151q39 0 66.5-27.5T801-245q0-40-27.5-67.5T707-340Z"></path></svg><div class="MuiBox-root css-15fzge"><span aria-label="Network Management" class="">NM</span> </div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" id=":r2:-10" tabindex="-1" aria-disabled="true"><div class="css-tc4u2w MuiTreeItem-content Mui-disabled"><div class="MuiTreeItem-iconContainer"></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M482-172q-64 0-120-24.5t-98-66q-42-41.5-66.5-98T173-481q0-63 24.5-119t66.5-98q42-42 98-66t120-24q64 0 122.5 26.5T708-689v-100h22v135H596v-22h94q-42-42-95.5-66T482-766q-120 0-203.5 82.5T195-482q0 120 83.5 204T482-194q111 0 191-74.5T765-452h22q-10 120-97.5 200T482-172Zm133-160L470-476v-205h22v196l139 137-16 16Z"></path></svg><div class="MuiBox-root css-15fzge">TimeSync </div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" id=":r6:-1" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M86-438q-26 0-43-17t-17-43v-234q0-6 2.5-11.5T36-754l180-180 12 12q3 3 5.5 7t2.5 7v6l-36 156h194q26 0 43 17t17 43v4q0 6-1 10.5t-3 9.5l-88 202q-5 10-13 16t-19 6H86Zm248-28 92-214v-6q0-14-9-23t-23-9H166l36-162L54-732v234q0 14 9 23t23 9h248ZM744-26l-12-12q-3-3-5.5-7t-2.5-7v-6l36-156H566q-26 0-43-17t-17-43v-4q0-6 1-10.5t3-9.5l88-202q5-10 13-16t19-6h244q26 0 43 17t17 43v234q0 6-2.5 11.5T924-206L744-26ZM626-494l-92 214v6q0 14 9 23t23 9h228L758-80l148-148v-234q0-14-9-23t-23-9H626Zm-572-4v-234 266-32Zm852 36v234-266 32Z"></path></svg><div class="MuiBox-root css-15fzge">Feedback </div></div></div></div></li>',
[0-0]   '<li class="MuiTreeItem-root css-lvlffg" role="treeitem" id=":r6:-2" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="M86-438q-26 0-43-17t-17-43v-234q0-6 2.5-11.5T36-754l180-180 12 12q3 3 5.5 7t2.5 7v6l-36 156h194q26 0 43 17t17 43v4q0 6-1 10.5t-3 9.5l-88 202q-5 10-13 16t-19 6H86Zm248-28 92-214v-6q0-14-9-23t-23-9H166l36-162L54-732v234q0 14 9 23t23 9h248ZM744-26l-12-12q-3-3-5.5-7t-2.5-7v-6l36-156H566q-26 0-43-17t-17-43v-4q0-6 1-10.5t3-9.5l88-202q5-10 13-16t19-6h244q26 0 43 17t17 43v234q0 6-2.5 11.5T924-206L744-26ZM626-494l-92 214v6q0 14 9 23t23 9h228L758-80l148-148v-234q0-14-9-23t-23-9H626Zm-572-4v-234 266-32Zm852 36v234-266 32Z"></path></svg><div class="MuiBox-root css-15fzge">Report a Bug </div></div></div></div></li>'
[0-0] ]
[0-0] 43
[0-0] [
[0-0]   'Overview',
[0-0]   'Clusters (2)',
[0-0]   'CanFrames (47)',
[0-0]   'Eth SockCon (60)',
[0-0]   'Pdus (466)',
[0-0]   'ISignalGroups (69)',
[0-0]   'ISignals (5111)',
[0-0]   'CanTp (6)',
[0-0]   'E2E',
[0-0]   'NM',
[0-0]   'TimeSync',
[0-0]   'Feedback',
[0-0]   'Report a Bug'
[0-0] ]
[0-0] 5
[0-0] <span aria-label="Ethernet SocketConnections" class="" data-wdio-testing-lib-element-id="996318717877">Eth SockCon</span>
[0-0] 51
[0-0] undefined
[0-0] 6
[0-0] <div class="MuiBox-root css-15fzge"><span aria-label="Ethernet SocketConnections" class="" data-wdio-testing-lib-element-id="996318717877">Eth SockCon</span> (60)</div>
[0-0] 7
[0-0] Eth SockCon (60)
[0-0] 8
[0-0] undefined
[0-0] 9
[0-0] <div class="MuiBox-root css-15fzge" data-wdio-testing-lib-element-id="543646822951"><span aria-label="Ethernet SocketConnections" class="" data-wdio-testing-lib-element-id="996318717877">Eth SockCon</span> (60)</div>
[0-0] 10
[0-0] undefined
[0-0] 11
[0-0] <div class="MuiBox-root css-15fzge" data-wdio-testing-lib-element-id="543646822951"><span aria-label="Ethernet SocketConnections" class="" data-wdio-testing-lib-element-id="996318717877">Eth SockCon</span> (60)</div>

Each item in the menu is created with

<TreeItem
        key={node.id}
        nodeId={`${node.id}`}
        disabled={!selectedFile || fileName === '' || node.totalNumber === 0}
        label={
          <Box
            marginLeft={visible ? 0 : 1}
            paddingY={1}
            display='flex'
            alignItems='center'
            sx={{ fontSize: 18 }}>
            {visible ? (
              <>
                {node.icon && <SvgIcon component={node.icon} inheritViewBox />}
                <Box marginLeft={1}>
                  {renderExpandedText(node)}{' '}
                  {selectedFile &&
                  fileName !== '' &&
                  node.totalNumber &&
                  node.totalNumber !== 0
                    ? `(${node.totalNumber})`
                    : null}
                </Box>
              </>
            ) : (
              <Tooltip
                disableFocusListener={!!visible}
                disableHoverListener={!!visible}
                title={renderCollapsedText(node)}>
                {node.icon && <SvgIcon component={node.icon} inheritViewBox />}
              </Tooltip>
            )}
          </Box>
        }
        sx={{
          '& > .MuiTreeItem-content': {
            backgroundColor: `${
              itemsSelectable &&
              selectedFile &&
              fileName !== '' &&
              node.id === idSelected
                ? `${backgroundLightGrayColor} !important`
                : 'white !important'
            }`,
          },
          '&  .MuiTreeItem-iconContainer': {
            display: `${visible ? 'flex' : 'none'}`,
          },
          '& > ul': {
            borderLeft: '1px solid #e0e0e0',
          },
          '& > ul .MuiTreeItem-iconContainer': {
            display: 'none',
          },
        }}
        onClick={() => elementClicked(node)}>
        {Array.isArray(node?.children) && visible
          ? node?.children.map(data => renderTree(data))
          : null}
      </TreeItem>

So from my point of view, this looks like a bug when trying to retrieve the text but I'm unsure whether I'm doing anything wrong.

MatanBobi commented 1 week ago

Hi @RedX2501. As you can see from this line:

 <li class="MuiTreeItem-root css-lvlffg" role="treeitem" aria-expanded="false" id=":r2:-12" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m376-276-16-16 188-188-188-189 16-16 204 205-204 204Z"></path></svg></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m644-276-16-16 188-188-188-188 16-16 204 204-204 204Zm-328 0L112-480l204-204 16 16-188 188 188 188-16 16Zm3.719-178Q309-454 301.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q309.14-507 319.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Zm160 0Q469-454 461.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q469.14-507 479.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Zm160 0Q629-454 621.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q629.14-507 639.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Z"></path></svg><div class="MuiBox-root css-15fzge"><span aria-label="Ethernet SocketConnections" class="">Eth SockCon</span> (60)</div></div></div></div></li>

Your text is divided into different element: Eth SockCon and (60) are in two different elements and that's what's probably causing the issue. To top that, the span has an aria-label and that's probably why getByRole('treeitem', {name: "Eth SockCon (60)"}) isn't working. Can you please try: getByRole('treeitem', {name: "Ethernet SocketConnections (60)"}) instead?