Reviewing build 21559 • storybookjs/storybook-ui

chrome

ErrorBuild 21559 on yann/open-in-editor-feature

Fail

Tree.stories.tsx

Found multiple elements by: [data-testid="context-menu"]

View in Storybook

Chrome 132

1280x188

Linux Linux Ubuntu 20.04.4

aeb30b on yann/open-in-editor-feature

Caught exception in play function

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

Error: Found multiple elements by: [data-testid="context-menu"]

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  class="css-a36yur"
  data-displayed="off"
  data-testid="context-menu"
>
  <button
    class="css-sgjymn"
    type="button"
  >
    <svg
      fill="none"
      height="14"
      viewBox="0 0 14 14"
      width="14"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM13 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM7 8.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
        fill="currentColor"
      />
    </svg>
  </button>
</div>

Ignored nodes: comments, script, style
<div
  class="css-a36yur"
  data-displayed="off"
  data-testid="context-menu"
>
  <button
    class="css-sgjymn"
    type="button"
  >
    <svg
      fill="none"
      height="14"
      viewBox="0 0 14 14"
      width="14"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM13 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM7 8.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
        fill="currentColor"
      />
    </svg>
  </button>
</div>

Ignored nodes: comments, script, style
<div
  class="css-a36yur"
  data-displayed="off"
  data-testid="context-menu"
>
  <button
    class="css-sgjymn"
    type="button"
  >
    <svg
      fill="none"
      height="14"
      viewBox="0 0 14 14"
      width="14"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM13 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM7 8.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
        fill="currentColor"
      />
    </svg>
  </button>
</div>

Ignored nodes: comments, script, style
<div
  class="css-a36yur"
  data-displayed="off"
  data-testid="context-menu"
>
  <button
    class="css-sgjymn"
    type="button"
  >
    <svg
      fill="none"
      height="14"
      viewBox="0 0 14 14"
      width="14"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM13 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM7 8.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
        fill="currentColor"
      />
    </svg>
  </button>
</div>

Ignored nodes: comments, script, style
<div
  class="css-a36yur"
  data-displayed="off"
  data-testid="context-menu"
>
  <button
    class="css-sgjymn"
    type="button"
  >
    <svg
      fill="none"
      height="14"
      viewBox="0 0 14 14"
      width="14"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM13 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM7 8.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
        fill="currentColor"
      />
    </svg>
  </button>
