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 1211200x884
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)