chrome
The baseline is taller than the new snapshot (320x590 to 320x568).
edge
The baseline is taller than the new snapshot (320x590 to 320x568).
firefox
The baseline is taller than the new snapshot (320x590 to 320x568).
Fail
Found multiple elements with the title: Open navigation menu. Here are the matching elements: Ignored nodes: comments, script, style <button class="css-13ygnfs" title="Open navigation menu" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z" fill="currentColor" /> </svg> <p class="css-qos0e6" > Root/Component/Story </p> </button> Ignored nodes: comments, script, style <button class="css-13ygnfs" title="Open navigation menu" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z" fill="currentColor" /> </svg> <p class="css-qos0e6" > Root/Component/Story </p> </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="display: flex; flex-direction: column; height: 100svh;" > <div style="flex: 1 1 0%;" /> <div class="css-uxh9rn" > <div class="sb-bar css-1beu2gj" > <button class="css-13ygnfs" title="Open navigation menu" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z" fill="currentColor" /> </svg> <p class="css-qos0e6" > Root/Component/Story </p> </button> <button class="css-18rvurk" title="Open addon panel" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z" fill="currentColor" /> <path clip-rule="evenodd" d="M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z" fill="currentColor" fill-rule="evenodd" /> </svg> </button> </div> </div> </div> </div> <div class="css-1x6s7u8" data-side="right" > <div style="display: flex; flex-direction: column; height: 100svh;" > <div style="flex: 1 1 0%;" /> <div class="css-1a2aw4u" > <div class="sb-bar css-1beu2gj" > <button class="css-13ygnfs" title="Open navigation menu" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z" fill="currentColor" /> </svg> <p class="css-qos0e6" > Root/Component/Story </p> </button> <button class="css-18rvurk" title="Open addon panel" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z" fill="currentColor" /> <path clip-rule="evenodd" d="M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z" fill="currentColor" fill-rule="evenodd" /> </svg> </button> </div> </div> </div> </div> </div>View in Storybook
Chrome 121
320x568
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 title: Open navigation menu. Here are the matching elements: Ignored nodes: comments, script, style <button class="css-13ygnfs" title="Open navigation menu" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z" fill="currentColor" /> </svg> <p class="css-qos0e6" > Root/Component/Story </p> </button> Ignored nodes: comments, script, style <button class="css-13ygnfs" title="Open navigation menu" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z" fill="currentColor" /> </svg> <p class="css-qos0e6" > Root/Component/Story </p> </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="display: flex; flex-direction: column; height: 100svh;" > <div style="flex: 1 1 0%;" /> <div class="css-uxh9rn" > <div class="sb-bar css-1beu2gj" > <button class="css-13ygnfs" title="Open navigation menu" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z" fill="currentColor" /> </svg> <p class="css-qos0e6" > Root/Component/Story </p> </button> <button class="css-18rvurk" title="Open addon panel" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z" fill="currentColor" /> <path clip-rule="evenodd" d="M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z" fill="currentColor" fill-rule="evenodd" /> </svg> </button> </div> </div> </div> </div> <div class="css-1x6s7u8" data-side="right" > <div style="display: flex; flex-direction: column; height: 100svh;" > <div style="flex: 1 1 0%;" /> <div class="css-1a2aw4u" > <div class="sb-bar css-1beu2gj" > <button class="css-13ygnfs" title="Open navigation menu" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z" fill="currentColor" /> </svg> <p class="css-qos0e6" > Root/Component/Story </p> </button> <button class="css-18rvurk" title="Open addon panel" > <svg fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg" > <path d="M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z" fill="currentColor" /> <path clip-rule="evenodd" d="M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z" fill="currentColor" fill-rule="evenodd" /> </svg> </button> </div> </div> </div> </div> </div> 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.getByTitle (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:5777) at Object.play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/MobileNavigation.stories-369b9aab.js:27:12857) at play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/MobileNavigation.stories-369b9aab.js:27:12931)