Image Editor:Image Editor Drawing Interactions

Build 4128 on image-editor-ui
mobile
Reviewing disabled
View latest build
ErrorBuild 4128 on image-editor-ui
View Storybook
ErrorBuild 4128 on image-editor-ui
View Storybook
The baseline is taller than the new snapshot (500x430 to 500x423).
  • Discussions
  • Interactions
Fail
ImageEditor.stories.svelte
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
c36de5 on image-editor-ui
Caught exception in play function

This 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-xgbozpiesn.capture-loopback.chromatic.com/assets/index-b6b69103.js:143:284)
    at zt (https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/assets/index-b6b69103.js:167:233)
    at https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/assets/index-b6b69103.js:157:4163
    at https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/assets/index-b6b69103.js:165:387
    at Af.invoke (https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:9139)
    at Af.track (https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:6400)
    at Object.getByLabelText (https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/assets/index-b6b69103.js:27:5672)
    at Lv.async.canvasElement (https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/assets/ImageEditor.stories-3cdb9853.js:1174:34009)
    at async https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3588
    at async StoryRender.runPhase (https://649585a46a67480e3074dc75-xgbozpiesn.capture-loopback.chromatic.com/sb-preview/runtime.js:118:912)