chromeThe baseline is shorter than the new snapshot (1200x536 to 1200x900).
edgeThe baseline is shorter than the new snapshot (1200x536 to 1200x900).
firefoxThe baseline is shorter than the new snapshot (1200x536 to 1200x900).
Fail
Found multiple elements with the text: Lorem ipsum dolor sit
Here are the matching elements:
Ignored nodes: comments, script, style
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
Ignored nodes: comments, script, style
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body
class="sb-main-padded sb-show-main"
>
<div
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<div
class="sb-errordisplay_main"
>
<h1
id="error-message"
/>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
</p>
<ol>
<li>
<strong>
Missing Context/Providers
</strong>
: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<a
href="https://storybook.js.org/docs/react/writing-stories/decorators"
>
Decorators documentation
</a>
.
</li>
<li>
<strong>
Misconfigured Webpack or Vite
</strong>
: Verify that Storybook picks up all necessary
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
guides for configuring
<a
href="https://storybook.js.org/docs/builders/webpack"
>
Webpack
</a>
or
<a
href="https://storybook.js.org/docs/builders/vite"
>
Vite
</a>
with Storybook.
</li>
<li>
<strong>
Missing Environment Variables
</strong>
: Your Storybook may require specific
environment variables to function as intended. You can set up custom environment variables
as outlined in the
<a
href="https://storybook.js.org/docs/configure/environment-variables"
>
Environment Variables documentation
</a>
.
</li>
</ol>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
</div>
<div
id="storybook-root"
>
<div
class="css-ec0dpa"
data-side="left"
>
<div
class="css-vycneo"
>
<div
class="css-mfs8os"
>
<div
class="css-73nay0"
/>
<div
class="css-c3junj"
>
<div
class="css-k38wl8"
>
Click me!
</div>
</div>
</div>
</div>
</div>
<div
class="css-b8mu1s"
data-side="right"
>
<div
class="css-vycneo"
>
<div
class="css-mfs8os"
>
<div
class="css-73nay0"
/>
<div
class="css-c3junj"
>
<div
class="css-k38wl8"
>
Click me!
</div>
</div>
</div>
</div>
</div>
</div>
<div
hidden="true"
id="storybook-docs"
/>
<div
class="css-1xu5hf8"
data-popper-escaped="false"
data-popper-interactive="false"
data-popper-placement="bottom"
data-popper-reference-hidden="false"
data-testid="tooltip"
style="position: absolute; inset: 0px auto auto 0px; transform: translate(8px, 218px);"
>
<div
class="css-l58ddo"
>
<div
class="css-1oi1skv"
>
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
<span
class="css-0"
>
Amet consectatur vestibulum concet durum politu coret weirom
</span>
</div>
<div
class="css-oxnabb"
>
<a
class="css-yzmtbe"
>
<span
class="css-0"
>
Continue
</span>
</a>
</div>
</div>
</div>
<div
class="css-ulrx78"
data-popper-escaped="false"
data-popper-interactive="false"
data-popper-placement="bottom"
data-popper-reference-hidden="false"
data-testid="tooltip"
style="position: absolute; inset: 0px auto auto 0px; transform: translate(578px, 218px);"
>
<div
class="css-l58ddo"
>
<div
class="css-dxmjf5"
>
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
<span
class="css-0"
>
Amet consectatur vestibulum concet durum politu coret weirom
</span>
</div>
<div
class="css-oxnabb"
>
<a
class="css-yzmtbe"
>
<span
class="css-0"
>
Continue
</span>
</a>
</div>
</div>
</div>
</body>
Ignored nodes: comments, script, style
<body
class="sb-main-padded sb-show-main"
>
<div
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<div
class="sb-errordisplay_main"
>
<h1
id="error-message"
/>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
</p>
<ol>
<li>
<strong>
Missing Context/Providers
</strong>
: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<a
href="https://storybook.js.org/docs/react/writing-stories/decorators"
>
Decorators documentation
</a>
.
</li>
<li>
<strong>
Misconfigured Webpack or Vite
</strong>
: Verify that Storybook picks up all necessary
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
guides for configuring
<a
href="https://storybook.js.org/docs/builders/webpack"
>
Webpack
</a>
or
<a
href="https://storybook.js.org/docs/builders/vite"
>
Vite
</a>
with Storybook.
</li>
<li>
<strong>
Missing Environment Variables
</strong>
: Your Storybook may require specific
environment variables to function as intended. You can set up custom environment variables
as outlined in the
<a
href="https://storybook.js.org/docs/configure/environment-variables"
>
Environment Variables documentation
</a>
.
</li>
</ol>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
</div>
<div
id="storybook-root"
>
<div
class="css-ec0dpa"
data-side="left"
>
<div
class="css-vycneo"
>
<div
class="css-mfs8os"
>
<div
class="css-73nay0"
/>
<div
class="css-c3junj"
>
<div
class="css-k38wl8"
>
Click me!
</div>
</div>
</div>
</div>
</div>
<div
class="css-b8mu1s"
data-side="right"
>
<div
class="css-vycneo"
>
<div
class="css-mfs8os"
>
<div
class="css-73nay0"
/>
<div
class="css-c3junj"
>
<div
class="css-k38wl8"
>
Click me!
</div>
</div>
</div>
</div>
</div>
</div>
<div
hidden="true"
id="storybook-docs"
/>
<div
class="css-1xu5hf8"
data-popper-escaped="false"
data-popper-interactive="false"
data-popper-placement="bottom"
data-popper-reference-hidden="false"
data-testid="tooltip"
style="position: absolute; inset: 0px auto auto 0px; transform: translate(8px, 218px);"
>
<div
class="css-l58ddo"
>
<div
class="css-1oi1skv"
>
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
<span
class="css-0"
>
Amet consectatur vestibulum concet durum politu coret weirom
</span>
</div>
<div
class="css-oxnabb"
>
<a
class="css-yzmtbe"
>
<span
class="css-0"
>
Continue
</span>
</a>
</div>
</div>
</div>
<div
class="css-ulrx78"
data-popper-escaped="false"
data-popper-interactive="false"
data-popper-placement="bottom"
data-popper-reference-hidden="false"
data-testid="tooltip"
style="position: absolute; inset: 0px auto auto 0px; transform: translate(578px, 218px);"
>
<div
class="css-l58ddo"
>
<div
class="css-dxmjf5"
>
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
<span
class="css-0"
>
Amet consectatur vestibulum concet durum politu coret weirom
</span>
</div>
<div
class="css-oxnabb"
>
<a
class="css-yzmtbe"
>
<span
class="css-0"
>
Continue
</span>
</a>
</div>
</div>
</div>
</body>View in StorybookChrome 1211200x900
Linux Linux Ubuntu 20.04.4
72dbdf on tom/23347-story-globals
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Found multiple elements with the text: Lorem ipsum dolor sit
Here are the matching elements:
Ignored nodes: comments, script, style
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
Ignored nodes: comments, script, style
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body
class="sb-main-padded sb-show-main"
>
<div
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<div
class="sb-errordisplay_main"
>
<h1
id="error-message"
/>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
</p>
<ol>
<li>
<strong>
Missing Context/Providers
</strong>
: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<a
href="https://storybook.js.org/docs/react/writing-stories/decorators"
>
Decorators documentation
</a>
.
</li>
<li>
<strong>
Misconfigured Webpack or Vite
</strong>
: Verify that Storybook picks up all necessary
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
guides for configuring
<a
href="https://storybook.js.org/docs/builders/webpack"
>
Webpack
</a>
or
<a
href="https://storybook.js.org/docs/builders/vite"
>
Vite
</a>
with Storybook.
</li>
<li>
<strong>
Missing Environment Variables
</strong>
: Your Storybook may require specific
environment variables to function as intended. You can set up custom environment variables
as outlined in the
<a
href="https://storybook.js.org/docs/configure/environment-variables"
>
Environment Variables documentation
</a>
.
</li>
</ol>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
</div>
<div
id="storybook-root"
>
<div
class="css-ec0dpa"
data-side="left"
>
<div
class="css-vycneo"
>
<div
class="css-mfs8os"
>
<div
class="css-73nay0"
/>
<div
class="css-c3junj"
>
<div
class="css-k38wl8"
>
Click me!
</div>
</div>
</div>
</div>
</div>
<div
class="css-b8mu1s"
data-side="right"
>
<div
class="css-vycneo"
>
<div
class="css-mfs8os"
>
<div
class="css-73nay0"
/>
<div
class="css-c3junj"
>
<div
class="css-k38wl8"
>
Click me!
</div>
</div>
</div>
</div>
</div>
</div>
<div
hidden="true"
id="storybook-docs"
/>
<div
class="css-1xu5hf8"
data-popper-escaped="false"
data-popper-interactive="false"
data-popper-placement="bottom"
data-popper-reference-hidden="false"
data-testid="tooltip"
style="position: absolute; inset: 0px auto auto 0px; transform: translate(8px, 218px);"
>
<div
class="css-l58ddo"
>
<div
class="css-1oi1skv"
>
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
<span
class="css-0"
>
Amet consectatur vestibulum concet durum politu coret weirom
</span>
</div>
<div
class="css-oxnabb"
>
<a
class="css-yzmtbe"
>
<span
class="css-0"
>
Continue
</span>
</a>
</div>
</div>
</div>
<div
class="css-ulrx78"
data-popper-escaped="false"
data-popper-interactive="false"
data-popper-placement="bottom"
data-popper-reference-hidden="false"
data-testid="tooltip"
style="position: absolute; inset: 0px auto auto 0px; transform: translate(578px, 218px);"
>
<div
class="css-l58ddo"
>
<div
class="css-dxmjf5"
>
<div
class="css-1vg6q84"
>
Lorem ipsum dolor sit
</div>
<span
class="css-0"
>
Amet consectatur vestibulum concet durum politu coret weirom
</span>
</div>
<div
class="css-oxnabb"
>
<a
class="css-yzmtbe"
>
<span
class="css-0"
>
Continue
</span>
</a>
</div>
</div>
</div>
</body>
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 Proxy.findByText (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:5777)
at play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/WithTooltip.stories-db76befa.js:1:1654)
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)