Reviewing build 999 • chromaui/addon-visual-tests

ErrorBuild 999 on ghengeveld/ap-3696-allow-user-to-cancel-build

Fail

BuildEyebrow.stories.ts

Found multiple elements with the role "button"

Here are the matching elements:

Ignored nodes: comments, script, style
<button
  class="css-9z6c7p"
>
  <div
    class="css-1ckjb8c"
  />
  <div
    class="css-o6l5fu"
  >
    <span>
      🚨
       
      Build failed
    </span>
  </div>
  <button
    class="css-ae8uxv"
    type="button"
  >
    <svg
      class="css-149xqrd"
      height="14px"
      viewBox="0 0 14 14"
      width="14px"
    >
      <path
        d="M9.85 4.15c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
      />
      <path
        d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm0-1A6 6 0 1 0 7 1a6 6 0 0 0 0 12Z"
        fill-rule="evenodd"
      />
    </svg>
  </button>
</button>

Ignored nodes: comments, script, style
<button
  class="css-ae8uxv"
  type="button"
>
  <svg
    class="css-149xqrd"
    height="14px"
    viewBox="0 0 14 14"
    width="14px"
  >
    <path
      d="M9.85 4.15c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
    />
    <path
      d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm0-1A6 6 0 1 0 7 1a6 6 0 0 0 0 12Z"
      fill-rule="evenodd"
    />
  </svg>
</button>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<div
  class="css-vkm43t"
  data-canvas="right"
  orientation="right"
>
  <button
    class="css-9z6c7p"
  >
    <div
      class="css-1ckjb8c"
    />
    <div
      class="css-o6l5fu"
    >
      <span>
        🚨
         
        Build failed
      </span>
    </div>
    <button
      class="css-ae8uxv"
      type="button"
    >
      <svg
        class="css-149xqrd"
        height="14px"
        viewBox="0 0 14 14"
        width="14px"
      >
        <path
          d="M9.85 4.15c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
        />
        <path
          d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm0-1A6 6 0 1 0 7 1a6 6 0 0 0 0 12Z"
          fill-rule="evenodd"
        />
      </svg>
    </button>
  </button>
  <div
    class="css-1g0668p"
  >
    <div
      class="css-1am57kc"
    >
      <div
        class="css-nbpyhe"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="M13.85 3.35a.5.5 0 0 0-.7-.7L5 10.79.85 6.65a.5.5 0 1 0-.7.7l4.5 4.5c.2.2.5.2.7 0l8.5-8.5Z"
            />
          </svg>
          Initialized
        </div>
      </div>
      <div
        class="css-1c9y4ew"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm2.85-9.85c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
            />
          </svg>
          Building your Storybook...
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Publish your Storybook
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Verify your Storybook
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Run visual tests
        </div>
      </div>
    </div>
  </div>
</div>

Ignored nodes: comments, script, style
<div
  class="css-vkm43t"
  data-canvas="right"
  orientation="right"
>
  <button
    class="css-9z6c7p"
  >
    <div
      class="css-1ckjb8c"
    />
    <div
      class="css-o6l5fu"
    >
      <span>
        🚨
         
        Build failed
      </span>
    </div>
    <button
      class="css-ae8uxv"
      type="button"
    >
      <svg
        class="css-149xqrd"
        height="14px"
        viewBox="0 0 14 14"
        width="14px"
      >
        <path
          d="M9.85 4.15c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
        />
        <path
          d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm0-1A6 6 0 1 0 7 1a6 6 0 0 0 0 12Z"
          fill-rule="evenodd"
        />
      </svg>
    </button>
  </button>
  <div
    class="css-1g0668p"
  >
    <div
      class="css-1am57kc"
    >
      <div
        class="css-nbpyhe"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="M13.85 3.35a.5.5 0 0 0-.7-.7L5 10.79.85 6.65a.5.5 0 1 0-.7.7l4.5 4.5c.2.2.5.2.7 0l8.5-8.5Z"
            />
          </svg>
          Initialized
        </div>
      </div>
      <div
        class="css-1c9y4ew"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm2.85-9.85c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
            />
          </svg>
          Building your Storybook...
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Publish your Storybook
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Verify your Storybook
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Run visual tests
        </div>
      </div>
    </div>
  </div>
</div>

View in Storybook

Chrome 105

960x720

Linux Linux Ubuntu 20.04.4

f3dcd2 on ghengeveld/ap-3696-allow-user-to-cancel-build

Found multiple elements with the role "button"

Here are the matching elements:

Ignored nodes: comments, script, style
<button
  class="css-1sylmh2"
