Fail
Unable to find an accessible element with the role "button" and name "Maximize"
Here are the accessible roles:
button:
Name "View in full screen":
<button
aria-haspopup="false"
aria-label="View in full screen"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
title="View in full screen"
/>
Name "Download":
<button
aria-haspopup="false"
aria-label="Download"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
title="Download"
/>
Name "":
<button
class="svelte-eyi42u"
/>
--------------------------------------------------
link:
Name "":
<a
download="cheetah.jpg"
href="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
rel="noopener noreferrer"
/>
--------------------------------------------------
img:
Name "":
<img
alt=""
class="svelte-1r6sk7j"
loading="lazy"
src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="image-container"
style="width: 300px; position: relative; border-radius: var(--radius-lg); overflow: hidden;"
>
<div
class="block svelte-12cmxck"
id=""
style="border-style: solid; overflow: hidden; min-width: min(0px, 100%); border-width: var(--block-border-width);"
>
<div
class="wrap default full svelte-au1olv hide"
style="position: absolute; padding: 0px;"
/>
<label
class="svelte-1b6s6s float"
data-testid="block-label"
for=""
>
<span
class="svelte-1b6s6s"
>
<svg
class="feather feather-image"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="18"
rx="2"
ry="2"
width="18"
x="3"
y="3"
/>
<circle
cx="8.5"
cy="8.5"
r="1.5"
/>
<polyline
points="21 15 16 10 5 21"
/>
</svg>
</span>
Image
</label>
<div
class="image-container svelte-eyi42u"
>
<div
class="icon-buttons svelte-eyi42u"
>
<button
aria-haspopup="false"
aria-label="View in full screen"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
title="View in full screen"
>
<div
class="svelte-rk35yg small"
>
<svg
class="feather feather-maximize"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
/>
</svg>
</div>
</button>
<a
download="cheetah.jpg"
href="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
rel="noopener noreferrer"
>
<button
aria-haspopup="false"
aria-label="Download"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
title="Download"
>
<div
class="svelte-rk35yg small"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"
fill="currentColor"
/>
</svg>
</div>
</button>
</a>
</div>
<button
class="svelte-eyi42u"
>
<div
class="svelte-eyi42u"
>
<img
alt=""
class="svelte-1r6sk7j"
loading="lazy"
src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
/>
</div>
</button>
</div>
</div>
</div>
</div>View in Storybook
Chrome 121300x201
Linux Linux Ubuntu 20.04.4
a9cd9e on image-full-screen
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Maximize"
Here are the accessible roles:
button:
Name "View in full screen":
<button
aria-haspopup="false"
aria-label="View in full screen"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
title="View in full screen"
/>
Name "Download":
<button
aria-haspopup="false"
aria-label="Download"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
title="Download"
/>
Name "":
<button
class="svelte-eyi42u"
/>
--------------------------------------------------
link:
Name "":
<a
download="cheetah.jpg"
href="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
rel="noopener noreferrer"
/>
--------------------------------------------------
img:
Name "":
<img
alt=""
class="svelte-1r6sk7j"
loading="lazy"
src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="image-container"
style="width: 300px; position: relative; border-radius: var(--radius-lg); overflow: hidden;"
>
<div
class="block svelte-12cmxck"
id=""
style="border-style: solid; overflow: hidden; min-width: min(0px, 100%); border-width: var(--block-border-width);"
>
<div
class="wrap default full svelte-au1olv hide"
style="position: absolute; padding: 0px;"
/>
<label
class="svelte-1b6s6s float"
data-testid="block-label"
for=""
>
<span
class="svelte-1b6s6s"
>
<svg
class="feather feather-image"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="18"
rx="2"
ry="2"
width="18"
x="3"
y="3"
/>
<circle
cx="8.5"
cy="8.5"
r="1.5"
/>
<polyline
points="21 15 16 10 5 21"
/>
</svg>
</span>
Image
</label>
<div
class="image-container svelte-eyi42u"
>
<div
class="icon-buttons svelte-eyi42u"
>
<button
aria-haspopup="false"
aria-label="View in full screen"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
title="View in full screen"
>
<div
class="svelte-rk35yg small"
>
<svg
class="feather feather-maximize"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
/>
</svg>
</div>
</button>
<a
download="cheetah.jpg"
href="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
rel="noopener noreferrer"
>
<button
aria-haspopup="false"
aria-label="Download"
class="svelte-rk35yg padded"
style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
title="Download"
>
<div
class="svelte-rk35yg small"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"
fill="currentColor"
/>
</svg>
</div>
</button>
</a>
</div>
<button
class="svelte-eyi42u"
>
<div
class="svelte-eyi42u"
>
<img
alt=""
class="svelte-1r6sk7j"
loading="lazy"
src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
/>
</div>
</button>
</div>
</div>
</div>
</div>
at Object.getElementError (https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:117:284)
at https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:139:164
at https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:131:4163
at https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:139:387
at ln.invoke (https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:9266)
at ln.track (https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:6505)
at Object.getByRole (https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:5777)
at K.async.canvasElement (https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/Image.stories-Ci3TypRF.js:1:4529)
at _.play (https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/assets/collect-stories-CO8dCuoI.js:1:10149)
at playFunction (https://649585a46a67480e3074dc75-qkcbhzmaha.capture-loopback.chromatic.com/sb-preview/runtime.js:113:6184)