Fail
Unable to find role="button" and name "Catch a UI change"
Ignored nodes: comments, script, style
<div
class="css-195ooqw"
data-canvas="right"
orientation="right"
>
<button
style="position: absolute; right: 0px; bottom: 0px;"
type="button"
>
Change Git
</button>
<div
class="css-1g4yje1"
>
<div
class="css-lnrlok"
>
<div
class="css-bjg3z0"
/>
</div>
<div
class="css-1ys7puq"
hidden=""
>
<div
class="css-j4bhb1"
>
<button
class="css-1cwvfb0"
style="margin-right: -8px;"
>
<svg
aria-label="Close"
class="css-zdpt2t"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z"
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>
</button>
<div
class="css-mw9cdw"
>
<div
class="css-1snw9n3"
>
Configuration
</div>
<div
class="css-x7fdm2"
>
To configure this addon, create
<code
class="css-xzuwb5"
>
chromatic.config.json
</code>
in your project's root directory.
<a
class="css-yzmtbe"
href="https://www.chromatic.com/docs/cli/#configuration-options"
target="_blank"
>
<span
class="css-1mjgzsp"
>
Learn more
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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
class="css-1v8my8o"
>
<div>
<div
class="css-1wadiji"
>
<div
class="css-1ax7cmc"
>
<div
class="css-14xqnhe"
>
Uninstall addon
</div>
</div>
<div
class="css-s0keps"
>
Removing the addon updates your Storybook configuration and uninstalls the dependency.
</div>
<div
class="css-1q7njkh"
>
<button
class="css-1ujqy04"
>
Uninstall
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
class="css-195ooqw"
data-canvas="right"
orientation="right"
>
<button
style="position: absolute; right: 0px; bottom: 0px;"
type="button"
>
Change Git
</button>
<div
class="css-1g4yje1"
>
<div
class="css-lnrlok"
>
<div
class="css-bjg3z0"
/>
</div>
<div
class="css-1ys7puq"
hidden=""
>
<div
class="css-j4bhb1"
>
<button
class="css-1cwvfb0"
style="margin-right: -8px;"
>
<svg
aria-label="Close"
class="css-zdpt2t"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z"
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>
</button>
<div
class="css-mw9cdw"
>
<div
class="css-1snw9n3"
>
Configuration
</div>
<div
class="css-x7fdm2"
>
To configure this addon, create
<code
class="css-xzuwb5"
>
chromatic.config.json
</code>
in your project's root directory.
<a
class="css-yzmtbe"
href="https://www.chromatic.com/docs/cli/#configuration-options"
target="_blank"
>
<span
class="css-1mjgzsp"
>
Learn more
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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
class="css-1v8my8o"
>
<div>
<div
class="css-1wadiji"
>
<div
class="css-1ax7cmc"
>
<div
class="css-14xqnhe"
>
Uninstall addon
</div>
</div>
<div
class="css-s0keps"
>
Removing the addon updates your Storybook configuration and uninstalls the dependency.
</div>
<div
class="css-1q7njkh"
>
<button
class="css-1ujqy04"
>
Uninstall
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>View in Storybook
Chrome 121960x720
Linux Linux Ubuntu 20.04.4
6e2c9e on ghengeveld/273-state-is-lost-when-switching-to-docs-page
Unable to find role="button" and name "Catch a UI change"
Ignored nodes: comments, script, style
<div
class="css-13ixcgq"
data-canvas="right"
orientation="right"
>
<button
style="position: absolute; right: 0px; bottom: 0px;"
type="button"
>
Change Git
</button>
<div
class="css-1g4yje1"
>
<div
class="css-1n68qij"
>
<div
class="css-bjg3z0"
/>
</div>
<div
class="css-tir4e8"
hidden=""
>
<div
class="css-187nfjq"
>
<button
class="css-1yas7d7"
style="margin-right: -8px;"
>
<svg
aria-label="Close"
class="css-zdpt2t"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z"
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>
</button>
<div
class="css-mw9cdw"
>
<div
class="css-1snw9n3"
>
Configuration
</div>
<div
class="css-9xpgbk"
>
To configure this addon, create
<code
class="css-10re421"
>
chromatic.config.json
</code>
in your project's root directory.
<a
class="css-yzmtbe"
href="https://www.chromatic.com/docs/cli/#configuration-options"
target="_blank"
>
<span
class="css-1mjgzsp"
>
Learn more
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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
class="css-1v8my8o"
>
<div>
<div
class="css-1wadiji"
>
<div
class="css-1ax7cmc"
>
<div
class="css-14xqnhe"
>
Uninstall addon
</div>
</div>
<div
class="css-1i8r6sf"
>
Removing the addon updates your Storybook configuration and uninstalls the dependency.
</div>
<div
class="css-1q7njkh"
>
<button
class="css-oe4cwy"
>
Uninstall
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
class="css-13ixcgq"
data-canvas="right"
orientation="right"
>
<button
style="position: absolute; right: 0px; bottom: 0px;"
type="button"
>
Change Git
</button>
<div
class="css-1g4yje1"
>
<div
class="css-1n68qij"
>
<div
class="css-bjg3z0"
/>
</div>
<div
class="css-tir4e8"
hidden=""
>
<div
class="css-187nfjq"
>
<button
class="css-1yas7d7"
style="margin-right: -8px;"
>
<svg
aria-label="Close"
class="css-zdpt2t"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z"
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>
</button>
<div
class="css-mw9cdw"
>
<div
class="css-1snw9n3"
>
Configuration
</div>
<div
class="css-9xpgbk"
>
To configure this addon, create
<code
class="css-10re421"
>
chromatic.config.json
</code>
in your project's root directory.
<a
class="css-yzmtbe"
href="https://www.chromatic.com/docs/cli/#configuration-options"
target="_blank"
>
<span
class="css-1mjgzsp"
>
Learn more
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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
class="css-1v8my8o"
>
<div>
<div
class="css-1wadiji"
>
<div
class="css-1ax7cmc"
>
<div
class="css-14xqnhe"
>
Uninstall addon
</div>
</div>
<div
class="css-1i8r6sf"
>
Removing the addon updates your Storybook configuration and uninstalls the dependency.
</div>
<div
class="css-1q7njkh"
>
<button
class="css-oe4cwy"
>
Uninstall
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>View in StorybookChrome 121960x720
Linux Linux Ubuntu 20.04.4
6e2c9e on ghengeveld/273-state-is-lost-when-switching-to-docs-page
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Unable to find role="button" and name "Catch a UI change"
Ignored nodes: comments, script, style
<div
class="css-195ooqw"
data-canvas="right"
orientation="right"
>
<button
style="position: absolute; right: 0px; bottom: 0px;"
type="button"
>
Change Git
</button>
<div
class="css-1g4yje1"
>
<div
class="css-lnrlok"
>
<div
class="css-bjg3z0"
/>
</div>
<div
class="css-1ys7puq"
hidden=""
>
<div
class="css-j4bhb1"
>
<button
class="css-1cwvfb0"
style="margin-right: -8px;"
>
<svg
aria-label="Close"
class="css-zdpt2t"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z"
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>
</button>
<div
class="css-mw9cdw"
>
<div
class="css-1snw9n3"
>
Configuration
</div>
<div
class="css-x7fdm2"
>
To configure this addon, create
<code
class="css-xzuwb5"
>
chromatic.config.json
</code>
in your project's root directory.
<a
class="css-yzmtbe"
href="https://www.chromatic.com/docs/cli/#configuration-options"
target="_blank"
>
<span
class="css-1mjgzsp"
>
Learn more
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
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
class="css-1v8my8o"
>
<div>
<div
class="css-1wadiji"
>
<div
class="css-1ax7cmc"
>
<div
class="css-14xqnhe"
>
Uninstall addon
</div>
</div>
<div
class="css-s0keps"
>
Removing the addon updates your Storybook configuration and uninstalls the dependency.
</div>
<div
class="css-1q7njkh"
>
<button
class="css-1ujqy04"
>
Uninstall
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
at Yl (https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/index-773e0845.js:42:3387)
at Object.findByRole (https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/index-773e0845.js:50:236)
at Af.invoke (https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/preview-fe0e2c4a.js:27:9124)
at Af.intercept (https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/preview-fe0e2c4a.js:27:6653)
at Af.track (https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/preview-fe0e2c4a.js:27:6385)
at findByRole (https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/preview-fe0e2c4a.js:27:5657)
at https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/Onboarding.stories-484d26b0.js:1:5068
at https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/playAll-2e058e17.js:1:215
at Array.map (<anonymous>)
at https://6480e1b0042842f149cfd74c-iiksyvefkr.capture-loopback.chromatic.com/assets/playAll-2e058e17.js:1:204