SnapshotComparison:Switching Mode

Build 1158 on ghengeveld/ap-3737-move-switch-snapshot-and-diff-buttons
Bottom 2-up
Reviewing disabled
Fail
SnapshotComparison.stories.tsx
Unable to find role="button" and name "320px"

Ignored nodes: comments, script, style
<div
  class="css-6yv6gr"
  data-canvas="bottom"
  orientation="bottom"
>
  <div
    class="css-1qonxdy"
  >
    <div
      class="css-1z0q0sr"
    >
      <div
        class="css-1teve26"
      >
        <div
          class="css-kyu95o"
        >
          <span>
            <b>
              No changes
            </b>
            <svg
              class="css-lht5p2"
              height="14px"
              viewBox="0 0 14 14"
              width="14px"
            >
              <path
                d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm3.85-9.35c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7 0l-2.5-2.5a.5.5 0 1 1 .7-.7L6 8.79l4.15-4.14c.2-.2.5-.2.7 0Z"
              />
            </svg>
          </span>
          <small>
            <span>
              3 modes
              , 
              2 browsers
            </span>
             • 
            <span
              title="Tue, 31 Oct 2023 18:39:05 GMT"
            >
              less than a minute ago
            </span>
          </small>
        </div>
        <div
          class="css-1cu2l22"
        >
          <div
            class="css-17fv6jh"
          >
            <button
              class="css-ae8uxv"
              data-testid="button-toggle-snapshot"
              type="button"
            >
              <svg
                class="css-149xqrd"
                height="14px"
                viewBox="0 0 14 14"
                width="14px"
              >
                <path
                  d="M10.65 2.65c.2-.2.5-.2.7 0l1.5 1.5c.2.2.2.5 0 .7l-1.5 1.5a.5.5 0 0 1-.7-.7l.64-.65H1.5a.5.5 0 0 1 0-1h9.8l-.65-.65a.5.5 0 0 1 0-.7ZM3.35 8.35 2.71 9h9.79a.5.5 0 0 1 0 1H2.7l.65.65a.5.5 0 0 1-.7.7l-1.5-1.5a.5.5 0 0 1 0-.7l1.5-1.5a.5.5 0 1 1 .7.7Z"
                />
              </svg>
            </button>
          </div>
          <div
            class="css-11zsu3t"
            style="margin-left: 5px; width: 100%;"
          >
            <b>
              Latest
            </b>
             Build 
            1
             on 
            feature-branch
          </div>
        </div>
      </div>
    </div>
    <div
      class="css-18xq8qy"
    >
      <div
        class="css-1k4458r"
      >
        <img
          alt="Snapshot for the 'Primary' story of the 'Button' component"
          src="/ProjectItem-Chrome-320.png"
        />
      </div>
    </div>
    <div
      class="css-9q5ssz"
    />
  </div>
</div>

Ignored nodes: comments, script, style
<div
  class="css-6yv6gr"
  data-canvas="bottom"
  orientation="bottom"
>
  <div
    class="css-1qonxdy"
  >
    <div
      class="css-1z0q0sr"
    >
      <div
        class="css-1teve26"
      >
        <div
          class="css-kyu95o"
        >
          <span>
            <b>
              No changes
            </b>
            <svg
              class="css-lht5p2"
              height="14px"
              viewBox="0 0 14 14"
              width="14px"
            >
              <path
                d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm3.85-9.35c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7 0l-2.5-2.5a.5.5 0 1 1 .7-.7L6 8.79l4.15-4.14c.2-.2.5-.2.7 0Z"
              />
            </svg>
          </span>
          <small>
            <span>
              3 modes
              , 
              2 browsers
            </span>
             • 
            <span
              title="Tue, 31 Oct 2023 18:39:05 GMT"
            >
              less than a minute ago
            </span>
          </small>
        </div>
        <div
          class="css-1cu2l22"
        >
          <div
            class="css-17fv6jh"
          >
            <button
              class="css-ae8uxv"
              data-testid="button-toggle-snapshot"
              type="button"
            >
              <svg
                class="css-149xqrd"
                height="14px"
                viewBox="0 0 14 14"
                width="14px"
              >
                <path
                  d="M10.65 2.65c.2-.2.5-.2.7 0l1.5 1.5c.2.2.2.5 0 .7l-1.5 1.5a.5.5 0 0 1-.7-.7l.64-.65H1.5a.5.5 0 0 1 0-1h9.8l-.65-.65a.5.5 0 0 1 0-.7ZM3.35 8.35 2.71 9h9.79a.5.5 0 0 1 0 1H2.7l.65.65a.5.5 0 0 1-.7.7l-1.5-1.5a.5.5 0 0 1 0-.7l1.5-1.5a.5.5 0 1 1 .7.7Z"
                />
              </svg>
            </button>
          </div>
          <div
            class="css-11zsu3t"
            style="margin-left: 5px; width: 100%;"
          >
            <b>
              Latest
            </b>
             Build 
            1
             on 
            feature-branch
          </div>
        </div>
      </div>
    </div>
    <div
      class="css-18xq8qy"
    >
      <div
        class="css-1k4458r"
      >
        <img
          alt="Snapshot for the 'Primary' story of the 'Button' component"
          src="/ProjectItem-Chrome-320.png"
        />
      </div>
    </div>
    <div
      class="css-9q5ssz"
    />
  </div>
</div>
View in Storybook
Chrome 105
960x720
Linux Linux Ubuntu 20.04.4
a6013f on ghengeveld/ap-3737-move-switch-snapshot-and-diff-buttons
Unable to find role="button" and name "320px"

