chromeThe baseline is taller than the new snapshot (1200x920 to 1200x900).
edgeThe baseline is taller than the new snapshot (1200x920 to 1200x900).
firefoxThe baseline is taller than the new snapshot (1200x920 to 1200x900).
Fail
Found multiple elements with the role "button" and name `/Create/i`
Here are the matching elements:
Ignored nodes: comments, script, style
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
Ignored nodes: comments, script, style
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="css-ocnlra"
data-side="left"
>
<div
style="min-height: 100vh;"
>
<div
class="css-17zcn88"
id="save-from-controls"
>
<div
class="css-1tr91ii"
>
<div
class="css-q0n6cw"
>
<div
class="css-17fv6jh"
>
<button
aria-label="Save changes to story"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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="currentColor"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="Save"
>
Update story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Reset changes"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
<span>
Reset
</span>
</button>
</div>
</div>
<div
class="css-1frixfu"
>
<div
class="css-1edkxqm"
data-short-label="Unsaved changes"
>
You modified this story. Do you want to save your changes?
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="css-1x6s7u8"
data-side="right"
>
<div
style="min-height: 100vh;"
>
<div
class="css-17zcn88"
id="save-from-controls"
>
<div
class="css-1lkncza"
>
<div
class="css-q0n6cw"
>
<div
class="css-17fv6jh"
>
<button
aria-label="Save changes to story"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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="currentColor"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="Save"
>
Update story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Reset changes"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
<span>
Reset
</span>
</button>
</div>
</div>
<div
class="css-1frixfu"
>
<div
class="css-1edkxqm"
data-short-label="Unsaved changes"
>
You modified this story. Do you want to save your changes?
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="css-ocnlra"
data-side="left"
>
<div
style="min-height: 100vh;"
>
<div
class="css-17zcn88"
id="save-from-controls"
>
<div
class="css-1tr91ii"
>
<div
class="css-q0n6cw"
>
<div
class="css-17fv6jh"
>
<button
aria-label="Save changes to story"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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="currentColor"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="Save"
>
Update story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Reset changes"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
<span>
Reset
</span>
</button>
</div>
</div>
<div
class="css-1frixfu"
>
<div
class="css-1edkxqm"
data-short-label="Unsaved changes"
>
You modified this story. Do you want to save your changes?
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="css-1x6s7u8"
data-side="right"
>
<div
style="min-height: 100vh;"
>
<div
class="css-17zcn88"
id="save-from-controls"
>
<div
class="css-1lkncza"
>
<div
class="css-q0n6cw"
>
<div
class="css-17fv6jh"
>
<button
aria-label="Save changes to story"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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="currentColor"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="Save"
>
Update story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Reset changes"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
<span>
Reset
</span>
</button>
</div>
</div>
<div
class="css-1frixfu"
>
<div
class="css-1edkxqm"
data-short-label="Unsaved changes"
>
You modified this story. Do you want to save your changes?
</div>
</div>
</div>
</div>
</div>
</div>
</div>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 role "button" and name `/Create/i`
Here are the matching elements:
Ignored nodes: comments, script, style
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
Ignored nodes: comments, script, style
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="css-ocnlra"
data-side="left"
>
<div
style="min-height: 100vh;"
>
<div
class="css-17zcn88"
id="save-from-controls"
>
<div
class="css-1tr91ii"
>
<div
class="css-q0n6cw"
>
<div
class="css-17fv6jh"
>
<button
aria-label="Save changes to story"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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="currentColor"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="Save"
>
Update story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Reset changes"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
<span>
Reset
</span>
</button>
</div>
</div>
<div
class="css-1frixfu"
>
<div
class="css-1edkxqm"
data-short-label="Unsaved changes"
>
You modified this story. Do you want to save your changes?
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="css-1x6s7u8"
data-side="right"
>
<div
style="min-height: 100vh;"
>
<div
class="css-17zcn88"
id="save-from-controls"
>
<div
class="css-1lkncza"
>
<div
class="css-q0n6cw"
>
<div
class="css-17fv6jh"
>
<button
aria-label="Save changes to story"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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="currentColor"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="Save"
>
Update story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Create new story with these settings"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a.5.5 0 01.5.5v3h3a.5.5 0 010 1h-3v3a.5.5 0 01-1 0v-3h-3a.5.5 0 010-1h3v-3A.5.5 0 017 3z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1edkxqm"
data-short-label="New"
>
Create new story
</div>
</button>
</div>
<div
class="css-17fv6jh"
>
<button
aria-label="Reset changes"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
<span>
Reset
</span>
</button>
</div>
</div>
<div
class="css-1frixfu"
>
<div
class="css-1edkxqm"
data-short-label="Unsaved changes"
>
You modified this story. Do you want to save your changes?
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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 Object.findByRole (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:5777)
at Object.play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/SaveStory.stories-fd022b30.js:1:5184)
at play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/SaveStory.stories-fd022b30.js:1:5307)
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)