Fail
Unable to find an element with the text: China Eastern Airlines. 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="min-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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:100%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Boeing 717
</span>
<span
class="tabular-nums"
>
10
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:90%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
McDonnell Douglas MD80
</span>
<span
class="tabular-nums"
>
9
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:80%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Boeing 737-200
</span>
<span
class="tabular-nums"
>
8
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
De Havilland Canada DHC-2 Turbo-Beaver
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Airbus A330-900neo
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Airbus A310
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
A...
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="min-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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:100%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Boeing 717
</span>
<span
class="tabular-nums"
>
10
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:90%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
McDonnell Douglas MD80
</span>
<span
class="tabular-nums"
>
9
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:80%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Boeing 737-200
</span>
<span
class="tabular-nums"
>
8
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
De Havilland Canada DHC-2 Turbo-Beaver
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Airbus A330-900neo
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Airbus A310
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
A...View in Storybook
Chrome 1211200x884
Linux Linux Ubuntu 20.04.4
f6771e 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: China Eastern Airlines. 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="min-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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:100%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Boeing 717
</span>
<span
class="tabular-nums"
>
10
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:90%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
McDonnell Douglas MD80
</span>
<span
class="tabular-nums"
>
9
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:80%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Boeing 737-200
</span>
<span
class="tabular-nums"
>
8
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
De Havilland Canada DHC-2 Turbo-Beaver
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Airbus A330-900neo
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
Airbus A310
</span>
<span
class="tabular-nums"
>
6
</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-100 absolute inset-y-0 left-0 z-[-10] transition duration-100"
style="width:60%"
/>
<span
class="truncate text-gray-900 transition duration-100"
>
A...
at Ea (https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/assets/index-CLfzrCIb.js:143:3360)
at https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/assets/index-CLfzrCIb.js:151:235
at sn.invoke (https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/assets/index-CgAazNOu.js:28:9372)
at sn.intercept (https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/assets/index-CgAazNOu.js:28:6773)
at sn.track (https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/assets/index-CgAazNOu.js:28:6505)
at Object.findByText (https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/assets/index-CgAazNOu.js:28:5777)
at async.canvasElement (https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/assets/DimensionGrid.stories-4kq0QXEw.js:1:40930)
at async pi.runPhase (https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/sb-preview/runtime.js:8183:94)
at async pi.render (https://645d58d2e049d64800e0ee15-ldpfmdyyjy.capture-loopback.chromatic.com/sb-preview/runtime.js:8292:14)