Fail
Unable to find an element with the text: How large should the button be?. 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-1q5n1a9"
>
<span>
Detected play function in Chromatic. Rendering only light theme to avoid multiple play functions in the same story.
</span>
</div>
<div
style="margin-bottom: 20px;"
/>
<div
class="sbdocs sbdocs-wrapper css-k7lbue"
>
<div
class="sbdocs sbdocs-content css-qa4clq"
>
<h1
class="sbdocs-title sb-unstyled css-11knh3z"
>
Stories for the DocsPage
</h1>
<p>
This is the description for the component
</p>
<p>
This is the description for the primary story
</p>
<div
class="sb-anchor"
id="anchor--blocks-examples-stories-for-the-docspage--single-story"
>
<div
class=" sbdocs sbdocs-preview sb-unstyled css-hd7ysc"
>
<div
class="css-l1e2yg"
>
<div
class="css-p1dfi6"
>
<div
class="css-4ii5m"
>
<button
class="css-17dxjer"
title="Zoom in"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M6 3.5c.28 0 .5.22.5.5v1.5H8a.5.5 0 0 1 0 1H6.5V8a.5.5 0 0 1-1 0V6.5H4a.5.5 0 0 1 0-1h1.5V4c0-.28.22-.5.5-.5Z"
/>
<path
d="M9.54 10.2a5.5 5.5 0 1 1 .66-.66c.06.03.11.06.15.1l3 3a.5.5 0 0 1-.7.71l-3-3a.5.5 0 0 1-.1-.14ZM10.5 6a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z"
fill-rule="evenodd"
/>
</svg>
</button>
<button
class="css-17dxjer"
title="Zoom out"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M4 5.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1H4Z"
/>
<path
d="M6 11.5c1.35 0 2.59-.49 3.54-1.3.03.06.06.11.1.15l3 3a.5.5 0 0 0 .71-.7l-3-3a.5.5 0 0 0-.14-.1A5.5 5.5 0 1 0 6 11.5Zm0-1a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"
fill-rule="evenodd"
/>
</svg>
</button>
<button
class="css-17dxjer"
title="Reset zoom"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M1.5 2.84V1.5a.5.5 0 0 0-1 0V4c0 .28.22.5.5.5h2.5a.5.5 0 0 0 0-1H2.26a4.5 4.5 0 1 1-.5 4.02.5.5 0 1 0-.94.33 5.5 5.5 0 0 0 8.72 2.36l.1.14 3 3a.5.5 0 0 0 .71-.7l-3-3a.5.5 0 0 0-.14-.1 5.5 5.5 0 1 0-8.7-6.7Z"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="docs-story css-kdwx3d"
>
<div
class="css-1wjen9k"
>
<div
class="css-ec9hcp"
scale="1"
>
<div
class="innerZoomElementWrapper"
>
<div>
<div
class="sb-story sb-unstyled"
data-story-block="true"
id="story--blocks-examples-stories-for-the-docspage--single-story--primary"
>
<div
data-name="Single Story"
id="story--blocks-examples-stories-for-the-docspage--single-story--primary-inner"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<div>
This component is not intended to render anything, it simply serves a something to hang parameters off
</div>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<div>
This component is not intended to render anything, it simply serves a something to hang parameters off
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="css-11xgcgt"
>
<button
class="docblock-code-toggle css-1fdphfk"
>
Show code
</button>
</div>
</div>
</div>
</div>
<div
class="css-1sd4hk9"
>
<div
class="css-18s7g0r"
>
<div
class="css-es424d"
>
Interactive story playground
</div>
<div
class="css-1ye28yi"
>
Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically.
</div>
</div>
<div
class="css-1sb31b2"
>
<a
class="css-1b6psgo"
href="https://youtu.be/0gOfS6K0x0E"
target="_blank"
>
<span
class="css-k0y3uo"
>
<div
class="css-wzffp"
>
<span
aria-hidden="true"
role="img"
style="color: currentcolor; width: 10px; height: 10px; display: inline-flex; font-size: inherit;"
>
<svg
fill="none"
height="inherit"
viewBox="0 0 14 14"
width="inherit"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.813 7.425l-9.05 5.603A.5.5 0 013 12.603V1.398a.5.5 0 01.763-.425l9.05 5.602a.5.5 0 010 .85z"
fill="currentColor"
/>
</svg>
</span>
</div>
Watch 5m video
</span>
<span
aria-hidden="true"
role="img"
style="color: currentcolor; width: 12px; height: 12px; display: inline-flex; font-size: inherit;"
>
<svg
fill="none"
height="inherit"
viewBox="0 0 14 14"
width="inherit"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.104 7.354l-5.5 5.5a.5.5 0 01-.708-.708L10.043 7 4.896 1.854a.5.5 0 11.708-.708l5.5 5.5a.5.5 0 010 .708z"
fill="currentColor"
/>
</svg>
</span>
</a>
<div
class="css-6eeocq"
/>
<a
class="css-1b6psgo"
href="https://storybook.js.org/docs/react/essentials/controls"
target="_blank"
>
<span
class="css-k0y3uo"
>
Read docs
</span>
<span
aria-hidden="true"
role="img"
style="color: currentcolor; width: 12px; height: 12px; display: inline-flex; font-size: inherit;"
>
<svg
fill="none"
height="inherit"
viewBox="0 0 14 14"
width="inherit"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.104 7.354l-5.5 5.5a.5.5 0 01-.708-.708L10.043 7 4.896 1.854a.5.5 0 11.708-.708l5.5 5.5a.5.5 0 010 .708z"
fill="currentColor"
/>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="css-1q5n1a9"
>
<span>
Detected play function in Chromatic. Rendering only light theme to avoid multiple play functions in the same story.
</span>
</div>
<div
style="margin-bottom: 20px;"
/>
<div
class="sbdocs sbdocs-wrapper css-k7lbue"
>
<div
class="sbdocs sbdocs-content css-qa4clq"
>
<h1
class="sbdocs-title sb-unstyled css-11knh3z"
>
Stories for the DocsPage
</h1>
<p>
This is the description for the component
</p>
<p>
This is the description for the primary story
</p>
<div
class="sb-anchor"
id="anchor--blocks-examples-stories-for-the-docspage--single-story"
>
<div
class=" sbdocs sbdocs-preview sb-unstyled css-hd7ysc"
>
<div
class="css-l1e2yg"
>
<div
class="css-p1dfi6"
>
<div
class="css-4ii5m"
>
<button
class="css-17dxjer"
title="Zoom in"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M6 3.5c.28 0 .5.22.5.5v1.5H8a.5.5 0 0 1 0 1H6.5V8a.5.5 0 0 1-1 0V6.5H4a.5.5 0 0 1 0-1h1.5V4c0-.28.22-.5.5-.5Z"
/>
<path
d="M9.54 10.2a5.5 5.5 0 1 1 .66-.66c.06.03.11.06.15.1l3 3a.5.5 0 0 1-.7.71l-3-3a.5.5 0 0 1-.1-.14ZM10.5 6a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z"
fill-rule="evenodd"
/>
</svg>
</button>
<button
class="css-17dxjer"
title="Zoom out"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M4 5.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1H4Z"
/>
<path
d="M6 11.5c1.35 0 2.59-.49 3.54-1.3.03.06.06.11.1.15l3 3a.5.5 0 0 0 .71-.7l-3-3a.5.5 0 0 0-.14-.1A5.5 5.5 0 1 0 6 11.5Zm0-1a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"
fill-rule="evenodd"
/>
</svg>
</button>
<button
class="css-17dxjer"
title="Reset zoom"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M1.5 2.84V1.5a.5.5 0 0 0-1 0V4c0 .28.22.5.5.5h2.5a.5.5 0 0 0 0-1H2.26a4.5 4.5 0 1 1-.5 4.02.5.5 0 1 0-.94.33 5.5 5.5 0 0 0 8.72 2.36l.1.14 3 3a.5.5 0 0 0 .71-.7l-3-3a.5.5 0 0 0-.14-.1 5.5 5.5 0 1 0-8.7-6.7Z"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="docs-story css-kdwx3d"
>
<div
class="css-1wjen9k"
>
<div
class="css-ec9hcp"
scale="1"
>
<div
class="innerZoomElementWrapper"
>
<div>
<div
class="sb-story sb-unstyled"
data-story-block="true"
id="story--blocks-examples-stories-for-the-docspage--single-story--primary"
>
<div
data-name="Single Story"
id="story--blocks-examples-stories-for-the-docspage--single-story--primary-inner"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<div>
This component is not intended to render anything, it simply serves a something to hang parameters off
</div>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<div>
This component is not intended to render anything, it simply serves a something to hang parameters off
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="css-11xgcgt"
>
<button
class="docblock-code-toggle css-1fdphfk"
>
Show code
</button>
</div>
</div>
</div>
</div>
<div
class="css-1sd4hk9"
>
<div
class="css-18s7g0r"
>
<div
class="css-es424d"
>
Interactive story playground
</div>
<div
class="css-1ye28yi"
>
Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically.
</div>
</div>
<div
class="css-1sb31b2"
>
<a
class="css-1b6psgo"
href="https://youtu.be/0gOfS6K0x0E"
target="_blank"
>
<span
class="css-k0y3uo"
>
<div
class="css-wzffp"
>
<span
aria-hidden="true"
role="img"
style="color: currentcolor; width: 10px; height: 10px; display: inline-flex; font-size: inherit;"
>
<svg
fill="none"
height="inherit"
viewBox="0 0 14 14"
width="inherit"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.813 7.425l-9.05 5.603A.5.5 0 013 12.603V1.398a.5.5 0 01.763-.425l9.05 5.602a.5.5 0 010 .85z"
fill="currentColor"
/>
</svg>
</span>
</div>
Watch 5m video
</span>
<span
aria-hidden="true"
role="img"
style="color: currentcolor; width: 12px; height: 12px; display: inline-flex; font-size: inherit;"
>
<svg
fill="none"
height="inherit"
viewBox="0 0 14 14"
width="inherit"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.104 7.354l-5.5 5.5a.5.5 0 01-.708-.708L10.043 7 4.896 1.854a.5.5 0 11.708-.708l5.5 5.5a.5.5 0 010 .708z"
fill="currentColor"
/>
</svg>
</span>
</a>
<div
class="css-6eeocq"
/>
<a
class="css-1b6psgo"
href="https://storybook.js.org/docs/react/essentials/controls"
target="_blank"
>
<span
class="css-k0y3uo"
>
Read docs
</span>
<span
aria-hidden="true"
role="img"
style="color: currentcolor; width: 12px; height: 12px; display: inline-flex; font-size: inherit;"
>
<svg
fill="none"
height="inherit"
viewBox="0 0 14 14"
width="inherit"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.104 7.354l-5.5 5.5a.5.5 0 01-.708-.708L10.043 7 4.896 1.854a.5.5 0 11.708-.708l5.5 5.5a.5.5 0 010 .708z"
fill="currentColor"
/>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>View in Storybook
Chrome 1051200x2497
Linux Linux Ubuntu 20.04.4
f3d282 on charles-update-controls-addon
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: ignoredException
at https://635781f3500dd2c49e189caf-jogkgjxvyq.capture.chromatic.com/sb-preview/runtime.js:4:95647