LightboxLayout:Click Info

Unable to find an element with the text: /ClickInfoTest/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="css-13br62s"
    data-color-scheme="light"
  >
    <div
      style="height: 100vh;"
    >
      <div
        aria-modal="true"
        class="css-1e4oyvk"
        hidden=""
        id="gu-lightbox"
        role="dialog"
      >
        <div
          class="css-os2q47"
        >
          <nav
            class="css-h4unms"
          >
            <button
              class="close css-1v07sbc"
              title="Close [ESC or Q]"
              type="button"
            >
              <svg
                aria-hidden="true"
                focusable="false"
                viewBox="-3 -3 30 30"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M12.015 14.042 20.707 22 22 20.709 14.06 12 22 3.291 20.707 2l-8.692 7.958L3.293 2.03 2 3.321 9.97 12 2 20.679l1.293 1.291 8.722-7.928Z"
                  fill-rule="evenodd"
                />
              </svg>
              <span
                class="css-ybr5tf"
              >
                Close dialogue
              </span>
            </button>
            <span
              class="css-n4pnam"
            >
              <span
                aria-hidden="true"
                class="css-1vz7rep"
                data-testid="lightbox-selected"
              >
                <span
                  class="selected"
                >
                  1
                </span>
                <span
                  class="css-8mhfnx"
                >
                  /
                </span>
                <span
                  class="css-tviv3x"
                >
                  1
                </span>
              </span>
            </span>
            <button
              class="next css-pnu31o"
              title="Next image [→]"
              type="button"
            >
              <svg
                aria-hidden="true"
                focusable="false"
                viewBox="-3 -3 30 30"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M1 12.956h18.274l-7.167 8.575.932.932L23 12.478v-.956l-9.96-9.985-.932.932 7.166 8.575H1v1.912Z"
                  fill-rule="evenodd"
                />
              </svg>
              <span
                class="css-ybr5tf"
              >
                Next image
              </span>
            </button>
            <button
              class="previous css-1c9urh0"
              title="Previous image [←]"
              type="button"
            >
              <svg
                aria-hidden="true"
                focusable="false"
                viewBox="-3 -3 30 30"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M23 11.044H4.726l7.167-8.575-.932-.932L1 11.522v.956l9.96 9.984.932-.931-7.166-8.575H23v-1.912Z"
                  fill-rule="evenodd"
                />
              </svg>
              <span
                class="css-ybr5tf"
              >
                Previous image
              </span>
            </button>
            <button
              class="info css-43tvi7"
              title="Toggle caption [i]"
              type="button"
            >
              <svg
                height="24"
                viewBox="0 0 9 24"
                width="9"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M.3 22L3.9 9.1H1.3l.4-1.4 5.6-.9.3.3-4.4 14.8H6L5.6 23c-.9.4-2.8.9-4.1.9-1.1 0-1.7-.5-1.2-1.9zM5.5 2C5.5.9 6.4.1 7.3.1c1 0 1.6.7 1.6 1.5 0 1.1-.9 1.9-1.8 1.9-1 .1-1.6-.6-1.6-1.5z"
                  fill="#FFFFFF"
                />
              </svg>
              <span
                class="css-ybr5tf"
              >
                Toggle caption
              </span>
            </button>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Chrome 121

980x900

Linux Linux Ubuntu 20.04.4

bb3b99 on doml/chromatic-lightbox-without-caption