chromeThe baseline is shorter than the new snapshot (1200x178 to 1200x900).
edgeThe baseline is shorter than the new snapshot (1200x178 to 1200x900).
firefoxThe baseline is shorter than the new snapshot (1200x178 to 1200x900).
Fail
Found multiple elements with the text: Complete
Here are the matching elements:
Ignored nodes: comments, script, style
<button
type="button"
>
Complete
</button>
Ignored nodes: comments, script, style
<button
type="button"
>
Complete
</button>
(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"
>
<ul
class="css-13iez3p"
>
<li
class="css-1rrak06"
>
<div
aria-label="complete"
class="css-10ou7cu"
>
<svg
fill="none"
height="10"
viewBox="0 0 14 14"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.854 3.354a.5.5 0 00-.708-.708L5 10.793.854 6.646a.5.5 0 10-.708.708l4.5 4.5a.5.5 0 00.708 0l8.5-8.5z"
fill="white"
/>
</svg>
</div>
<div
class="css-2ubamd"
>
Hello World
</div>
</li>
<li
class="css-1rrak06"
>
<div
aria-label="not complete"
class="css-1m6mxch"
>
2
</div>
<div
class="css-2ubamd"
>
Bonjour le monde
</div>
</li>
<li
class="css-1rrak06"
>
<div
aria-label="not complete"
class="css-1m6mxch"
>
3
</div>
<div
class="css-2ubamd"
>
你好, 世界
</div>
</li>
</ul>
<br />
<button
type="button"
>
Complete
</button>
</div>
<div
class="css-b8mu1s"
data-side="right"
>
<ul
class="css-13iez3p"
>
<li
class="css-1rrak06"
>
<div
aria-label="complete"
class="css-10ou7cu"
>
<svg
fill="none"
height="10"
viewBox="0 0 14 14"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.854 3.354a.5.5 0 00-.708-.708L5 10.793.854 6.646a.5.5 0 10-.708.708l4.5 4.5a.5.5 0 00.708 0l8.5-8.5z"
fill="white"
/>
</svg>
</div>
<div
class="css-2ubamd"
>
Hello World
</div>
</li>
<li
class="css-1rrak06"
>
<div
aria-label="not complete"
class="css-1m6mxch"
>
2
</div>
<div
class="css-2ubamd"
>
Bonjour le monde
</div>
</li>
<li
class="css-1rrak06"
>
<div
aria-label="not complete"
class="css-1m6mxch"
>
3
</div>
<div
class="css-2ubamd"
>
你好, 世界
</div>
</li>
</ul>
<br />
<button
type="button"
>
Complete
</button>
</div>
</div>
<div
hidden="true"
id="storybook-docs"
/>
</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.
TestingLibraryElementError: Found multiple elements with the text: Complete
Here are the matching elements:
Ignored nodes: comments, script, style
<button
type="button"
>
Complete
</button>
Ignored nodes: comments, script, style
<button
type="button"
>
Complete
</button>
(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"
>
<ul
class="css-13iez3p"
>
<li
class="css-1rrak06"
>
<div
aria-label="complete"
class="css-10ou7cu"
>
<svg
fill="none"
height="10"
viewBox="0 0 14 14"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.854 3.354a.5.5 0 00-.708-.708L5 10.793.854 6.646a.5.5 0 10-.708.708l4.5 4.5a.5.5 0 00.708 0l8.5-8.5z"
fill="white"
/>
</svg>
</div>
<div
class="css-2ubamd"
>
Hello World
</div>
</li>
<li
class="css-1rrak06"
>
<div
aria-label="not complete"
class="css-1m6mxch"
>
2
</div>
<div
class="css-2ubamd"
>
Bonjour le monde
</div>
</li>
<li
class="css-1rrak06"
>
<div
aria-label="not complete"
class="css-1m6mxch"
>
3
</div>
<div
class="css-2ubamd"
>
你好, 世界
</div>
</li>
</ul>
<br />
<button
type="button"
>
Complete
</button>
</div>
<div
class="css-b8mu1s"
data-side="right"
>
<ul
class="css-13iez3p"
>
<li
class="css-1rrak06"
>
<div
aria-label="complete"
class="css-10ou7cu"
>
<svg
fill="none"
height="10"
viewBox="0 0 14 14"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.854 3.354a.5.5 0 00-.708-.708L5 10.793.854 6.646a.5.5 0 10-.708.708l4.5 4.5a.5.5 0 00.708 0l8.5-8.5z"
fill="white"
/>
</svg>
</div>
<div
class="css-2ubamd"
>
Hello World
</div>
</li>
<li
class="css-1rrak06"
>
<div
aria-label="not complete"
class="css-1m6mxch"
>
2
</div>
<div
class="css-2ubamd"
>
Bonjour le monde
</div>
</li>
<li
class="css-1rrak06"
>
<div
aria-label="not complete"
class="css-1m6mxch"
>
3
</div>
<div
class="css-2ubamd"
>
你好, 世界
</div>
</li>
</ul>
<br />
<button
type="button"
>
Complete
</button>
</div>
</div>
<div
hidden="true"
id="storybook-docs"
/>
</body>
at Object.getElementError (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:129:284)
at Vn (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:143:3483)
at zn (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:143:3528)
at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:145:10
at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:151:387
at sn.invoke (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:9372)
at sn.track (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:6505)
at Object.getByText (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:5777)
at play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/List.stories-eef0d4a7.js:7:1308)
at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/sb-preview/runtime.js:8267:60