The baseline is taller than the new snapshot (500x430 to 500x409).
Fail
Unable to find a label with the text of: Color button
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="image-container"
style="width: 500px; position: relative; border-radius: var(--radius-lg); overflow: hidden;"
>
<div
class="block svelte-12cmxck"
id=""
style="border-style: solid; overflow: hidden; min-width: min(0px, 100%); border-width: var(--block-border-width);"
>
<div
class="wrap default full svelte-12bm2fk hide"
style="position: absolute; padding: 0px;"
/>
<label
class="svelte-1b6s6s float"
data-testid="block-label"
for=""
>
<span
class="svelte-1b6s6s"
>
<svg
class="feather feather-image"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="18"
rx="2"
ry="2"
width="18"
x="3"
y="3"
/>
<circle
cx="8.5"
cy="8.5"
r="1.5"
/>
<polyline
points="21 15 16 10 5 21"
/>
</svg>
</span>
Image
</label>
<div
class="image-container svelte-178qp5c"
data-testid="image"
>
<div
class="controls-wrap svelte-4lttvb"
>
<div
class="row-wrap svelte-4lttvb"
>
<button
aria-haspopup="false"
aria-label="Undo"
class="svelte-rk35yg padded"
disabled=""
style="color: var(--block-label-text-color); --bg-color: auto;"
title="Undo"
>
<div
class="svelte-rk35yg small"
>
<svg
class="feather feather-rotate-ccw"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="1 4 1 10 7 10"
/>
<path
d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"
/>
</svg>
</div>
</button>
<button
aria-haspopup="false"
aria-label="Redo"
class="svelte-rk35yg padded"
disabled=""
style="color: var(--block-label-text-color); --bg-color: auto;"
title="Redo"
>
<div
class="svelte-rk35yg small"
>
<svg
class="feather feather-rotate-ccw"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
style="transform: rotateY(180deg);"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="1 4 1 10 7 10"
/>
<path
d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"
/>
</svg>
</div>
</button>
<button
aria-haspopup="false"
aria-label="Clear canvas"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary);"
title="Clear canvas"
>
<div
class="svelte-rk35yg small"
>
<svg
height="100%"
stroke="currentColor"
style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round;"
version="1.1"
viewBox="0 0 24 24"
width="100%"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g
transform="matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"
>
<path
d="M18,6L6.087,17.913"
style="fill: none; fill-rule: nonzero; stroke-width: 2px;"
/>
</g>
<path
d="M4.364,4.364L19.636,19.636"
style="fill: none; fill-rule: nonzero; stroke-width: 2px;"
/>
</svg>
</div>
</button>
</div>
</div>
<div
class="wrap svelte-178qp5c"
>
<div
class="stage-wrap svelte-178qp5c bg"
style="transform: translate(0px, 0px);"
>
<canvas
height="600"
style="touch-action: none; max-width: 800px; max-height: 600px; width: 100%; height: 100%; cursor: inherit;"
width="800"
/>
</div>
</div>
<div
class="tools-wrap svelte-178qp5c"
>
<div
class="layer-wrap svelte-1jl6g2k closed"
>
<button
aria-label="Show Layers"
class="svelte-1jl6g2k"
>
<span
class="icon svelte-1jl6g2k"
>
<svg
fill="none"
height="100%"
viewBox="0 0 16 17"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.35327 10.9495L6.77663 15.158C7.12221 15.4229 7.50051 15.5553 7.91154 15.5553C8.32258 15.5553 8.70126 15.4229 9.0476 15.158L14.471 10.9495"
stroke="currentColor"
stroke-linecap="round"
stroke-width="1.5"
/>
<path
d="M7.23461 11.4324C7.23406 11.432 7.2335 11.4316 7.23295 11.4312L1.81496 7.2268C1.81471 7.22661 1.81446 7.22641 1.8142 7.22621C1.52269 6.99826 1.39429 6.73321 1.39429 6.37014C1.39429 6.00782 1.52236 5.74301 1.81325 5.51507C1.8136 5.5148 1.81394 5.5...View in Storybook
Chrome 121500x409
Linux Linux Ubuntu 20.04.4
e704de on image-editor-ui
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
TestingLibraryElementError: Unable to find a label with the text of: Color button
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="image-container"
style="width: 500px; position: relative; border-radius: var(--radius-lg); overflow: hidden;"
>
<div
class="block svelte-12cmxck"
id=""
style="border-style: solid; overflow: hidden; min-width: min(0px, 100%); border-width: var(--block-border-width);"
>
<div
class="wrap default full svelte-12bm2fk hide"
style="position: absolute; padding: 0px;"
/>
<label
class="svelte-1b6s6s float"
data-testid="block-label"
for=""
>
<span
class="svelte-1b6s6s"
>
<svg
class="feather feather-image"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="18"
rx="2"
ry="2"
width="18"
x="3"
y="3"
/>
<circle
cx="8.5"
cy="8.5"
r="1.5"
/>
<polyline
points="21 15 16 10 5 21"
/>
</svg>
</span>
Image
</label>
<div
class="image-container svelte-178qp5c"
data-testid="image"
>
<div
class="controls-wrap svelte-4lttvb"
>
<div
class="row-wrap svelte-4lttvb"
>
<button
aria-haspopup="false"
aria-label="Undo"
class="svelte-rk35yg padded"
disabled=""
style="color: var(--block-label-text-color); --bg-color: auto;"
title="Undo"
>
<div
class="svelte-rk35yg small"
>
<svg
class="feather feather-rotate-ccw"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="1 4 1 10 7 10"
/>
<path
d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"
/>
</svg>
</div>
</button>
<button
aria-haspopup="false"
aria-label="Redo"
class="svelte-rk35yg padded"
disabled=""
style="color: var(--block-label-text-color); --bg-color: auto;"
title="Redo"
>
<div
class="svelte-rk35yg small"
>
<svg
class="feather feather-rotate-ccw"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
style="transform: rotateY(180deg);"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="1 4 1 10 7 10"
/>
<path
d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"
/>
</svg>
</div>
</button>
<button
aria-haspopup="false"
aria-label="Clear canvas"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary);"
title="Clear canvas"
>
<div
class="svelte-rk35yg small"
>
<svg
height="100%"
stroke="currentColor"
style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round;"
version="1.1"
viewBox="0 0 24 24"
width="100%"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g
transform="matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"
>
<path
d="M18,6L6.087,17.913"
style="fill: none; fill-rule: nonzero; stroke-width: 2px;"
/>
</g>
<path
d="M4.364,4.364L19.636,19.636"
style="fill: none; fill-rule: nonzero; stroke-width: 2px;"
/>
</svg>
</div>
</button>
</div>
</div>
<div
class="wrap svelte-178qp5c"
>
<div
class="stage-wrap svelte-178qp5c bg"
style="transform: translate(0px, 0px);"
>
<canvas
height="600"
style="touch-action: none; max-width: 800px; max-height: 600px; width: 100%; height: 100%; cursor: inherit;"
width="800"
/>
</div>
</div>
<div
class="tools-wrap svelte-178qp5c"
>
<div
class="layer-wrap svelte-1jl6g2k closed"
>
<button
aria-label="Show Layers"
class="svelte-1jl6g2k"
>
<span
class="icon svelte-1jl6g2k"
>
<svg
fill="none"
height="100%"
viewBox="0 0 16 17"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.35327 10.9495L6.77663 15.158C7.12221 15.4229 7.50051 15.5553 7.91154 15.5553C8.32258 15.5553 8.70126 15.4229 9.0476 15.158L14.471 10.9495"
stroke="currentColor"
stroke-linecap="round"
stroke-width="1.5"
/>
<path
d="M7.23461 11.4324C7.23406 11.432 7.2335 11.4316 7.23295 11.4312L1.81496 7.2268C1.81471 7.22661 1.81446 7.22641 1.8142 7.22621C1.52269 6.99826 1.39429 6.73321 1.39429 6.37014C1.39429 6.00782 1.52236 5.74301 1.81325 5.51507C1.8136 5.5148 1.81394 5.5...
at Object.getElementError (https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/assets/index-b6b69103.js:143:284)
at zt (https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/assets/index-b6b69103.js:167:233)
at https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/assets/index-b6b69103.js:157:4163
at https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/assets/index-b6b69103.js:165:387
at Af.invoke (https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:9139)
at Af.track (https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:6400)
at Object.getByLabelText (https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:5672)
at F1.async.canvasElement (https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/assets/ImageEditor.stories-a526523c.js:1174:33897)
at async https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3588
at async StoryRender.runPhase (https://649585a46a67480e3074dc75-shldwmrpan.capture-loopback.chromatic.com/sb-preview/runtime.js:118:912)