Fail
Unable to find role="button" and name "Catch a UI change"
Ignored nodes: comments, script, style
<div
class="css-6yv6gr"
data-canvas="bottom"
orientation="bottom"
>
<div
class="css-8x1w9r"
>
<div
class="css-1pjqexw"
>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Nice. You saved your stories as a test baseline.
</h1>
<p
class="css-lpn1mp"
>
This story was indexed and snapshotted in a standardized cloud browser.
</p>
<img
alt="Snapshot Preview"
src="/Snapshot-Preview.png"
/>
<p>
Let’s see the superpower of catching visual changes.
</p>
<button
class="css-tr0tgk"
>
Catch a UI Change
</button>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
class="css-6yv6gr"
data-canvas="bottom"
orientation="bottom"
>
<div
class="css-8x1w9r"
>
<div
class="css-1pjqexw"
>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Nice. You saved your stories as a test baseline.
</h1>
<p
class="css-lpn1mp"
>
This story was indexed and snapshotted in a standardized cloud browser.
</p>
<img
alt="Snapshot Preview"
src="/Snapshot-Preview.png"
/>
<p>
Let’s see the superpower of catching visual changes.
</p>
<button
class="css-tr0tgk"
>
Catch a UI Change
</button>
</div>
</div>
</div>View in Storybook
Chrome 105960x720
Linux Linux Ubuntu 20.04.4
f40bb1 on matt/ap-3585-onboarding-flow-for-creating-first-build
Unable to find role="button" and name "Catch a UI change"
Ignored nodes: comments, script, style
<div
class="css-1fcd2ci"
data-canvas="bottom"
orientation="bottom"
>
<div
class="css-pmpiqi"
>
<div
class="css-1pjqexw"
>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Nice. You saved your stories as a test baseline.
</h1>
<p
class="css-lpn1mp"
>
This story was indexed and snapshotted in a standardized cloud browser.
</p>
<img
alt="Snapshot Preview"
loading="eager"
src="/Snapshot-Preview.png"
/>
<p>
Let’s see the superpower of catching visual changes.
</p>
<button
class="css-tr0tgk"
>
Catch a UI Change
</button>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
class="css-1fcd2ci"
data-canvas="bottom"
orientation="bottom"
>
<div
class="css-pmpiqi"
>
<div
class="css-1pjqexw"
>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Nice. You saved your stories as a test baseline.
</h1>
<p
class="css-lpn1mp"
>
This story was indexed and snapshotted in a standardized cloud browser.
</p>
<img
alt="Snapshot Preview"
loading="eager"
src="/Snapshot-Preview.png"
/>
<p>
Let’s see the superpower of catching visual changes.
</p>
<button
class="css-tr0tgk"
>
Catch a UI Change
</button>
</div>
</div>
</div>View in StorybookChrome 105960x720
Linux Linux Ubuntu 20.04.4
f40bb1 on matt/ap-3585-onboarding-flow-for-creating-first-build
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: ignoredException
at https://6480e1b0042842f149cfd74c-tkpbnmlkka.capture-loopback.chromatic.com/sb-preview/runtime.js:4:93306