chromeThe baseline is larger than the new snapshot (1200x900 to 232x214).
edgeThe baseline is larger than the new snapshot (1200x900 to 232x214).
firefoxThe baseline is larger than the new snapshot (1200x900 to 232x214).
Fail
Unable to find role="button" and name `/Expand/`
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
style="max-width: 232px;"
>
<div
class="css-nqrhx4"
id="storybook-testing-module"
>
<div
class="css-1u2j0qv"
>
<div
class="css-1d56hfi"
data-testid="collapse"
style="transition: max-height 0ms ease 0s; display: block; max-height: 172px;"
>
<div
class="css-j7qwjs"
>
<div
class="css-1e3qj69"
data-module-id="component-tests"
>
<div
class="css-j4dgzn"
>
<div
class="css-1g0drmq"
>
<div
class="css-gi18t0"
id="testing-module-title"
>
Component tests
</div>
<div
class="css-6c3wwi"
id="testing-module-description"
>
Ran 2 seconds ago
</div>
</div>
<div
class="css-ffmerx"
>
<button
aria-label="Enable watch mode for "
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 9.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M14 7l-.21.293C13.669 7.465 10.739 11.5 7 11.5S.332 7.465.21 7.293L0 7l.21-.293C.331 6.536 3.261 2.5 7 2.5s6.668 4.036 6.79 4.207L14 7zM2.896 5.302A12.725 12.725 0 001.245 7c.296.37.874 1.04 1.65 1.698C4.043 9.67 5.482 10.5 7 10.5c1.518 0 2.958-.83 4.104-1.802A12.72 12.72 0 0012.755 7c-.297-.37-.875-1.04-1.65-1.698C9.957 4.33 8.517 3.5 7 3.5c-1.519 0-2.958.83-4.104 1.802z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
<button
aria-label="Start Component tests"
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M4.2 10.88L10.668 7 4.2 3.12v7.76zM3 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L4.212 1.727A.8.8 0 003 2.413z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-1e3qj69"
data-module-id="visual-tests"
>
<div
class="css-j4dgzn"
>
<div
class="css-1g0drmq"
>
<div
class="css-gi18t0"
id="testing-module-title"
>
Visual tests
</div>
<div
class="css-6c3wwi"
id="testing-module-description"
>
Not run
</div>
</div>
<div
class="css-ffmerx"
>
<button
aria-label="Start Visual tests"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M4.2 10.88L10.668 7 4.2 3.12v7.76zM3 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L4.212 1.727A.8.8 0 003 2.413z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-1e3qj69"
data-module-id="linting"
>
<div
class="css-149qlay"
>
Custom render function
</div>
</div>
</div>
</div>
<div
class="css-poqyku"
>
<button
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M5.2 10.88L11.668 7 5.2 3.12v7.76zM4 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L5.212 1.727A.8.8 0 004 2.413zM1.5 1.6a.6.6 0 01.6.6v9.6a.6.6 0 11-1.2 0V2.2a.6.6 0 01.6-.6z"
fill="currentColor"
fill-rule="evenodd"
/>
<path
clip-rule="evenodd"
d="M.963 1.932a.6.6 0 01.805-.268l1 .5a.6.6 0 01-.536 1.073l-1-.5a.6.6 0 01-.269-.805zM3.037 11.132a.6.6 0 01-.269.805l-1 .5a.6.6 0 01-.536-1.073l1-.5a.6.6 0 01.805.268z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
Running...
</button>
<div
class="css-13pthy0"
>
<button
aria-label="Collapse testing module"
class="css-jci5v"
id="testing-module-collapse-toggle"
>
<svg
fill="none"
height="14"
style="transform: rotate(180deg); transition: transform 250ms ease 0s; will-change: auto;"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.854 9.104a.5.5 0 11-.708-.708l3.5-3.5a.5.5 0 01.708 0l3.5 3.5a.5.5 0 01-.708.708L7 5.957 3.854 9.104z"
fill="currentColor"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
style="max-width: 232px;"
>
<div
class="css-nqrhx4"
id="storybook-testing-module"
>
<div
class="css-1u2j0qv"
>
<div
class="css-1d56hfi"
data-testid="collapse"
style="transition: max-height 0ms ease 0s; display: block; max-height: 172px;"
>
<div
class="css-j7qwjs"
>
<div
class="css-1e3qj69"
data-module-id="component-tests"
>
<div
class="css-j4dgzn"
>
<div
class="css-1g0drmq"
>
<div
class="css-gi18t0"
id="testing-module-title"
>
Component tests
</div>
<div
class="css-6c3wwi"
id="testing-module-description"
>
Ran 2 seconds ago
</div>
</div>
<div
class="css-ffmerx"
>
<button
aria-label="Enable watch mode for "
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 9.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M14 7l-.21.293C13.669 7.465 10.739 11.5 7 11.5S.332 7.465.21 7.293L0 7l.21-.293C.331 6.536 3.261 2.5 7 2.5s6.668 4.036 6.79 4.207L14 7zM2.896 5.302A12.725 12.725 0 001.245 7c.296.37.874 1.04 1.65 1.698C4.043 9.67 5.482 10.5 7 10.5c1.518 0 2.958-.83 4.104-1.802A12.72 12.72 0 0012.755 7c-.297-.37-.875-1.04-1.65-1.698C9.957 4.33 8.517 3.5 7 3.5c-1.519 0-2.958.83-4.104 1.802z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
<button
aria-label="Start Component tests"
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M4.2 10.88L10.668 7 4.2 3.12v7.76zM3 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L4.212 1.727A.8.8 0 003 2.413z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-1e3qj69"
data-module-id="visual-tests"
>
<div
class="css-j4dgzn"
>
<div
class="css-1g0drmq"
>
<div
class="css-gi18t0"
id="testing-module-title"
>
Visual tests
</div>
<div
class="css-6c3wwi"
id="testing-module-description"
>
Not run
</div>
</div>
<div
class="css-ffmerx"
>
<button
aria-label="Start Visual tests"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M4.2 10.88L10.668 7 4.2 3.12v7.76zM3 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L4.212 1.727A.8.8 0 003 2.413z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-1e3qj69"
data-module-id="linting"
>
<div
class="css-149qlay"
>
Custom render function
</div>
</div>
</div>
</div>
<div
class="css-poqyku"
>
<button
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M5.2 10.88L11.668 7 5.2 3.12v7.76zM4 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L5.212 1.727A.8.8 0 004 2.413zM1.5 1.6a.6.6 0 01.6.6v9.6a.6.6 0 11-1.2 0V2.2a.6.6 0 01.6-.6z"
fill="currentColor"
fill-rule="evenodd"
/>
<path
clip-rule="evenodd"
d="M.963 1.932a.6.6 0 01.805-.268l1 .5a.6.6 0 01-.536 1.073l-1-.5a.6.6 0 01-.269-.805zM3.037 11.132a.6.6 0 01-.269.805l-1 .5a.6.6 0 01-.536-1.073l1-.5a.6.6 0 01.805.268z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
Running...
</button>
<div
class="css-13pthy0"
>
<button
aria-label="Collapse testing module"
class="css-jci5v"
id="testing-module-collapse-toggle"
>
<svg
fill="none"
height="14"
style="transform: rotate(180deg); transition: transform 250ms ease 0s; will-change: auto;"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.854 9.104a.5.5 0 11-.708-.708l3.5-3.5a.5.5 0 01.708 0l3.5 3.5a.5.5 0 01-.708.708L7 5.957 3.854 9.104z"
fill="currentColor"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>View in StorybookChrome 121232x214
Linux Linux Ubuntu 20.04.4
73e55e on testing-module-settings
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 `/Expand/`
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
style="max-width: 232px;"
>
<div
class="css-nqrhx4"
id="storybook-testing-module"
>
<div
class="css-1u2j0qv"
>
<div
class="css-1d56hfi"
data-testid="collapse"
style="transition: max-height 0ms ease 0s; display: block; max-height: 172px;"
>
<div
class="css-j7qwjs"
>
<div
class="css-1e3qj69"
data-module-id="component-tests"
>
<div
class="css-j4dgzn"
>
<div
class="css-1g0drmq"
>
<div
class="css-gi18t0"
id="testing-module-title"
>
Component tests
</div>
<div
class="css-6c3wwi"
id="testing-module-description"
>
Ran 2 seconds ago
</div>
</div>
<div
class="css-ffmerx"
>
<button
aria-label="Enable watch mode for "
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 9.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"
fill="currentColor"
/>
<path
clip-rule="evenodd"
d="M14 7l-.21.293C13.669 7.465 10.739 11.5 7 11.5S.332 7.465.21 7.293L0 7l.21-.293C.331 6.536 3.261 2.5 7 2.5s6.668 4.036 6.79 4.207L14 7zM2.896 5.302A12.725 12.725 0 001.245 7c.296.37.874 1.04 1.65 1.698C4.043 9.67 5.482 10.5 7 10.5c1.518 0 2.958-.83 4.104-1.802A12.72 12.72 0 0012.755 7c-.297-.37-.875-1.04-1.65-1.698C9.957 4.33 8.517 3.5 7 3.5c-1.519 0-2.958.83-4.104 1.802z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
<button
aria-label="Start Component tests"
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M4.2 10.88L10.668 7 4.2 3.12v7.76zM3 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L4.212 1.727A.8.8 0 003 2.413z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-1e3qj69"
data-module-id="visual-tests"
>
<div
class="css-j4dgzn"
>
<div
class="css-1g0drmq"
>
<div
class="css-gi18t0"
id="testing-module-title"
>
Visual tests
</div>
<div
class="css-6c3wwi"
id="testing-module-description"
>
Not run
</div>
</div>
<div
class="css-ffmerx"
>
<button
aria-label="Start Visual tests"
class="css-18rvurk"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M4.2 10.88L10.668 7 4.2 3.12v7.76zM3 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L4.212 1.727A.8.8 0 003 2.413z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-1e3qj69"
data-module-id="linting"
>
<div
class="css-149qlay"
>
Custom render function
</div>
</div>
</div>
</div>
<div
class="css-poqyku"
>
<button
class="css-xv66sf"
disabled=""
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M5.2 10.88L11.668 7 5.2 3.12v7.76zM4 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L5.212 1.727A.8.8 0 004 2.413zM1.5 1.6a.6.6 0 01.6.6v9.6a.6.6 0 11-1.2 0V2.2a.6.6 0 01.6-.6z"
fill="currentColor"
fill-rule="evenodd"
/>
<path
clip-rule="evenodd"
d="M.963 1.932a.6.6 0 01.805-.268l1 .5a.6.6 0 01-.536 1.073l-1-.5a.6.6 0 01-.269-.805zM3.037 11.132a.6.6 0 01-.269.805l-1 .5a.6.6 0 01-.536-1.073l1-.5a.6.6 0 01.805.268z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
Running...
</button>
<div
class="css-13pthy0"
>
<button
aria-label="Collapse testing module"
class="css-jci5v"
id="testing-module-collapse-toggle"
>
<svg
fill="none"
height="14"
style="transform: rotate(180deg); transition: transform 250ms ease 0s; will-change: auto;"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.854 9.104a.5.5 0 11-.708-.708l3.5-3.5a.5.5 0 01.708 0l3.5 3.5a.5.5 0 01-.708.708L7 5.957 3.854 9.104z"
fill="currentColor"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
at ka (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-ee31b4a8.js:151:3353)
at https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-ee31b4a8.js:159:234
at Rl.invoke (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-28297db0.js:48:8791)
at Rl.intercept (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-28297db0.js:48:6193)
at Rl.track (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-28297db0.js:48:5925)
at Object.findByRole (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-28297db0.js:48:5198)
at play (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/TestingModule.stories-9e2d073c.js:1:1870)
at https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/sb-preview/runtime.js:5988:60
at mn.runPhase (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/sb-preview/runtime.js:5875:100)
at mn.render (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/sb-preview/runtime.js:5988:25)