>
  <div
    class="css-non4wm"
  />
  <div
    class="css-o6l5fu"
  >
    <span>
      🚨
       
      Build failed
    </span>
  </div>
  <button
    class="css-1wrd8mw"
    type="button"
  >
    <svg
      class="css-149xqrd"
      height="14px"
      viewBox="0 0 14 14"
      width="14px"
    >
      <path
        d="M9.85 4.15c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
      />
      <path
        d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm0-1A6 6 0 1 0 7 1a6 6 0 0 0 0 12Z"
        fill-rule="evenodd"
      />
    </svg>
  </button>
</button>

Ignored nodes: comments, script, style
<button
  class="css-1wrd8mw"
  type="button"
>
  <svg
    class="css-149xqrd"
    height="14px"
    viewBox="0 0 14 14"
    width="14px"
  >
    <path
      d="M9.85 4.15c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
    />
    <path
      d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm0-1A6 6 0 1 0 7 1a6 6 0 0 0 0 12Z"
      fill-rule="evenodd"
    />
  </svg>
</button>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<div
  class="css-1e16bq4"
  data-canvas="right"
  orientation="right"
>
  <button
    class="css-1sylmh2"
  >
    <div
      class="css-non4wm"
    />
    <div
      class="css-o6l5fu"
    >
      <span>
        🚨
         
        Build failed
      </span>
    </div>
    <button
      class="css-1wrd8mw"
      type="button"
    >
      <svg
        class="css-149xqrd"
        height="14px"
        viewBox="0 0 14 14"
        width="14px"
      >
        <path
          d="M9.85 4.15c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
        />
        <path
          d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm0-1A6 6 0 1 0 7 1a6 6 0 0 0 0 12Z"
          fill-rule="evenodd"
        />
      </svg>
    </button>
  </button>
  <div
    class="css-jvg3up"
  >
    <div
      class="css-1am57kc"
    >
      <div
        class="css-nbpyhe"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="M13.85 3.35a.5.5 0 0 0-.7-.7L5 10.79.85 6.65a.5.5 0 1 0-.7.7l4.5 4.5c.2.2.5.2.7 0l8.5-8.5Z"
            />
          </svg>
          Initialized
        </div>
      </div>
      <div
        class="css-1c9y4ew"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm2.85-9.85c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
            />
          </svg>
          Building your Storybook...
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Publish your Storybook
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Verify your Storybook
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Run visual tests
        </div>
      </div>
    </div>
  </div>
</div>

Ignored nodes: comments, script, style
<div
  class="css-1e16bq4"
  data-canvas="right"
  orientation="right"
>
  <button
    class="css-1sylmh2"
  >
    <div
      class="css-non4wm"
    />
    <div
      class="css-o6l5fu"
    >
      <span>
        🚨
         
        Build failed
      </span>
    </div>
    <button
      class="css-1wrd8mw"
      type="button"
    >
      <svg
        class="css-149xqrd"
        height="14px"
        viewBox="0 0 14 14"
        width="14px"
      >
        <path
          d="M9.85 4.15c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
        />
        <path
          d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm0-1A6 6 0 1 0 7 1a6 6 0 0 0 0 12Z"
          fill-rule="evenodd"
        />
      </svg>
    </button>
  </button>
  <div
    class="css-jvg3up"
  >
    <div
      class="css-1am57kc"
    >
      <div
        class="css-nbpyhe"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="M13.85 3.35a.5.5 0 0 0-.7-.7L5 10.79.85 6.65a.5.5 0 1 0-.7.7l4.5 4.5c.2.2.5.2.7 0l8.5-8.5Z"
            />
          </svg>
          Initialized
        </div>
      </div>
      <div
        class="css-1c9y4ew"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm2.85-9.85c.2.2.2.5 0 .7L7.71 7l2.14 2.15a.5.5 0 0 1-.7.7L7 7.71 4.85 9.85a.5.5 0 0 1-.7-.7L6.29 7 4.15 4.85a.5.5 0 1 1 .7-.7L7 6.29l2.15-2.14c.2-.2.5-.2.7 0Z"
            />
          </svg>
          Building your Storybook...
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Publish your Storybook
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Verify your Storybook
        </div>
      </div>
      <div
        class="css-crp6a7"
      >
        <div>
          <svg
            class="css-19ntsx2"
            height="14px"
            viewBox="0 0 14 14"
            width="14px"
          >
            <path
              d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"
            />
          </svg>
          Run visual tests
        </div>
      </div>
    </div>
  </div>
</div>

View in Storybook

Chrome 105

960x720

Linux Linux Ubuntu 20.04.4

f3dcd2 on ghengeveld/ap-3696-allow-user-to-cancel-build

Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

Error: ignoredException
    at https://6480e1b0042842f149cfd74c-fjyxfljiix.capture-loopback.chromatic.com/sb-preview/runtime.js:4:93306