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 121
960x720
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 Storybook
Chrome 121
960x720
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