chrome
edge
firefoxFail
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 play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/SaveStory.stories-fd022b30.js:1:5184)
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)