Ignored nodes: comments, script, style
<div
  class="css-1fcd2ci"
  data-canvas="bottom"
  orientation="bottom"
>
  <div
    class="css-k01oam"
  >
    <div
      class="css-e5jdyv"
    >
      <div
        class="css-1xz1bml"
      >
        <div
          class="css-1o20qqr"
        >
          <span>
            <b>
              No changes
            </b>
            <svg
              class="css-lht5p2"
              height="14px"
              viewBox="0 0 14 14"
              width="14px"
            >
              <path
                d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm3.85-9.35c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7 0l-2.5-2.5a.5.5 0 1 1 .7-.7L6 8.79l4.15-4.14c.2-.2.5-.2.7 0Z"
              />
            </svg>
          </span>
          <small>
            <span>
              3 modes
              , 
              2 browsers
            </span>
             • 
            <span
              title="Tue, 31 Oct 2023 18:39:05 GMT"
            >
              less than a minute ago
            </span>
          </small>
        </div>
        <div
          class="css-1cu2l22"
        >
          <div
            class="css-17fv6jh"
          >
            <button
              class="css-1wrd8mw"
              data-testid="button-toggle-snapshot"
              type="button"
            >
              <svg
                class="css-149xqrd"
                height="14px"
                viewBox="0 0 14 14"
                width="14px"
              >
                <path
                  d="M10.65 2.65c.2-.2.5-.2.7 0l1.5 1.5c.2.2.2.5 0 .7l-1.5 1.5a.5.5 0 0 1-.7-.7l.64-.65H1.5a.5.5 0 0 1 0-1h9.8l-.65-.65a.5.5 0 0 1 0-.7ZM3.35 8.35 2.71 9h9.79a.5.5 0 0 1 0 1H2.7l.65.65a.5.5 0 0 1-.7.7l-1.5-1.5a.5.5 0 0 1 0-.7l1.5-1.5a.5.5 0 1 1 .7.7Z"
                />
              </svg>
            </button>
          </div>
          <div
            class="css-9bfrsr"
            style="margin-left: 5px; width: 100%;"
          >
            <b>
              Latest
            </b>
             Build 
            1
             on 
            feature-branch
          </div>
        </div>
      </div>
    </div>
    <div
      class="css-18xq8qy"
    >
      <div
        class="css-1k4458r"
      >
        <img
          alt="Snapshot for the 'Primary' story of the 'Button' component"
          loading="eager"
          src="/ProjectItem-Chrome-320.png"
        />
      </div>
    </div>
    <div
      class="css-9kgic9"
    />
  </div>
</div>

Ignored nodes: comments, script, style
<div
  class="css-1fcd2ci"
  data-canvas="bottom"
  orientation="bottom"
>
  <div
    class="css-k01oam"
  >
    <div
      class="css-e5jdyv"
    >
      <div
        class="css-1xz1bml"
      >
        <div
          class="css-1o20qqr"
        >
          <span>
            <b>
              No changes
            </b>
            <svg
              class="css-lht5p2"
              height="14px"
              viewBox="0 0 14 14"
              width="14px"
            >
              <path
                d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14Zm3.85-9.35c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7 0l-2.5-2.5a.5.5 0 1 1 .7-.7L6 8.79l4.15-4.14c.2-.2.5-.2.7 0Z"
              />
            </svg>
          </span>
          <small>
            <span>
              3 modes
              , 
              2 browsers
            </span>
             • 
            <span
              title="Tue, 31 Oct 2023 18:39:05 GMT"
            >
              less than a minute ago
            </span>
          </small>
        </div>
        <div
          class="css-1cu2l22"
        >
          <div
            class="css-17fv6jh"
          >
            <button
              class="css-1wrd8mw"
              data-testid="button-toggle-snapshot"
              type="button"
            >
              <svg
                class="css-149xqrd"
                height="14px"
                viewBox="0 0 14 14"
                width="14px"
              >
                <path
                  d="M10.65 2.65c.2-.2.5-.2.7 0l1.5 1.5c.2.2.2.5 0 .7l-1.5 1.5a.5.5 0 0 1-.7-.7l.64-.65H1.5a.5.5 0 0 1 0-1h9.8l-.65-.65a.5.5 0 0 1 0-.7ZM3.35 8.35 2.71 9h9.79a.5.5 0 0 1 0 1H2.7l.65.65a.5.5 0 0 1-.7.7l-1.5-1.5a.5.5 0 0 1 0-.7l1.5-1.5a.5.5 0 1 1 .7.7Z"
                />
              </svg>
            </button>
          </div>
          <div
            class="css-9bfrsr"
            style="margin-left: 5px; width: 100%;"
          >
            <b>
              Latest
            </b>
             Build 
            1
             on 
            feature-branch
          </div>
        </div>
      </div>
    </div>
    <div
      class="css-18xq8qy"
    >
      <div
        class="css-1k4458r"
      >
        <img
          alt="Snapshot for the 'Primary' story of the 'Button' component"
          loading="eager"
          src="/ProjectItem-Chrome-320.png"
        />
      </div>
    </div>
    <div
      class="css-9kgic9"
    />
  </div>
</div>
View in Storybook
Chrome 105
960x720
Linux Linux Ubuntu 20.04.4
a6013f on ghengeveld/ap-3737-move-switch-snapshot-and-diff-buttons
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-etrjhegpkj.capture-loopback.chromatic.com/sb-preview/runtime.js:4:93306