</div>

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

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="css-ohbggj"
  >
    <svg
      class="css-1e1wj1"
      data-chromatic="ignore"
    >
      <symbol
        id="icon--group"
      >
        <path
          clip-rule="evenodd"
          d="M6.586 3.504l-1.5-1.5H1v9h12v-7.5H6.586zm.414-1L5.793 1.297a1 1 0 00-.707-.293H.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-8.5a.5.5 0 00-.5-.5H7z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </symbol>
      <symbol
        id="icon--component"
      >
        <path
          clip-rule="evenodd"
          d="M3.5 1.004a2.5 2.5 0 00-2.5 2.5v7a2.5 2.5 0 002.5 2.5h7a2.5 2.5 0 002.5-2.5v-7a2.5 2.5 0 00-2.5-2.5h-7zm8.5 5.5H7.5v-4.5h3a1.5 1.5 0 011.5 1.5v3zm0 1v3a1.5 1.5 0 01-1.5 1.5h-3v-4.5H12zm-5.5 4.5v-4.5H2v3a1.5 1.5 0 001.5 1.5h3zM2 6.504h4.5v-4.5h-3a1.5 1.5 0 00-1.5 1.5v3z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </symbol>
      <symbol
        id="icon--document"
      >
        <path
          d="M4 5.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zM4.5 7.5a.5.5 0 000 1h5a.5.5 0 000-1h-5zM4 10.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z"
          fill="currentColor"
        />
        <path
          clip-rule="evenodd"
          d="M1.5 0a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V3.207a.5.5 0 00-.146-.353L10.146.146A.5.5 0 009.793 0H1.5zM2 1h7.5v2a.5.5 0 00.5.5h2V13H2V1z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </symbol>
      <symbol
        id="icon--story"
      >
        <path
          clip-rule="evenodd"
          d="M3.5 0h7a.5.5 0 01.5.5v13a.5.5 0 01-.454.498.462.462 0 01-.371-.118L7 11.159l-3.175 2.72a.46.46 0 01-.379.118A.5.5 0 013 13.5V.5a.5.5 0 01.5-.5zM4 12.413l2.664-2.284a.454.454 0 01.377-.128.498.498 0 01.284.12L10 12.412V1H4v11.413z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </symbol>
      <symbol
        id="icon--success"
      >
        <path
          clip-rule="evenodd"
          d="M10.854 4.146a.5.5 0 010 .708l-5 5a.5.5 0 01-.708 0l-2-2a.5.5 0 11.708-.708L5.5 8.793l4.646-4.647a.5.5 0 01.708 0z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </symbol>
      <symbol
        id="icon--error"
      >
        <path
          clip-rule="evenodd"
          d="M7 4a3 3 0 100 6 3 3 0 000-6zM3 7a4 4 0 118 0 4 4 0 01-8 0z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </symbol>
      <symbol
        id="icon--warning"
      >
        <path
          clip-rule="evenodd"
          d="M7.206 3.044a.498.498 0 01.23.212l3.492 5.985a.494.494 0 01.006.507.497.497 0 01-.443.252H3.51a.499.499 0 01-.437-.76l3.492-5.984a.497.497 0 01.642-.212zM7 4.492L4.37 9h5.26L7 4.492z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </symbol>
      <symbol
        id="icon--dot"
      >
        <circle
          cx="3"
          cy="3"
          fill="currentColor"
          r="3"
        />
      </symbol>
    </svg>
    <div
      class="sidebar-item css-ld0a14"
      data-highlightable="true"
      data-item-id="single--docs"
      data-nodetype="document"
      data-ref-id="storybook_internal"
      data-selected="false"
    >
      <a
        class="css-caedy5"
        href="/iframe.html?path=/docs/single--docs"
        id="single--docs"
        tabindex="-1"
      >
        <div
          class="css-99l9qv"
        >
          <svg
            class="css-1omskcr"
            height="12"
            type="document"
            viewBox="0 0 14 14"
            width="12"
          >
            <use
              xlink:href="#icon--document"
            />
          </svg>
        </div>
        Single
      </a>
      <div
        class="css-a36yur"
        data-displayed="off"
        data-testid="context-menu"
      >
        <button
          class="css-sgjymn"
          type="button"
        >
          <svg
            fill="none"
            height="14"
            viewBox="0 0 14 14"
            width="14"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM13 7a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM7 8.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
              fill="currentColor"
            />
          </svg>
        </button>
      </div>
    </div>
    <div
      class="sidebar-subheading css-1ikkmhb"
      data-item-id="tooltip"
      data-nodetype="root"
      data-ref-id="storybook_internal"
      id="tooltip"
    >
      <button
        aria-expanded="true"
        class="css-h7e28b"
        data-action="collapse-root"
        type="button"
      >
        <div
          class="css-1h0aucu"
        >
          <svg
            fill="none"
            height="8"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z"
              fill="#73828C"
              fill-rule="evenodd"
            />
          </svg>
        </div>
        tooltip
      </button>
      <button
        aria-label="Collapse"
        class="sidebar-subheading-action css-18rvurk"
        data-action="expand-all"
        data-expanded="false"
      >
        <svg
          fill="none"
          height="14"
          viewBox="0 0 14 14"
          width="14"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z"
            fill="currentColor"
          />
        </svg>
      </button>
    </div>
    <div
      class="sidebar-item css-ld0a14"
      data-highlightable="true"
      data-item-id="tooltip-tooltipbuildlist"
      data-nodetype="component"
      data-parent-id="tooltip"
      data-ref-id="storybook_internal"
    >
      <button
        aria-controls="tooltip-tooltipbuildlist--default tooltip-tooltipbuildlist--no-commit"
        aria-expanded="true"
        class="css-154pbrb"
        id="tooltip-tooltipbuildlist"
        tabindex="-1"
      >
        <div
          class="css-99l9qv"
        >
          <div
            class="css-1h0aucu"
          >
            <svg
              fill="none"
              height="8"
              width="8"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z"
                fill="#73828C"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <svg
            class="css-1e3avu6"
            height="12"
            ...
    at waitForWrapper (https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/iframe-DdqaNR1R.js:325:3590)
    at https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/iframe-DdqaNR1R.js:333:288
    at Foe.invoke (https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/iframe-DdqaNR1R.js:217:9206)
    at Foe.intercept (https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/iframe-DdqaNR1R.js:217:6615)
    at Foe.track (https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/iframe-DdqaNR1R.js:217:6345)
    at Object.findByTestId (https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/iframe-DdqaNR1R.js:217:5713)
    at play (https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/Tree.stories-DL58ITPv.js:1:4949)
    at async rme.runPhase (https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/iframe-DdqaNR1R.js:917:826)
    at async rme.render (https://635781f3500dd2c49e189caf-ulldbahhpl.capture-loopback.chromatic.com/assets/iframe-DdqaNR1R.js:917:3794)