NotificationItem:Clickable

Build 13915 on tom/23347-story-globals
1200px
Reviewing disabled
View latest build
chromechrome
ErrorBuild 13915 on tom/23347-story-globals
View Storybook
ErrorBuild 13915 on tom/23347-story-globals
View Storybook
The baseline is shorter than the new snapshot (1200x94 to 1200x900).
edgeedge
The baseline is shorter than the new snapshot (1200x94 to 1200x900).
firefoxfirefox
The baseline is shorter than the new snapshot (1200x94 to 1200x900).
Fail
NotificationItem.stories.tsx
Found multiple elements with the text: Storybook cool!

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  class="css-xe8x26"
  title="Storybook cool!"
>
  Storybook cool!
</div>

Ignored nodes: comments, script, style
<div
  class="css-xe8x26"
  title="Storybook cool!"
>
  Storybook cool!
</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-ec0dpa"
    data-side="left"
  >
    <div
      style="width: 240px; margin: 1rem;"
    >
      <div
        class="css-15v6gb6"
      >
        <div
          class="css-1i0ye5"
        >
          <div
            class="css-xe8x26"
            title="Storybook cool!"
          >
            Storybook cool!
          </div>
        </div>
        <button
          class="css-tb84pu"
          title="Dismiss notification"
        >
          <svg
            fill="none"
            height="12"
            viewBox="0 0 14 14"
            width="12"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.03.97A.75.75 0 00.97 2.03L5.94 7 .97 11.97a.75.75 0 101.06 1.06L7 8.06l4.97 4.97a.75.75 0 101.06-1.06L8.06 7l4.97-4.97A.75.75 0 0011.97.97L7 5.94 2.03.97z"
              fill="currentColor"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div
    class="css-b8mu1s"
    data-side="right"
  >
    <div
      style="width: 240px; margin: 1rem;"
    >
      <div
        class="css-xyccuw"
      >
        <div
          class="css-1jl8eks"
        >
          <div
            class="css-xe8x26"
            title="Storybook cool!"
          >
            Storybook cool!
          </div>
        </div>
        <button
          class="css-1k277nt"
          title="Dismiss notification"
        >
          <svg
            fill="none"
            height="12"
            viewBox="0 0 14 14"
            width="12"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.03.97A.75.75 0 00.97 2.03L5.94 7 .97 11.97a.75.75 0 101.06 1.06L7 8.06l4.97 4.97a.75.75 0 101.06-1.06L8.06 7l4.97-4.97A.75.75 0 0011.97.97L7 5.94 2.03.97z"
              fill="currentColor"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="css-ec0dpa"
    data-side="left"
  >
    <div
      style="width: 240px; margin: 1rem;"
    >
      <div
        class="css-15v6gb6"
      >
        <div
          class="css-1i0ye5"
        >
          <div
            class="css-xe8x26"
            title="Storybook cool!"
          >
            Storybook cool!
          </div>
        </div>
        <button
          class="css-tb84pu"
          title="Dismiss notification"
        >
          <svg
            fill="none"
            height="12"
            viewBox="0 0 14 14"
            width="12"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.03.97A.75.75 0 00.97 2.03L5.94 7 .97 11.97a.75.75 0 101.06 1.06L7 8.06l4.97 4.97a.75.75 0 101.06-1.06L8.06 7l4.97-4.97A.75.75 0 0011.97.97L7 5.94 2.03.97z"
              fill="currentColor"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div
    class="css-b8mu1s"
    data-side="right"
  >
    <div
      style="width: 240px; margin: 1rem;"
    >
      <div
        class="css-xyccuw"
      >
        <div
          class="css-1jl8eks"
        >
          <div
            class="css-xe8x26"
            title="Storybook cool!"
          >
            Storybook cool!
          </div>
        </div>
        <button
          class="css-1k277nt"
          title="Dismiss notification"
        >
          <svg
            fill="none"
            height="12"
            viewBox="0 0 14 14"
            width="12"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.03.97A.75.75 0 00.97 2.03L5.94 7 .97 11.97a.75.75 0 101.06 1.06L7 8.06l4.97 4.97a.75.75 0 101.06-1.06L8.06 7l4.97-4.97A.75.75 0 0011.97.97L7 5.94 2.03.97z"
              fill="currentColor"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
View in Storybook
Chrome 121
1200x900
Linux Linux Ubuntu 20.04.4
72dbdf on tom/23347-story-globals
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 with the text: Storybook cool!

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  class="css-xe8x26"
  title="Storybook cool!"
>
  Storybook cool!
</div>

Ignored nodes: comments, script, style
<div
  class="css-xe8x26"
  title="Storybook cool!"
>
  Storybook cool!
</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-ec0dpa"
    data-side="left"
  >
    <div
      style="width: 240px; margin: 1rem;"
    >
      <div
        class="css-15v6gb6"
      >
        <div
          class="css-1i0ye5"
        >
          <div
            class="css-xe8x26"
            title="Storybook cool!"
          >
            Storybook cool!
          </div>
        </div>
        <button
          class="css-tb84pu"
          title="Dismiss notification"
        >
          <svg
            fill="none"
            height="12"
            viewBox="0 0 14 14"
            width="12"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.03.97A.75.75 0 00.97 2.03L5.94 7 .97 11.97a.75.75 0 101.06 1.06L7 8.06l4.97 4.97a.75.75 0 101.06-1.06L8.06 7l4.97-4.97A.75.75 0 0011.97.97L7 5.94 2.03.97z"
              fill="currentColor"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div
    class="css-b8mu1s"
    data-side="right"
  >
    <div
      style="width: 240px; margin: 1rem;"
    >
      <div
        class="css-xyccuw"
      >
        <div
          class="css-1jl8eks"
        >
          <div
            class="css-xe8x26"
            title="Storybook cool!"
          >
            Storybook cool!
          </div>
        </div>
        <button
          class="css-1k277nt"
          title="Dismiss notification"
        >
          <svg
            fill="none"
            height="12"
            viewBox="0 0 14 14"
            width="12"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.03.97A.75.75 0 00.97 2.03L5.94 7 .97 11.97a.75.75 0 101.06 1.06L7 8.06l4.97 4.97a.75.75 0 101.06-1.06L8.06 7l4.97-4.97A.75.75 0 0011.97.97L7 5.94 2.03.97z"
              fill="currentColor"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
    at Ea (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:143:3360)
    at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:151:235
    at sn.invoke (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:9372)
    at sn.intercept (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:6773)
    at sn.track (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:6505)
    at Object.findByText (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:5777)
    at play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/NotificationItem.stories-4443e618.js:1:1235)
    at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/sb-preview/runtime.js:8267:60
    at pi.runPhase (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/sb-preview/runtime.js:8158:100)
    at pi.render (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/sb-preview/runtime.js:8267:25)