The baseline is taller than the new snapshot (500x430 to 500x423).
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-79s8a6" 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; margin-left: 0px;" 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; margin-left: 0px;" 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); margin-left: 0px;" title="Clear canvas" > <div class="svelte-rk35yg small" > <svg id="icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" > <defs /> <rect height="12" width="2" x="12" y="12" /> <rect height="12" width="2" x="18" y="12" /> <path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z" /> <rect height="2" width="8" x="12" y="2" /> <rect class="cls-1" data-name="<Transparent Rectangle>" height="32" id="_Transparent_Rectangle_" width="32" /> </svg> </div> </button> </div> </div> <div class="wrap svelte-79s8a6" > <div class="stage-wrap svelte-79s8a6 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-79s8a6" > <div class="layer-wrap svelte-1tz2jp7 closed" > <button aria-label="Show Layers" class="svelte-1tz2jp7" > <span class="icon svelte-1tz2jp7" > <svg fill="none" height="100%" viewBox="0 0 17 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.9982...View in Storybook
Chrome 121
500x423
Linux Linux Ubuntu 20.04.4
836c1b 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-79s8a6" 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; margin-left: 0px;" 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; margin-left: 0px;" 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); margin-left: 0px;" title="Clear canvas" > <div class="svelte-rk35yg small" > <svg id="icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" > <defs /> <rect height="12" width="2" x="12" y="12" /> <rect height="12" width="2" x="18" y="12" /> <path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z" /> <rect height="2" width="8" x="12" y="2" /> <rect class="cls-1" data-name="<Transparent Rectangle>" height="32" id="_Transparent_Rectangle_" width="32" /> </svg> </div> </button> </div> </div> <div class="wrap svelte-79s8a6" > <div class="stage-wrap svelte-79s8a6 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-79s8a6" > <div class="layer-wrap svelte-1tz2jp7 closed" > <button aria-label="Show Layers" class="svelte-1tz2jp7" > <span class="icon svelte-1tz2jp7" > <svg fill="none" height="100%" viewBox="0 0 17 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.9982... at Object.getElementError (https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/assets/index-b6b69103.js:143:284) at zt (https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/assets/index-b6b69103.js:167:233) at https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/assets/index-b6b69103.js:157:4163 at https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/assets/index-b6b69103.js:165:387 at Af.invoke (https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:9139) at Af.track (https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:6400) at Object.getByLabelText (https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:5672) at Lv.async.canvasElement (https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/assets/ImageEditor.stories-038874c5.js:1174:34009) at async https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3588 at async StoryRender.runPhase (https://649585a46a67480e3074dc75-ebfrwxuhgg.capture-loopback.chromatic.com/sb-preview/runtime.js:118:912)