Fail
Unable to find an element with the text: Boeing 757. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <div id="storybook-root" > <div class="flex flex-nowrap overflow-auto sm:flex-wrap select-none" > <div class="w-60 flex-shrink-0 sm:w-1/4 text-sm antialiased text-gray-700 pr-4 pb-4 overflow-clip" > <div class="capitalize border-b flex justify-between items-baseline" > <span class="truncate w-2/3" > Plane </span> <span class="truncate w-1/3 text-right" > </span> </div> <div class="transition-all" style="height:12rem" > <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:100%" /> <span class="truncate text-gray-900 transition duration-100" > Tupolev Tu-204 </span> <span class="tabular-nums" > 23 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:95.65217391304348%" /> <span class="truncate text-gray-900 transition duration-100" > Boeing 787 </span> <span class="tabular-nums" > 22 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:95.65217391304348%" /> <span class="truncate text-gray-900 transition duration-100" > De Havilland Canada DHC-8-100 Dash 8 / 8Q </span> <span class="tabular-nums" > 22 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:91.30434782608695%" /> <span class="truncate text-gray-900 transition duration-100" > Boeing 747-400D </span> <span class="tabular-nums" > 21 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:91.30434782608695%" /> <span class="truncate text-gray-900 transition duration-100" > Embraer 190 </span> <span class="tabular-nums" > 21 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" style="" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:86.95652173913044%" /> <span class="truncate text-gray-900 transition duration-100" > Antonov An-12 </span> <span class="tabular-nums" > 20 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:86.95652173913044%" /> ... Ignored nodes: comments, script, style <div id="storybook-root" > <div class="flex flex-nowrap overflow-auto sm:flex-wrap select-none" > <div class="w-60 flex-shrink-0 sm:w-1/4 text-sm antialiased text-gray-700 pr-4 pb-4 overflow-clip" > <div class="capitalize border-b flex justify-between items-baseline" > <span class="truncate w-2/3" > Plane </span> <span class="truncate w-1/3 text-right" > </span> </div> <div class="transition-all" style="height:12rem" > <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:100%" /> <span class="truncate text-gray-900 transition duration-100" > Tupolev Tu-204 </span> <span class="tabular-nums" > 23 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:95.65217391304348%" /> <span class="truncate text-gray-900 transition duration-100" > Boeing 787 </span> <span class="tabular-nums" > 22 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:95.65217391304348%" /> <span class="truncate text-gray-900 transition duration-100" > De Havilland Canada DHC-8-100 Dash 8 / 8Q </span> <span class="tabular-nums" > 22 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:91.30434782608695%" /> <span class="truncate text-gray-900 transition duration-100" > Boeing 747-400D </span> <span class="tabular-nums" > 21 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:91.30434782608695%" /> <span class="truncate text-gray-900 transition duration-100" > Embraer 190 </span> <span class="tabular-nums" > 21 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" style="" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:86.95652173913044%" /> <span class="truncate text-gray-900 transition duration-100" > Antonov An-12 </span> <span class="tabular-nums" > 20 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:86.95652173913044%" /> ...View in Storybook
Chrome 121
1200x884
Linux Linux Ubuntu 20.04.4
c0c443 on feature/2193-dimensionGrid-multiSelect
Caught exception in
play
functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Unable to find an element with the text: Boeing 757. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <div id="storybook-root" > <div class="flex flex-nowrap overflow-auto sm:flex-wrap select-none" > <div class="w-60 flex-shrink-0 sm:w-1/4 text-sm antialiased text-gray-700 pr-4 pb-4 overflow-clip" > <div class="capitalize border-b flex justify-between items-baseline" > <span class="truncate w-2/3" > Plane </span> <span class="truncate w-1/3 text-right" > </span> </div> <div class="transition-all" style="height:12rem" > <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:100%" /> <span class="truncate text-gray-900 transition duration-100" > Tupolev Tu-204 </span> <span class="tabular-nums" > 23 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:95.65217391304348%" /> <span class="truncate text-gray-900 transition duration-100" > Boeing 787 </span> <span class="tabular-nums" > 22 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:95.65217391304348%" /> <span class="truncate text-gray-900 transition duration-100" > De Havilland Canada DHC-8-100 Dash 8 / 8Q </span> <span class="tabular-nums" > 22 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:91.30434782608695%" /> <span class="truncate text-gray-900 transition duration-100" > Boeing 747-400D </span> <span class="tabular-nums" > 21 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:91.30434782608695%" /> <span class="truncate text-gray-900 transition duration-100" > Embraer 190 </span> <span class="tabular-nums" > 21 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" style="" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:86.95652173913044%" /> <span class="truncate text-gray-900 transition duration-100" > Antonov An-12 </span> <span class="tabular-nums" > 20 </span> </div> </div> <div class="flex transition duration-100 group cursor-pointer" role="button" tabindex="-1" > <div class="flex-1 relative truncate flex gap-8 justify-between py-0.5 text-xs" > <div class="group-hover:bg-blue-100 absolute inset-y-0 left-0 z-[-10] transition duration-100 w-full" /> <div class="bg-blue-50 group-hover:bg-blue-200 absolute inset-y-0 left-0 z-[-10] transition duration-100" style="width:86.95652173913044%" /> ... at Ea (https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/assets/index-CLfzrCIb.js:143:3360) at https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/assets/index-CLfzrCIb.js:151:235 at sn.invoke (https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/assets/index-CgAazNOu.js:28:9372) at sn.intercept (https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/assets/index-CgAazNOu.js:28:6773) at sn.track (https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/assets/index-CgAazNOu.js:28:6505) at Object.findByText (https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/assets/index-CgAazNOu.js:28:5777) at https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/assets/DimensionGrid.stories-Ai49yi6W.js:39:29838 at async pi.runPhase (https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/sb-preview/runtime.js:8183:94) at async pi.render (https://645d58d2e049d64800e0ee15-xlyocbivlf.capture-loopback.chromatic.com/sb-preview/runtime.js:8292:14)